Navigation mit Scrollbalken

[Willy]

Hallo,

ich würde gern mit div's (evtl. mit Tabellen aber ohne Frames) ein Layout realisieren, dass folgende Eigenschaften hat:
1. Oben soll ein "fixed" Bereich sein, der 96px hoch und 100% breit ist (Logo und 1 bis 2 Bilder).
2. Links darunter soll eine "fixed" Navigation sein, die bis ganz unten reicht, 180px breit ist und bei Bedarf Scrollbalken einblendet.
3. Rechts neben der Navigation und unter dem ersten Bereich soll sich der Inhalt befinden, der den gesamten jetzt noch zur Verfügung stehenden Platz einnehmen soll und in der Regel Scrollbalken benötigen wird.

Bei meinen bisherigen Versuchen und auch bei den Beispielen hier im Forum scheitert es immer an der Kombination von fester Höhe (bei mir 96px, s.o.) im fixen Bereich und variabler Höhe darunter.

Schonmal vielen Dank!

Willy

[Detlef G.]

Hallo Willy

Bei meinen bisherigen Versuchen und auch bei den Beispielen hier im Forum scheitert es immer an der Kombination von fester Höhe (bei mir 96px, s.o.) im fixen Bereich und variabler Höhe darunter.

Vielleicht kann dir dieses Beispiel Anregungen geben.

Auf Wiederlesen
Detlef

[Willy]

Hallo Detlef,

das Beispiel ist perfekt! Vielen Dank :-)

Ich verstehe zwar auf die Schnelle noch nicht warum es ohne "fixed" funktioniert, aber irgendwann wird der Groschen (das 5-Cent-Stück ;-) hoffentlich fallen.

Ein kleiner Wermutstropfen bleibt trotzdem: Da die div's ineinandergeschachtelt sind, ist die Übersichtlichkeit auch nicht besser als bei den oft verschmähten Tabellen. Damit kann ich aber gut leben und das Ergebnis ist - wie gesagt - perfekt!

Willy

[johannes]

Hallo Detlef,

das Beispiel ist perfekt! Vielen Dank :-)

Ich verstehe zwar auf die Schnelle noch nicht warum es ohne "fixed" funktioniert, aber irgendwann wird der Groschen (das 5-Cent-Stück ;-) hoffentlich fallen.

ganz einfach:
Mit position:absolute; , top:$wert; left:$wert; right:$wert und bottom:$wert;
Siehe auch http://de.selfhtml.org/navigation/css.htm#positionierung

(Warum das allerdings auch im ie funktionert, weiß ich auch nicht,
da dieser IMHO zwar zb. top: und left: akzeptiert, aber nicht top: und bottom: "gleichzeitig", ist das verständlich?)

relevanter code:
}
#aussen {
 position:absolute;
 top:5px;
 right:5px;
 bottom:5px;
 left:5px;
}
#kopf {
 height:100px;
}
#container {
 position:absolute;
 top:120px;
 right:0;
 bottom:100px;
 left:0;
}
#inhalt {
 position:absolute;
 top:0;
 right:0;
 bottom:0;
 left:200px;
}
#navi {
 position:absolute;
 top:0;
 width:200px;
 bottom:0;
 left:0;
}

[Detlef G.]

Hallo johannes

(Warum das allerdings auch im ie funktionert, weiß ich auch nicht,
da dieser IMHO zwar zb. top: und left: akzeptiert, aber nicht top: und bottom: "gleichzeitig", ist das verständlich?)

Weil für diesen extra auch noch height:100%; definiert ist.
Außerdem wird er mittels <?xml version="1.0"?> in den Quirksmodus geschickt, und damit das kaputte Boxmodel ausgenutzt, damit nicht 100% + margin + border mehr als die Vievporthöhe ergeben.
Ist schon ein Weilchen her, dass ich das Beispiel gebastelt habe und müsste für IE7 noch getestet und etwas angepasst werden.

Auf Wiederlesen
Detlef