|
|||
Div: vertikale Reihenfolge ändern
Hallo,
ich versuche gerade, mein Template etwas in Richtung SEO bzw. Sreenreader zu optimieren. Dazu möchte ich die beiden Divs (1. Navigation, 2. Content), die im DOM bzgl. SEO/Screenreader genau umgedreht (1. Content, 2. Navigation) stehen, in der Darstellung im Browser tauschen. Da ich keine absolute Positionierung verwenden möchte, versuche ich es gerade mit float und relativer Positionierung. Leider verschwindet dabei im IE <= Version 7 die Navigationsleiste. Vielleicht kann mir hier jemand einen Tipp geben, wie ich hier weiterkomme...!? Folgendes Beispiel verwende ich zum Testen: hier Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Vertical Order</title> <style> div#container { width: 960px; margin: 0 auto; background-color: #6CF; float: left; } div#first { width: 960px; background-color:#99F; position: relative; height: 50px; top:0; } div#second { width: 960px; background-color:#3F9; float: right; position: relative; top: 50px; } </style> </head> <body> <div id="container"> <div id="second">Lorem ipsum dolor sit amet...</div> <div id="first">Navigation</div> <div style="clear: both;"></div> </div> </body> </html> |
Sponsored Links |
Sponsored Links |
|
|||
Hallo heiko_rs,
ja, im Nachhinein betrachtet hast du da wohl recht. Das ursächliche Problem, weshalb ich eine absolute Positionierung umgehen wollte ist, dass ich am Ende des Containers kein Div für die Fußzeile mehr einfügen kann, da der Contentbereich eine variable Höhe hat und bottom: 0; nicht funktioniert, als das dadurch Container-Div nicht erweitert wird sondern hinter dem Content-Div verschwindet... Gibt's hier vllt. eine elegante Lösung? Danke! |
|
||||
Ich dachte es ist selbstverständlich, dass ausschließlich die Navi pos. abs. bekommt
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
|
||||
Padding o. Margin.
__________________
CSS-FAQ beantwortet die meisten Fragen | Retro coding gegen Divitis | Code validieren & posten für Hilfe |
Stichwörter |
absolute, css, div, float, order, position, relative, vertical |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Fragen zu CSS und Joomla | DOKTOR | CSS | 2 | 23.05.2011 20:29 |
Brauche Hilfe: Schwarzes Nichts | Zwox | CSS | 10 | 19.11.2010 17:53 |
Header entfernen | tripple | CSS | 17 | 15.06.2010 16:41 |
Schriftfarbe in den Eintragungsfeldern von jforms | Steveislucky | CSS | 2 | 16.03.2010 11:59 |
CSS Text nebeinander? | carstiee09 | CSS | 13 | 13.11.2009 20:18 |