Seitengestaltung mit Layern

[clauer]

Hallo,

ich habe eine Seite mit Layern (div-Tag) definiert bestehend aus einem Kopfbereich und nachfolgend drei Spalten.

Nun möchte ich noch einen Fußbereich einbauen, kriege das aber nicht hin; die Spalteninhalte sind dynamisch, so dass ich keine absolute Positionierung des Fußbereichs definieren kann.

Vielen Dank für jede Hilfe!

[webcreate]

Ich helfe gerne, wenn Du mir sagst wie...
Zeig doch mal was, oder stell mal eine URL hier rein, dann kann man sehen was Du da machst.
So wirst Du wahrscheinlich nicht zum Zeil kommen (wie auch)

[Terry]

Wenn Du die drei Spalten mit float: positioniert hast, dann musst Du nur clear:both; (oder left bzw. right - was Du halt vorher benutzt hast) anwenden, dann legt sich der nächste Layer brav unter die anderen.

[clauer]

Hi Terry,

vielen Dank für den Tipp. Leider komme ich nicht zum gewünschten Ergebnis. Hier sind die Definitionen für die Layer:
<style type="text/css">
#kopf {
position:absolute;
left:1%;
width:98%;
top:0px;
z-index:5;
}

#linke_spalte {
position:absolute;
left:1%;
width:28%;
top:88px;
float:left;
z-index:2;
}

#mittlere_spalte {
position:absolute;
left:30%;
width:40%;
top:88px;
float:left;
z-index:3;
}

#rechte_spalte {
position:absolute;
left:71%;
width:28%;
top:88px;
float:right;
z-index:4;
}

#fuss {
position:absolute;
clear:both;
left:1%;
width:98%;
z-index:5;
}
</style>

Ich nehme an, ich habe da einen Fehler drin!?

Vielen Dank für die Hilfe!

[Terry]

Hmm...

Mir fallen da mehrere komische Dinge auf...

Warum die ganzen z-indexe? Du willst die Ebenen nicht "übereinander stapeln" - also warum?

position: absolute; und float gleichzeitig geht nicht. Entweder - oder! Wenn absolute Positionierung, dann mit genauen Pixelangaben, oder eben die Ebenen einfach floaten lassen.
Wenn Du sie nebeneinander haben willst, dann gib ihnen doch einfach ein float:left mit (jedem der drei Layer) und dann für den Footer eben ein clear:left; - fertig. (das Problem ist dabei nur, dass die gefloateten schnell mal "Platzangst" bekommen und dann einer nach unten hüpft - eventuelles Padding muss immer noch dazu gerechnet werden.

Ohne Höhenangabe wirds schwierig, den footer vernünftig darunter zu platzieren. Wird vermutlich immer irgendwie zerissen aussehen (weiß ja nicht, was das genau werden soll...)

Hier mal ne Beispielseite, die ich eben auf die Schnelle gemacht hab - vielleicht gefällts Dir ja und Du kannst was damit anfangen (die Farben sind nur zur Demo), dort habe ich für die drei Spalten eine feste Höhe eingegeben, auch schon ein padding für den Text eingerechnet - funktioniert jetzt bei jeder Auflösung: http://home.arcor.de/terrikay/test/layertest.html
Schau einfach in den Quelltext. Getestet grad mit Firefox und IE.

Wenn der Inhalt mehr wird, könnte man durch overflow:auto erreichen, dass die layer dann einen Scrollbalken bekommen und so auch mehr Text untergebracht werden kann.

[clauer]

Hi Kerry,

vielen Dank für die Unterstützung. Leider habe ich keine brauchbare Referenz zu CSS, deswegen stochere ich im Nebel 'rum und wurstle mich durch.

Die von Dir vorgeschlagene Vorgehensweise hat geklappt, leider kommt es aber zu den Umbrüchen, die Du erwähnt hast, bei variablen Spalten also nicht unbedingt einsetzbar.

Das Ergebnis steht unter http://www.netzw.net/p_wsk/ als Lösung mit Tabelle und unter http://www.netzw.net/p_wsk/home,htm als Lösung mit Layern.

Noch mals herzlichen Dank!
Christian

[Terry]

Hallo Christian,

warum Dein letzter Layer runter hüpft, ist klar:
Du hast 30%, 40% und 30% für den Inhalt angegeben, dazu noch jeweils4% fürs Padding (2% padding-left + 2% padding-right=4%) - zusammen gibt das 112% Breite. Da muss der dritte Layer nach unten ausweichen!
Wenn Du meine krummen Werte aus meiner Beispielseite zusammenrechnest, kommst Du auf 99% und das funktioniert.
Hier gibts mehr dazu: http://www.stichpunkt.de/css/css-tipps.html#bmb
Hättest Du ein Prozent weniger angegeben, hätte es im IE geklappt, weil der das im Quirks-Mode nämlich falsch berechnet - und da Du keinen Doctype angegeben hast, ist der im Quirks-Mode.
(P.S. das kann ich deshalb jetzt so schlau dozieren, weil mir das vor ca. einer Woche ein lieber Mensch mal genauso klar aufgedröselt hat... )

Ansonsten geht´s mir genauso wie Dir, aber da CSS Spaß macht und man damit wirklich zaubern kann, versteh ich so langsam mehr....
Hier noch ein paar Linktipps:
Ein Tutorial zur Positionierung: http://www.webwriting-magazin.de/andere/index.htm
Eine gute CSS- Einführung, sowie Tipps und Tricks: http://css.fractatulum.net/
Auf der Seite gibt es auch einen Online-Editor, mit dem man "Container-Positionieren" üben kann - am besten mit mehreren Browsern parallel spielen.... : http://css.fractatulum.net/csseditor/index.php
Und natürlich auch die übrigen CSS-Seiten von Tom: http://www.stichpunkt.de/css/index.html Dort gibt es noch eine zweite Variante eines dreispaltigen Layouts unter "Spielereien" - auch da kann man noch einen footer druntersetzen.

Viel Spaß beim Lesen und Probieren (ich finde, es ist ein Puzzlespiel - immer mehrere Browser gleichzeitig anmachen, Testseite aufrufen, einzeln und vorsichtig an den Parametern was ändern und das Verhalten der Browser beobachten - wenn man es nicht verbissen sieht oder sofort zu einer Lösung kommen muss, dann macht das wirklich Spaß!)

Und hier noch eine wunderschöne Seite, die zeigt, was man mit CSS alles zaubern kann: http://www.csszengarden.com

[clauer]

Hi Terry,

nochmals vielen Dank für Deine Hilfe, die mich wirklich voran gebracht hat und für die vielen weiterführenden Tipps.

In der Tat, wenn man die Zeit hat, macht's Spaß ... aber da das rumprobieren ein wirklich zeitintensives Geschäft ist (ein Tag ist ja schnell mal vorbei), fehlt sie halt oft genug.