"position: absolute" und "right: 0;" am rechten Rand des bodys?
0 
Jonathan
0
"position: absolute" und "right: 0;" am rechten Rand des bodys?
Hallo,
die Frage ist simpel:
<body>
<div id="content">...</div>
<div id="nav">..</div>
</body>
Ich möchte die #nav auf der rechten Seite des Inhalts darstellen. Das mache ich, da der Bannerteil eh absolute Größen aufweist, naheliegenderweise mit position:absolute und right:0. Dann kriegt #content einen margin-right kriegt, der so breit wie die Navigation ist, und alle sind glücklich.
Naja, zumindest fast. Denn wird der Bildschirm sehr eng, dann krieg ich mit der Breite von #content Probleme. Ich hätte gerne eine Mindestbreite (min-width). Wenn ich allerdings mit der arbeite und dann den Bildschirm in diese Breiten verkleinere, wird der Bereich #nav sich mit dem Inhalt überlappen. Also setzte ich min-width für den <body>. Das funktioniert zwar, aber blöderweise setzt das "right:0" den Bereich #nav nicht an den rechten Rand des <body>s, womit das Problem gelöst wäre, sondern an den rechten Rand des Browserfensters.
Meine Frage: Gibt es irgendeine Lösung für das Problem, die das #nav-<div> *nach* dem #content-<div> im Quelltext behält? Denn ich könnte die HTML-Datei umschreiben zu
<body>
<div id="nav">...</div>
<div id="content">..</div>
</body>
Und anschließend #nav rechts um #content floaten lassen, doch komme ich damit auch nur bedingt zu einer Lösung, denn:
1. wenn die Mindestbreite zum Wirken kommt (schmales Browserfenster), dann wird #nav einfach unter #content rutschen und damit ganz verschwinden (ganz schlecht!)
und
2. Ist es nicht barrieremäßig/suchmaschinenmäßig schlecht, wenn die Navigation vor dem eigentlichen Inhalt steht? Ich dachte es sei am optimalsten, wenn der Inhalt im Quelltext ganz oben steht.
Kann mir jemand mit meiem Problem helfen? Gibt es eine Lösung dafür?
Grüße,
Sven
-
Hallo,
Kann mir jemand mit meiem Problem helfen? Gibt es eine Lösung dafür?
Gib der Navigation einfach float:right statt position:absolute und right:0 und alles sollte passen.
Von position:absolute rate ich eigentlich normalerweise ab, man kann das meiste auch ohne machen.
Jonathan
-
Hallo Jonathan,
Gib der Navigation einfach float:right statt position:absolute und right:0 und alles sollte passen.
ja, aber beachte doch mal die Nachteile, die ich dazu anschrieb:
- wenn die Mindestbreite zum Wirken kommt (schmales Browserfenster), dann wird #nav einfach unter #content rutschen und damit ganz verschwinden (ganz schlecht!)
- Ist es nicht barrieremäßig/suchmaschinenmäßig schlecht, wenn die Navigation vor dem eigentlichen Inhalt steht? Ich dachte es sei am optimalsten, wenn der Inhalt im Quelltext ganz oben steht.
:/
Viele Grüße,
Sven
-
Hallo,
- wenn die Mindestbreite zum Wirken kommt (schmales Browserfenster), dann wird #nav einfach unter #content rutschen und damit ganz verschwinden (ganz schlecht!)
Du solltest den Element, das sowohl die Navigation als auch den Inhalt enthält (typischerweise body) eine entsprechende Mindestbreite geben, dass beides nebeneinander hineinpasst.
- Ist es nicht barrieremäßig/suchmaschinenmäßig schlecht, wenn die Navigation vor dem eigentlichen Inhalt steht? Ich dachte es sei am optimalsten, wenn der Inhalt im Quelltext ganz oben steht.
Da streiten sich sicher auch die Gelehrten. Eigentlich ist es aber egal, was du zuerst in den Quelltext setzt, du kannst ja alternativ (oder gemeinsam) auch den Inhalt links flaoten lassen.
Jonathan
-
Hallo Jonathan,
- wenn die Mindestbreite zum Wirken kommt (schmales Browserfenster), dann wird #nav einfach unter #content rutschen und damit ganz verschwinden (ganz schlecht!)
Du solltest den Element, das sowohl die Navigation als auch den Inhalt enthält (typischerweise body) eine entsprechende Mindestbreite geben, dass beides nebeneinander hineinpasst.
das ist ein Argument. Danke :)
- Ist es nicht barrieremäßig/suchmaschinenmäßig schlecht, wenn die Navigation vor dem eigentlichen Inhalt steht? Ich dachte es sei am optimalsten, wenn der Inhalt im Quelltext ganz oben steht.
Da streiten sich sicher auch die Gelehrten. Eigentlich ist es aber egal, was du zuerst in den Quelltext setzt, du kannst ja alternativ (oder gemeinsam) auch den Inhalt links flaoten lassen.
hm... also doch #nav unter #content und #content links floaten lassen? Das könnte im schlimmsten Fall noch dazu führen, dass die Navigation ganz oben steht und der Text unten drunter. Aber generell eigentlich auch eine Idee. Ich probier's mal aus.
Viele Grüße,
Sven
-
Hallo Jonathan, Hallo Sven,
- wenn die Mindestbreite zum Wirken kommt (schmales Browserfenster), dann wird #nav einfach unter #content rutschen und damit ganz verschwinden (ganz schlecht!)
Du solltest den Element, das sowohl die Navigation als auch den Inhalt enthält (typischerweise body) eine entsprechende Mindestbreite geben, dass beides nebeneinander hineinpasst.
das ist ein Argument. Danke :)
es funktioniert tatsächlich, wie ich gerade mit firebug durchgespielt habe. Aber die Navigation steht ganz oben und das ist unnötig, denn:
<body>
<div id="wrapper">
<div id="content">...</div>
<div id="nav">...</div>
</div>
</div>wenn man #wrapper position:relative gibt, wird #nav sich absolut im wrapper positionieren. Wenn man #wrapper dazu noch eine Mindestbreite gibt, ist alles geregelt: Beim zu-klein werden des Browserfensters verharrt wrapper in der Breite und nav ist genau da, wo es hingehört. Perfekt!
Und es kommt noch besser: sogar für den Hintergrund von #nav, der als typischer Spaltenhintergrund über die gesamte Seite gehen soll, hab ich eine Lösung: Er wird nicht mehr dem <body> zugewiesen, was das gleiche Problem wie mit #nav position:absolute hatte, da der Hintergrund background-position: top right; hatte und damit beim Kleinerwerden des Browserfensters mit in den #content-Text reinfloss, sondern er wird dem #wrapper zugewiesen, mit genau den gleichen Eigenschaften wie für <body>.
Das Ergebnis: Zweispaltiges Layout mit absolut angeordneter #nav und trotzdem voller Flexibilität in Hinsicht Mindestbreite. Und es kommt noch besser: Dank der relativen Positionierung von #nav zu #wrapper ist man sogar mit der vertikalen Positionierung von #nav im Bezug auf die Gesamtseite viel flexibeler geworden, denn #nav fängt jetzt an, wo #wrapper anfängt, und das ist nach dem Ende des vorherigen Elements (typischerweise banner). Vorher musste dieses Verhalten durch einen in der Höhe absolut festgelegten Banner simuliert werden.
Vielen Dank,
Sven
- wenn die Mindestbreite zum Wirken kommt (schmales Browserfenster), dann wird #nav einfach unter #content rutschen und damit ganz verschwinden (ganz schlecht!)
- wenn die Mindestbreite zum Wirken kommt (schmales Browserfenster), dann wird #nav einfach unter #content rutschen und damit ganz verschwinden (ganz schlecht!)
-
-
hi,
Also setzte ich min-width für den <body>. Das funktioniert zwar, aber blöderweise setzt das "right:0" den Bereich #nav nicht an den rechten Rand des <body>s, womit das Problem gelöst wäre, sondern an den rechten Rand des Browserfensters.
Es _muss_ ja am rechten Rand des Viewports ausgerichtet werden, solange du kein Vorfahrenelement mit vom Default static abweichender position bereitstellst.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Moin wahsaga,
Also setzte ich min-width für den <body>. Das funktioniert zwar, aber blöderweise setzt das "right:0" den Bereich #nav nicht an den rechten Rand des <body>s, womit das Problem gelöst wäre, sondern an den rechten Rand des Browserfensters.
Es _muss_ ja am rechten Rand des Viewports ausgerichtet werden, solange du kein Vorfahrenelement mit vom Default static abweichender position bereitstellst.ganz genau. Ein Wrapperelement direkt als Kind vom body mit position:relative und min-width: ...; ist die Lösung. Ich war einfach zu blöd, das sofort zu begreifen ;)
Viele Grüße,
Sven-
hi,
ganz genau. Ein Wrapperelement direkt als Kind vom body mit position:relative und min-width: ...; ist die Lösung.
Und wozu das Kind ...?
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Mooin wahsaga,
ganz genau. Ein Wrapperelement direkt als Kind vom body mit position:relative und min-width: ...; ist die Lösung.
Und wozu das Kind ...?<body>
<div id="wrapper">
Seiteninhalt
</div>
</body>Nur ein child node für <body>.
Grüße,
Sven
-
Und warum? Magst Du body nicht? Oder ist er Dir gar heilig?
-
Hallo Steel,
Und warum? Magst Du body nicht? Oder ist er Dir gar heilig?
warum ich ihm nicht mehr kinder gönne? Ganz einfach: weil ich den kompletten Inhalt der seite von der "Bounding Box" des Browserfensters abhängig machen will. Pack ich also alles in das Kind und kann das formatieren wie ich will -- absolut positionierte elemente werden sich dann dort festhalten und nicht am Browserfenster. Es würde keinen Sinn machen, Inhalte außerhalb dieses Kindes, sprich als weitere kinder von <body>, anzuordnen.
Viele Grüße,
Sven
-
Tach,
Und warum? Magst Du body nicht? Oder ist er Dir gar heilig?
warum ich ihm nicht mehr kinder gönne? Ganz einfach: weil ich den kompletten Inhalt der seite von der "Bounding Box" des Browserfensters abhängig machen will.
wozu also das unnötige Kind? Nutze doch einfach body dafür.
mfg
Woodfighter
-
-
-
-
-
-