div "frames" ohne umklappen, mit zentrierung

1 ale (Gast)

Hallo Jörg, Hallo Experten :))

Ich habe ein sicherlich triviales Problem und stehe dabei ziemlich unter Zeitdruck.

Ich versuche seit 3 Tagen ein simples 4 Teile Standardlayout in HTML / CSS zu realisieren. Ein Kopf (100% breit, fix), ein Menu (links, 200px breit), ein content div ( Restbreite .. variabel, zentriert),
einen footer (100 breit, ganz unten).

Z. zt. arbeite ich mit "float:left". Doch wenn ich den browser "resize", dann springt der content immer nach unten .. unter das menu. ich habe zahlreiche sites getestet, bei denen das auch passiert. Diese Seite ist jedoch ein Beispiel, dass es funktioniert und gibt mir wieder Hoffnung.

Sie hat ein fixes Menu und ein zentriertes und situativ breites content div.

Meine Fragen:
Wie funktioniert das ? Ist margin der Schlüssel ?
Würde es auch mit einem 100% breiten Head und einem 100% breiten footer funktionieren ?

Vielen Dank für Eure Antwort.
Ale

2 Jörg Kruse

Hallo Ale,

ja, die Navigation auf dieser Seite ist über den freien linken margin des Hauptteils positioniert (fix für die moderne Browser, absolut für den IE), die Breite der Navigation muss also nur diesem margin entsprechen. Zentriert ist das innere Content-div durch das padding des äußeren divs. Ich habe es noch nicht ausprobiert, aber vom Prinzip sollte diese Vorgehensweise auch für einen Header- und Footerbereich funktionieren. Die beiden sollen wie die Navigation auch fixiert sein, nehme ich an? Voraussetzung wäre, dass Footer und Header über feste Höhen-Werte verfügen, die man dann als margin-Werte für den Content-Bereich übernehmen kann.

Das mit dem Springen des Contents beim Resize würde mich aber auch noch interessieren, kannst du dafür eine Beispielseite angeben?

mfG Jörg

3 ale (Gast)

Hallo Jörg, ich werde mich direkt ans testen begeben.
Wäre ja Klasse, wenn es funktioniert.

Hmm, Beispiele ... ich habe auf anhieb nur diese gefunden:
http://www.andreas-kalt.de/webdesign/tutorials/css-layout-erstellen?pg=6

Da springt das rechte Info-Feld. Stell dir vor er hätte ein Menu statt Content rechts, dann würde der Content springen. und zwar viel schneller, also früher, als es bei dem info Feld der Fall ist.

Melde mich :)
Bis gleich

4 Jörg Kruse

Dieses Phänomen des Springens scheint nur beim Internet Explorer aufzutreten, so als ob ihm beim Resize die Gesamtbreite zu eng für die Aufnahme aller Container wird, und er den letzten deswegen nach unten verschiebt. Ich erinner mich vage daran, ein ähnliches Problem dadurch gelöst zu haben, dass ich die Breite des betreffenden divs etwas verkleinert habe - danach passte dieses div auch nach dem Resize

mfG Jörg

5 ale (Gast)

ich habe wirklich schon einiges probiert gehabt ... ich denke es liegt am floaten.

Deine Technik funktioniert auf anhieb. Bin sehr zufrieden !!!
Unfassbar wie einfach das aussieht.

Vielen Dank für deine Hilfe !!

nach oben

div "frames" ohne umklappen, mit zentrierung

Beitrag schreiben (als Gast)