✔ Tabellenloses Design mit DIV-Container

[P_F]

Hi, ich habe nun mal mein design auf diese div-container umgestellt. Nun es sieht auch gut aus, aber schaut mal hier, 2 sachen passen net.

1) Das menü soll die höhe 100 % haben, hab ich auch angegeben, aber macht er net.

2) Wenn man das browserfenster mal verkleinert, also die breite, dann rutscht der content-container irgendwann runter.

http://atnrw.taucher-media.de/?TPL=Gesetze&SUBTPL=Wichtige-Adressen

 

[hela]

Hallo P_F,

zu 1.)
Dein Menü hat ganz genau die Höhe von 100% des Elternelements (BODY). Falls du mal deine Seite so weit scrollst, dass der Header gerade verschwindet, dann siehst du, dass das Menü genau mit der unteren Kante des Fensters abschließt. Im Vollbildmodus des Browsers funktioniert das auch.

zu 2.)
Dein Menü hat eine Breite von 180px + 10px für die padding-Werte + 1px rechter Rand. Dem Content-Bereich hast du eine Breite von 70% des Elternelements (BODY) zugewiesen. Nach meiner Rechnung passt der Content-Bereich einfach nicht mehr neben das Menü, wenn das Fenster kleiner als 637px gemacht wird.

Also eigentlich funktioniert auf deiner Seite alles. Ich nehme an, dass du andere Erwartungen hattest. Aber relative Größenwerten müssen einen Bezugswert haben - und dass ist das übergeordnete Element.

edit:
637px stimmt nur ungefähr, da beim Content auch noch padding-Werte dazugerechnet werden müssen.

 

[Quaese]

Hi,

wenn du die Breitenangabe (width: 70%) und den die float-Eigenschaft (float: left) aus der CSS-Klasse
content löschst, sollte der Inhaltsbereich beim Verkleinern des Fensters nicht mehr verrutschen.

Die Höhe des Menüs passt sich immer dem Inhalt an. Um dennoch eine Höhe von 100% vorzutäuschen,
könntest du Menü und Inhalt in einen weiteren DIV-Container packen. Diesem weisst du als Hintergrundbild
die Menüfarben zu und lässt es lediglich in y-Richtung wiederholen. Ich habe dir meinen Lösungsvorschlag
in den Anhang gepackt.

Ciao
Quaese

 

[P_F]

danke, das ist super, vielen dank

 

[Gumbo]

Noch ein paar schöne Artikel bzw. Webseiten zum Thema:

• Warum Layout mit Tabellen dumm ist: Probleme definiert, Lösungen angeboten
• Stopdesign | Throwing Tables Out the Window

Weitere interessante Verweise findest du im Thema „einfache Beispielseite mit CSS“.