Layouting mit CSS!? (für komplizierte Layouts?)
 

Ich bin dabei gerade eine Website zu erstellen die ein recht kompliziertes Layout verwendet.

Jetzt würde ich es natürlich gerne gleich "richtig" machen und die einzelnen Bilder etc. in DIVs packen und so das gesammte Layout per CSS steuern.

Jedoch ist dies nicht so einfach, da das Layout eben ziemlich verschachtelt ist.

Es wäre kein Problem, wenn alles absolut positionbar wäre, was jedoch nicht sinnvoll ist, da die Site sowohl in der Höhe als auch in der Breite in der Mitte erscheinend soll.
Der einzige Ausweg, der mir derzeit einfällt wäre nur alles wieder in ein eine Tabelle zu packen und diese dann genau in die Mitte zu positionieren - was allerdings nicht sehr elegant ist.

Im Anhang findet ihr noch das Layout der einzelnen Divs.

Dank euch schon einmal herzlich, lg renew

Es ist mit CSS möglich, aber mühsam. Vermutlich ginge es über ein div, das vier unter divs hat (für 1-6, 7, 8 und ab 9), die sich wieder unterteilen. In den unterteilten divs müsstest du dich mit "float" spielen.
Ich würd' eine Tabelle nehmen.

jak

Es ist mit einfachen mitteln möglich, eine seite nur mit css zu zentrieren.

#Main {
background-color: transparent;
padding: 0px;
border: 1px solid #000000;
margin: -301px 0 0 -497px;
position:absolute;
top: 50%;
left: 50%;
width: 992px;
height: 600px;
overflow: hidden;
}

und im body n <div id="Main">

ja, schon klar, dass man mit CSS eine Seite zentrieren kann. Es reicht ja schon ein margin-left:auto; margin-right:auto

Jedoch muss ich in dieses "über-div" dann alles relativ positionieren, bzw. eben mit float und clear die einzelnen Elemente verschachteln.
Und genau das ist mein Problem.

@jak
danke, werde mich einmal mit dem Vorschlag der Aufteilung ein wenig spielen - vielleicht bring ich ja etwas zusammen. :) Wobei sich noch eine kleine Änderung des Layouts ergeben hat (mein Fehler, da meine Menüleiste unterteilt wäre.... :rolleyes: )

Wenn du eine fixe Breite voraussetzt kannst in dem über-div auch alles absolut positionieren.

Du versuchst ein klassiches Tabellenlayout (viele Slices; sind eigentlich out) in ein CSS-Layout zu zwängen. Wenn du das wirklich machen willst, dann fange so an, wie jak es vorgeschlagen hat.

gruss,
snowman

jop, das habe ich vorhin gemacht. Nur irgendwie ist das zum "Auszucken". :heul:
Habe mir nur einmal den obersten Teil genommen und probiert, diesen korrekt anzuordnen.
Jedoch schon beim 2 "logischen" DIV ordnet werden 2 Elemente, die nebeneinander gehören, untereinander angeordnet, sobald ich die korrekte Größe angebe.
Lasse ich "100%" funktioniert es, jedoch ist der Block natürlich zu breit.

@sesa_mina
ganz versteh ich das jetzt nicht was du meinst. :confused:
Wenn ich eine fixe Breite für das über-div fest setze (welches ich in jedem Fall brauche, da ich mit diesem die komplette Seite auf dem Bildschirm zentriere), kann ich innerhalb von diesem alles absolut positionieren? (war das deine Aussage?)
Denn genau so funktionierts ja nicht - denn sobald ich absolut positioniere, positioniere ich die einzelnen Blöcke absolut in der Seite - und nicht vom vorherigen DIV, in welches es eingebettet ist.

PS: ich werd mich noch ein wenig spielen, jedoch fürchte ich, dass ich um die gute alte Tabelle nicht herum komme. :heul:

kuxt du hier wie es geht:

http://www.dream.at/temp/testy
http://www.dream.at/temp/testy/theme...ult/styles.css

Die meisten Browser haben noch deutliche Schwierigkeiten mit komplexen CSS-Formatierungen (va. mit position- overflow- visibility-Attributen u. ä.). Also auf jeden Fall mit unterschiedl. Browsern testen, beim Vergleich IE vs. Firefox hatte ich oft zwei komplett unterschiedl. Layouts!

Herzlichen Dank!

Das scheint ja wirklich absolut positioniert zu funktionieren - genial. :D

Nochmals danke, lg renew

PS: ist das deine Seite?

Das is vorerst nur ein experiment.
dafür tut es aber in firefox und ie.
nur opera mag den javascript code nicht so ganz...

ja, das ist mir bei meinen ersten Spielereien auch schon aufgefallen....

nochmals @Sesa_Mina
um das ganze richtig zu verstehen:
nur durch das verwenden von top:50% und left:50% kann ich die restlichen Elemente absolut positionieren.
Und mit der margin Angabe schiebst du das ganze dann eigentlich in die Mitte (abhängig von der Größe der eigentlichen Seite - weil das habe ich schon auf meine Größe geändert)

bezüglich JS:
das ist bei meiner Seite tabu - braucht man sowieso nicht. *g* (weil das ganze soll brav als XHTML 1.0 strict validieren, mit der Ausnahme, dass ich wohl hie und da target="_blank" verwenden werde ;))

solange die anderen elemente sich im container (der ja zentriert wird) befinden beziehen sich deren koordinaten auf die obere linke ecke des containers. von daher funktioniert das mit der absoluten positionierung :)

...vorausgesetzt auch der Container hat position:absolute;

Der Witz an position:absolute; ist nämlich, daß alles absolut zum nächsten Eltern-Element ausgerichtet wird, daß auch position:absolute hat.

Wo man "position: absolute;" vermeiden kann sollte man es tun. Man handelt sich meist einen Haufen Probleme ein, wenn man es verwendet. "position: absolute;" sorgt dafür, daß das entsprechende Element aus dem Seiteninhalt "rausgerissen" wird, d.h. es kann passieren, daß sich andere divs drunter oder drüber schieben, daß übergeordnete divs auf einmal zu klein sind, usw.

jak