nicht angemeldet
Fußleiste am Browserboden
Hallo CSSianer,
finde keine Lösung für die Integration einer Fußleiste in die Webseite, wobei sich diese unabhängig vom Umfang des Seiteninhalts vertikal immer automatisch bis zum Browserrand ausdehnen soll.
Mein Problem dabei ist, dass ich verschiedene Teillösungen verwenden kann, die aber in Kombination nicht das gewünschte Gesamtergebnis liefern. Als Teillösungen bzw. Anforderungen habe ich vorliegen:
- Streckung der vertikalen Höhe auf 100% erziele ich durch folgenden CSS:
html { height: 100%; }
body { height; 100%; }
#container { min-height: 100%; }
bzw. für den IE * html #container { height: 100%; }
- Bestimmter Background soll sich in der Höhe über die gesamte Webseite erstrecken:
#container { background: url(navibackground_bild1.gif) repeat-y top left; }
Diese Aufgabe lässt sich einfach dadurch lösen, dass das Background-Picture in den sich vertikal streckenden container mit eingebunden wird. Da allerdings nicht zwei backgrounds eingebunden werden können, liegt hier allerdings eine entscheidende „Schwäche“ von CSS. Denn wäre dies möglich, so könnte per nachfolgenden Befehl die Bodenleiste gleichzeitig an den Fuss des containers gestellt werden.
#container { background: url(bodenleistebackground_bild2.gif) no-repeat bottom left; }
Leider ist dies nicht möglich, so dass man nach anderen Wegen suchen muss. Also Punkt 3.
- Integration der Bodenleiste mittels verschachtelter DIV innerhalb des containers
#bodenleiste {
position: absolute;
bottom: 0;
background: url(bodenleistebackground_bild2.gif) no-repeat bottom left;
height: 60px; }
Diese DIV richtet die Bodenleiste wie gewünscht am Fuss der Webseite aus. Allerdings nur solange wie der Seiteninhalt kleiner ist, als die Größe des Browserfensters. Ist der Inhalt größer, so dass die Scrollleiste erscheint, kommt es zu Problemen. Die Fußleiste steht dann nämlich auch am Fuß des Browserfensters, und nicht wie erhofft am Ende des Seiteninhaltsbereichs. Sie wird also nicht durch den Füllinhalt nach unten mit verschoben. Dieses Problem lässt sich nur scheinbar lösen mittels Punkt 4.
- CSS der #bodenleiste von absolute auf relative umstellen
#bodenleiste {
position: relative;
bottom: 0;
...
Bei dieser CSS-Programmierung steht nun bei Seiteninhalten mit Scrollbalken die Fußleiste da, wo sie stehen soll. Revers kommt es nun aber zu Problemen bei Seiten deren Inhalt kleiner ist als das Browserfenster, denn die Bodenleiste bleibt in Höhe des Dehnbereichs des Seiteninhalts stehen, während der container den Hintergrund mit seinem bg_Picture bis zum Boden des Browserfensters füllt. Ein ebenso unerwünschte Effekt.
Fazit: Es gibt also keine Kombinationsmöglichkeit dieser Teile. Weiß da vielleicht jemand im Forum mehr oder gibt es einen anderen, besseren Ansatz. Vielen Dank im voraus!!!
Gruß
Thomas
-
Hallo Thomas,
finde keine Lösung für die Integration einer Fußleiste in die Webseite, wobei sich diese unabhängig vom Umfang des Seiteninhalts vertikal immer automatisch bis zum Browserrand ausdehnen soll.
Dennis hat sich dazu kürzlich schon Gedanken gemacht, außerdem hat mir der Artikel in alistapart.com ganz gut auf die Sprünge geholfen.
Gruß aus Köln-Ehrenfeld,
Elya