✔ CSS Layout; vertikal ausrichten

[fjordblauer]

Hallo,

möchte einen Footer unter meinen Menü und Inhalt- Layer anzeigen lassen. Nur weiß ich leider nur wie ich diesen absolut zum unteren Bildschirmrand positioniere. Bei einem großen, langem Inhalt überschneiden sich dann diese beide "Kästchen". Brauche einen kleinen schubs von euch wo ich suchen kann, bzw. wie es geht.

Dirk

 

[Gumbo]

Lies dir mal folgenden, auf A List Apart erschienenen Artikel durch:

• Exploring Footers

 

[fjordblauer]

Naja. Danke.

Hier mein Beispiel http://www.auf-eigenen-wunsch-entfernt.

Der Footer soll halt am liebesten immer unten sein, wenn man aber das Fenster so verkleinert ist der Inhalte- Layer im Weg. Versteht ihr?

Dirk

 

[fjordblauer]

Nun, hab doch etwas hinbekommen.

Guckt unter dem o.g. Link.

Nun möchte ich aber das der Inhalt bis zum Footer runterkommt, wie stell ich das an. Mit "height: 100%" gehts nicht...

Aber ein 2. Problem: Wenn ich ein padding auf den Inhalt Layer lege, rückt z.B. der Netscape 7 alles um die breite nach rechts, Firefox und Opera auch, nur IE nicht. Wieso denn?

 

[CSS Depp]

auf die gefahr hin dass ich mich irre.

du willst etwas machen, was relativ zur browserfenstergrösse ist, das wird
mit CSS nicht gehen, und wenn, dann ist es sicher eine IE Windows only
lösung.
javascript´s "available height" wird dich da weiter bringen, so wie in diesem
artikel da ... obwohl das recht kompliziert aussieht was die da machen.


>Wenn ich ein padding auf den Inhalt Layer lege, rückt z.B. der Netscape 7
>alles um die breite nach rechts, Firefox und Opera auch, nur IE nicht. Wieso denn?

weil tabellen generell kein "richtiges" html sind. das ist ein IE propetiäres format.
einige browser können daher styles für tables nicht so darstellen wie der IE.
sobald deine tabelle in einem übergeordneten div liegt, was styles hat, wirds
sehr undurchsichtig. eigentlich müssten tabellen tags <wutanfall> heissen.

 

[fjordblauer]

Das habe ich aber schon irgendwo gesehen.

Ein Layer mit Banner oben. Ein Layer z.B. mit dem Inhalt darunter und dann unten der Footer im eigenen Layer.

Wenn der Banner eine Höhe von 100px hat, und im Inhalt nur 2 Zeilen Text stehen, dann sollte der Inhalte Layer trotzdem bündig mit dem Footer Layer abschliessen, der widerrum ganz unten ist.

Ist der Inhalte Layer jetzt sehr voll geshrieben, über die Bildschirmhöhe, soll der Footer wieder an sein Ende rutschen.

@CSS Depp:

Wieso Tabellen? Ich nutze gar keine Tabellen Tags, oder fällt Padding damit rein? Es funktioniert doch auch bei Layern..?

 

[Quaese]

Hi,

ich habe mir selbst mal eine kleine Anleitung zu einem Layout mit 100% Höhe geschrieben.
Die schicke ich Dir einfach mal mit ... musst Dich halt durcharbeiten.

Als Grundlage diente mir die Vorgabe von Stu Nicolls

Ciao
Quaese

 

[fjordblauer]

So, vielen Dank erstmal für den Download!

Habe mir das mal genauer angeguckt:

Im Firefox, NN und Opera sieht es so aus wie ich es vom Design her haben möchte.

Nur der IE macht mir zwei Problem:

1. Bringt er eine horizontale Scrollleiste wenn auch die vertikale kommt und ohne die Leiste könnte man den Text wohl nicht ganz lesen können.

2. Habe ich einen Rahmen (border) definiert. Dieser ist aber schwarz, stattdessen möchte ich meine Linien vom Hintergrund haben. Wie gehe ich denn nun vor?

fjordblauer

 

[fjordblauer]

nerv, schieb

Ist schon wichtig für mich. Ihr wisst das doch bestimmt!

 

[hela]

Hallo fjordblauer,

zu 1.)
Der Internet-Explorer braucht eine expressive Breitenangabe für den rightDiv-Container. So wie du im leftDiv-Selektor "width:100px;" stehen hast, müsstest du auch im rightDiv-Selektor "width:490px" reinschreiben (wenn ich richtig gerechnet habe). Der Container hätte dann die richtige Breite und der horizontale Scrollbalken verschwindet.

zu 2.)
Der Internet-Explorer kann keine transparenten Rahmen darstellen. Damit der leftDiv- und der rightDiv-Container auf eine Höhe von 100% kommen, hast du in den Star-Html-Selektoren diesen Blöcken oben einen 160px und und unten einen 30px größen Rand gegeben. Da keine Farbangaben gemacht werden, stellt der IE diese Ränder schwarz dar.
Du hast also nur zwei Möglichkeiten: Entweder du deckst diese Ränder mit dem Header und dem Footer vollständig ab oder du gibst diesen Rändern die Hintergrundfarbe, so dass sie nicht auffallen. In diesem Fall kannst du natürlich kein zusammenhängendes Hintergrundbild im BODY darstellen.