nicht angemeldet
mehrere Divs untereinander positionieren
Hallo zusammen,
ich habe folgende HTML-Struktur:
<body>
<div id="center">
<div id="content_right">Inhalt</div>
<div id="content_left">Subnavi</div>
<div id="header">Header</div>
<div id="footer">Footer</div>
</div>
</body>
Aus SEO-Gründen steht das div "content_right" in der HTML-Hierarchi an oberster Stelle, da hier der für die Suchmaschinen wertvolle Inhalt aufgeführt werden soll. Erst später folgen dann die für Suchmaschinen weniger relevanten divs "content_left", "header", und "footer".
Für die Ausgabe im Browser, soll natürlich eine andere Reihenfolge dieser 4 divs gelten:
- Header
- links Subnavi / rechts Inhalt
- Footer
Die Reihenfolge möchte ich mittels CSS bestimmen (CSS-Code siehe ganz unten).
"center" ist relative positioniert. "header" ist absolute positioniert, dadurch wird "header" wie gewünscht an der oberen linken Ecke von "center" ausgerichtet.
"content_left" und "content_right" werden nebeneinander in gleicher Höher links und rechts voneinander positioniert.
"footer" wird direkt unterhalb von "content_left" und "content_right" (je nachdem, welches der beiden divs höher ist) angezeigt.
Soweit alles wie gewünscht, aber jetzt kommt der eigentliche Knackpunkt:
"content_left" und "content_right" orientieren sich ebenfalls, wie auch "header", an der oberen linken Ecke von "center". D.h. "conten_left" und "content_right" werden von "header" verdeckt.
Ich möchte nun aber, dass die beiden "content" divs unterhalb von "header" angezeigt werden. Sich also an der unteren linken Ecke von "header" orientieren.
Eine Möglichkeit wäre, "header" eine feste Höhe, z.B. 50px, zu verpassen und die beiden "content" divs mit margin-top:50px auszustatten.
Dies funktioniert zwar, finde ich aber nicht sehr schön. Was wenn das div "header" eine variable Höhe haben soll.
Gibt es eine Möglichkeit, "conten_right" und "content_right" an der unteren linken Ecke von "header" auszurichten, auch wenn die Höhe von "header" unbekannt ist???
#center {
position : relative;
width : 800px;
margin : 10px auto;
background-color : #ffffff;
}
#content_right {
width : 500px;
float : right;
background-color : #c9c9c9;
}
#content_left {
width : 300px;
float : left;
background-color : #0000ff;
}
#header {
position : absolute;
width : 100%;
background-color : #00ff00;
}
#footer {
width : 100%;
clear : left;
clear : right;
background-color : #ff0000;
}
-
hallo,
ich denke nicht : )
es gibt keine andere moeglichkeit, muss man den header mit einer fixen hoehe machen.Aber ich wuerde sagen, wenn der header oben ist, ist gar net so schlimm, weil google achtet auf linken und keywords, und besucherzahl viel mehr.
LG