nicht angemeldet
Layoutprobleme mit Divs und position:relaitv
Hallo Community,
ich habe ein Problem und zwar will ich eine seite layouten:
+------+---------------+---------+
| Logo | Puffer | Navi |
+------+---------------+---------+
| |
| Content |
meine Divs:
<body>
<div id="outer">
<div id="header">
<div id="logo">
</div>
<div id="navi">
</div>
</div>
<div id="content">
</div>
</div>
</body>
also mein Div outer legt den Hauptteil der Seite fest (width: 80% ...).
Mein Div header beinhaltet logo puffer und navi
#header
{
width:100%;
height:50px;
}
und meine Navi soll jetzt ganz rechts aussen und am Boden (die Navi ist ein bisschen kleiner als der header Teil) sein. Versuche es derzeit so:
#navi
{
position:relative;
right:0px;
width:775px;
bottom:0px;
padding:0px;
margin:0px;
}
aber irgendwie funktioniert das nicht. Es sieht sogar so aus als wäre die Navi nciht einmal im Header Div. Getestet mit IE7. Hoffe ihr habt es soweit verstanden und könnt mit helfen.
-
width:100%;
Ein Blockelement ist standardmäßig immer 100% breit, die ausdrückliche Angabe ist nicht nötig.
#navi
{
position:relative;
right:0px;
width:775px;
bottom:0px;
padding:0px;
margin:0px;
}
[/code]Mit position:relative kannst du ein Element ausgehend von seiner ursprünglichen Position im normalen Elementfluss verschieben. Für dein Unterfangen ist position:relative an dieser Stelle nicht brauchbar. Was du machen könntest:
Dem header-Container position:relative geben, aber keine Verschiebung vornehmen (kein top/bottom/left/right). Element bleibt also im normalen Fluss. Dann dem navi-Element position:absolute geben. Das wird dann relativ zum header-Container absolut positioniert. Dann kannst du mit right:0 und bottom:0 arbeiten.
Oder du benutzt float:left für #logo und float:right und ggf. margin-top für #navi.
Mathias
-
Hi,
»» width:100%;
Ein Blockelement ist standardmäßig immer 100% breit,das ist falsch, der Default-Wert lautet "auto". Nur wenn die horizontalen Werte für padding, border-width und margin sich auf 0 berechnen, ist das Ergebnis[1] effektiv das selbe.
die ausdrückliche Angabe ist nicht nötig.
Hier ist sie es auf jeden Fall nicht.
Cheatah
[1] Wir reden noch immer von Default-Werten, also z.B. position:static und float:none.
--
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Ein Blockelement ist standardmäßig immer 100% breit,
das ist falsch, der Default-Wert lautet "auto".
Ja, und die deutsche Sprache ist nicht CSS. Ich sagte nicht, dass die CSS-Eigenschaft width den Wert »100%« hat, sondern ein Blockelement standardmäßig 100% breit ist.
Mathias
-
-
Danke, für die schnelle Antwort. Habe auch direkt mein position:relative im navi-Element gegen ein position:absolute ausgetauscht und schon wird meine Navi schön rechtsbündig dargestellt! Danke.
Trotzdem bleibt das Problem das die Navi nicht am Boden fixiert ist. Ich habe wie gesagt nur relative gegen absolute ausgetauscht. Ist bottom:0px; falsch?
-