Layout mit zentriertem Content und 100% Höhe
0 
Felix Riesterer
0
Layout mit zentriertem Content und 100% Höhe
Hallo,
seit einigen Tagen plage ich mich mit der Umsetzung folgender Idee herum:
http://www.final-power.de/fixed-weight-centered-layout.jpg
Wie auf dem Bild beschrieben soll das Layout aus 3 Spalten bestehen, wobei die Mittlere eine fixe Breite hat und die beiden Äußeren dann automatisch bis zum Rand gehen. Das Layout soll auch real wirklich 3 Div-Spalten haben, da ich komplett frei auf die beiden Äußeren zugreifen will um sie mit Inhalten/BGs zu füllen.
Außerdem soll das gesamte Layout 100% Höhe haben.
Die Höhe war allerdings nicht mein Problem, sondern die beiden äußeren Spalten.
Hat jemand eine gute Idee mit sauberem XHTML+CSS? Ich würde mich wirklich sehr freuen! :)
Mit freundlichen Grüßen,
Patrick
-
Lieber Paddel,
du willst also ein alleinseligmachendes 3-Spalten-Layout mit (X)HTML und CSS erstellen. Was haben Deine bisherigen Nachforschungen ergeben? Wo hast Du nach was gesucht?
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Hallo Felix,
ich habe mir schon mehrere Nächte mit Google um die Ohren geschlagen, wobei man endlose Beispiele für Layouts mit fixen Breiten für die beiden äußeren Spalten findet. Was man auch oft findet ist ein Layout wo man nur die innere Spalte hat, welche dann zentriert ist.. ich brauch allerdings auch eben die volle Breite der beiden äußeren Spalten.Letztendlich kam ich sogar zu einer Lösung welche ich derzeit verwende.. diese ist alledings alles andere als kompatibel für ältere Browser (schon ab IE6--) - ist also keinesfalls eine gute Lösung.
Zuerst habe ich mir einen 900px Div-Container genommen und diesen zentriert. Wenn ich nun zwei Divs drum herum anlege habe ich das Problem, dass diese sich nicht auf die volle Breite erweitern, bleiben also 0px breit. Wenn ich die beiden äußeren auf 100% Breite stelle dann belegt der Linke (welcher zuerst im Code steht) natürlich erstmal eine komplette Seite, die anderen finden sich dann rechts davon mit einer Scrollbar.
Habe den kniff noch nicht ganz gefunden, wie die beiden äußeren dynamisch auf volle Breite kommen :(
Gruß,
Patrick-
Habe den kniff noch nicht ganz gefunden, wie die beiden äußeren dynamisch auf volle Breite kommen :(
Nimm ein vereinfachtes Layout.
Wenn JS verfügbar ist, tausche es gegen ein berechnetes Layout aus.mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Nimm ein vereinfachtes Layout.
Das war mir jetzt doch etwas zu allgemein. Entschuldigung, aber kannst du das konkretisieren?
Gruß,
Patrick-
Nimm ein vereinfachtes Layout.
Das war mir jetzt doch etwas zu allgemein. Entschuldigung, aber kannst du das konkretisieren?Im Head dieser Message ist ein Link, deren Seite nach diesem Prinzip, wenn auch nicht dreispaltig, aufgeführt ist.
Es spielt keine Rolle, wieviele Spalten du brauchst. Flexibilität gibts ers mit JS.
Das JS schaltet abhängig von der Viewportgrösse zwischen verschiedenen Klassennamen um.mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Hallo Beat,
ich habe mal etwas mit dem von dir angesprochenen Script rumgespielt und das ganze in einem kleinen Beispiel meines Problems online gebracht:
http://www.final-power.de/divtest/index.htmlPrinzipiell scheint das ja alles zu funktionieren, allerdings kommt mir das JS bei schnellem skalieren der Fenstergröße etwas langsam vor, d.h. es hinkt ein wenig hinter her (das ist genau das was ich schon vorher befürchtet habe).
Dürfte sich dieses Problem dann nicht mit steigender Page-Größe nur verstärken?Gruß,
Patrick-
ich habe mal etwas mit dem von dir angesprochenen Script rumgespielt und das ganze in einem kleinen Beispiel meines Problems online gebracht:
http://www.final-power.de/divtest/index.htmlPrinzipiell scheint das ja alles zu funktionieren, allerdings kommt mir das JS bei schnellem skalieren der Fenstergröße etwas langsam vor, d.h. es hinkt ein wenig hinter her (das ist genau das was ich schon vorher befürchtet habe).
Dürfte sich dieses Problem dann nicht mit steigender Page-Größe nur verstärken?Da Zoom eine Aktion ist, die ein Leser auf Bedarf, aber nicht permanent als Spielerei ausübt, kann man mit der Verzögerung leben.
Die Verzögerung: FF feuert onresize erst, wenn der Zoom selbst abgeschlossen ist.Ich bin mir nicht sicher, ob dein Dreispalten-Layout so überhaupt Sinn macht. Wenn die Randspalten zu eng werden, dann solten sie eigentlich besser in einen Block umgeschaltet werden. Schliesslich gibt es immer Element die dann überfliessen, oder abgeschnitten werden.
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische
-
-
-
-
-
-
-
Hallo Patrick,
Die Höhe war allerdings nicht mein Problem, sondern die beiden äußeren Spalten.
Vielleicht ist das interessant für Dich: Drei Spalten Layout.
Grüsse
Cyx23