nicht angemeldet
Zwei Ebenen zentrieren
Hallo
Ich bin gerade an der Erstellung eines Grundgerüsts einer Website bei der später noch ein CMS integriert wird. Der Inhalt ist im LayerContent untergebracht. Die Navigation soll ebenfalls in einem Layer stattfinden (LayerNavi). Der Inhaltslayer muss immer 100% hoch sein.
Der LayerContent wird so dargestellt wieder er soll. Sobald ich aber die Navigation drüberlege ist fertig lustig. Wenn ich position:relative nutze verschwindet die Navi am Boden und zudem wird der Conten-Layer nicht mehr auf 100% Höhe gesetzt und wenn ich postion:absolute benutze kann sie nicht zentrieren.
Hier mein CSS:
html {
height: 100%;
}
body {
height: 100%;
text-align: center; /* Workaround für den IE */
background-color:#f1f1f1;
margin-top: 0px;
margin-bottom: 0px;
}
#LayerContent {
background-color:#FFFFFF;
text-align: left; /* IE only */
margin-left: auto;
margin-right: auto;
position: relative;
width:1000px;
height:100%;
z-index:1;
}
#LayerNavi {
text-align: left; /* IE only */
top: 334px;
margin-left: 0px auto;
margin-right: 0px auto;
position: absolute;
width:1000px;
height:60px;
z-index:2;
}
Und hier der Link zur Seite: http://www.phonex-gema.ch/08/
Bin um jeden Tipp dankbar.
Grüsse - Oliver
-
Hi,
Und hier der Link zur Seite: http://www.phonex-gema.ch/08/
Bin um jeden Tipp dankbar.2 Fragen.
Warum platzierst du die Navigation im HTML-Dokument erst nach dem Inhalt, so dass du den Umweg über position:absolute gehen musst, um sie wieder daovr zu bekommen?
Weißt du wann ein absolute-positionierter Div-Container sich nach einem relativ-positionierten Div-Container richtet? (Tipp: denk an die Verschachtelung, welche bei dir nicht stimmt.)
Wenn du noch Hilfe brauchst...
Viel Erfolg und Beste GrüßeNAG
-
Hi,
Und hier der Link zur Seite: http://www.phonex-gema.ch/08/
Bin um jeden Tipp dankbar.2 Fragen.
Warum platzierst du die Navigation im HTML-Dokument erst nach dem Inhalt, so dass du den Umweg über position:absolute gehen musst, um sie wieder daovr zu bekommen?
Weißt du wann ein absolute-positionierter Div-Container sich nach einem relativ-positionierten Div-Container richtet? (Tipp: denk an die Verschachtelung, welche bei dir nicht stimmt.)
Wenn du noch Hilfe brauchst...
Viel Erfolg und Beste GrüßeNAG
Dein Tipp mit der Verschachtelung hat mir schon weitergeholfen. IE zeigt's nun so an wie ich es möchte und Firefox ist noch nicht glücklich mit meinem Code... hmmmmm .... Dann probier ich mal weiter.
Danke Dir!
Gruss Oliver
-
Dein Tipp mit der Verschachtelung hat mir schon weitergeholfen.
Du bist kurz vor der Lösung ;)
Lies dir mal diesen Artikel durch
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#positionDann wird dir klarer, wie position relativ und absolute im Zusammenhang wirken.
Übrigens:
Du kannst die Positionierung auch ganz weglassen, wenn du die Inhalte nur in die dem entsprechende Reihenfolge / Verschachtelung bringst.mfg NAG
--
signatur-
Dein Tipp mit der Verschachtelung hat mir schon weitergeholfen.
Du bist kurz vor der Lösung ;)
Lies dir mal diesen Artikel durch
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#positionDann wird dir klarer, wie position relativ und absolute im Zusammenhang wirken.
Übrigens:
Du kannst die Positionierung auch ganz weglassen, wenn du die Inhalte nur in die dem entsprechende Reihenfolge / Verschachtelung bringst.mfg NAG
Hallo NAG
Herzlichen Dank für Deine Tipps und Hinweise. Ich habe es nun hingekriegt und die Seite wird in IE und FF so dargestellt wie ich es wollt.Grüsse - Oliver
-
-
Dein Tipp mit der Verschachtelung hat mir schon weitergeholfen. IE zeigt's nun so an wie ich es möchte und Firefox ist noch nicht glücklich mit meinem Code... hmmmmm .... Dann probier ich mal weiter.
Danke Dir!
Gruss Oliver
Zu früh gefreut - ich hab's nun hingekriegt wieder alles zu zerschiessen (Sicherungskopien sind was Feines, wenn man sie denn macht....).
Jetzt will die Headergrafik mit dem Logo nicht mehr oben bündig an den Rand.
FF zeigt was ganz anderes und irgendwo ist jetzt ein fetter Wurm drinn.
Was ja erst Mal geholfen hat, war, dass ich den NaviLayer oberhalb des Contentlayers gesetzt habe. Aber irgendwie habe ich mich dann verrannt...-
Was ja erst Mal geholfen hat, war, dass ich den NaviLayer oberhalb des Contentlayers gesetzt habe. Aber irgendwie habe ich mich dann verrannt...
Hast du den Artikel gelesen?
Dort steht:
"absolute = absolute Positionierung, gemessen am Rand des nächsthöheren Vorfahrenelements, das nicht die Normaleinstellung position:static aufweist."
-> also orientiert sich absolute bspw. am Rand eines _relativ_ positionierten _Elternelements_Die einfachste Lösung für dich wäre KEINE Positionierung (relativ/absolute) zu verwenden, und stattdessen die richtige Reihenfolge / Verschachtelung zu beachten:
<div> zentriert
<logo>
<headerbild>
<menü>
<text-content>
</div>mfg NAG
--
signatur
-
-
-