Frage an die CSS Profis

[Masterp]

Moin,

Ich sitze gerade an ein einfaches CSS Layout, um mir das Thema beizubringen.

Aufgabe:

Ein simples Layout:

- Head, Fuss, Mitte (Ausgabe) und links (Navigation).

Das gewünschte Ergebnis (Bild) hab ich mal angeheftet.


Problem:

Ich schaff es nicht die zweite und dritte Box (Boxmodell) unter der ersten Box anzulegen, da für mich noch nicht ganz klar ist, ob die Box über die background Position ODER anders fixiert wird.


Ich möchte später jeweils ein Bild in die jeweiligen Boxen ( Box 1 - 3) einbinden.

Wie gesagt, bin da noch nicht ganz fit drin.



wer kann mir mal auf die Sprünge helfen und mir leicht verständliche Tipps geben ?


Beispieldateien liegen an. Einfach die Endung "Zip" entfernen.

[RattuS]

Irgendwie verwirrt mich dein Ansatz. Ich kläre solche Dinge grundsätzlich mit Floating und entsprechenden Größenangaben ohne Margin-Hacks oder absolute Positionierung.

Ich hab dir das Layout aus deinem Anhang mal fix nachgebaut. Ich denke, dass das relativ deutlich veranschaulicht, wie ich vorgehe:
DOWNLOAD (http://www.kwaschny.net/temp/layout.zip)

Bei CSS gilt immer: Je mehr du definierst, desto präziser und kompatibler ist dein Layout.

[Masterp]

Naja, ich hab solch Aktionen damals immer über Tabellen geregelt. Da ich mit CSS noch nicht viel gemacht habe, fehlen mir natürlich noch so einige Infos. Ich werd mir deine Infos mal auf der Zunge zergehen lassen. Kann ich Dich da eventuell nochmal bei Rückfragen ansprechen ?
Danke für dein Beispiel.

[RattuS]

Wo ich gerade deinen Thread-Titel lese: Also ein CSS-Profi bin ich nicht, da ich mit CSS/XHTML außerhalb meiner privaten Websites nicht viel zu tun habe. Aber grundsätzlich kannst du mich natürlich um Rat bzw. Erklärung fragen.

[Masterp]

Ich schau mir gerade dein Beispiel an, was schonmal ne gute Figur aus meiner Sicht macht. Die Grösse der einzelnen Boxen lassen sich jetzt nicht einzeln definieren oder ?

Wenn ich das richtig sehe, definierst Du die hierüber in der CSS:

.box {
background-color: #EBD3E0;
margin-bottom: 16px;
height: 64px;
}

.box p {
font-size: 24px;
padding: 4px;
text-align: center;
}

[RattuS]

Da gibt es diverse Möglichkeiten. Du kannst entweder die Größenangaben weglassen (dann passt sich die Größe abhängig vom Inhalt an), spezifisch direkt im HTML mit style überschreiben oder mehrere Boxen in der CSS definieren (so wie du es in deinem Beispiel gemacht hast). Was du in jedem Falle brücksichtigen musst, ist, wie sich die Anpassung im Zusammenhang mit dem Inhalt verhält. Ggf. brauchst du dann weitere Anpassung (z.B. für den Textumbruch u.ä.).

[DanMan]

Naja, ich hab solch Aktionen damals immer über Tabellen geregelt.
Das merkt man - du denkst noch zu sehr in Schachteln.

[Masterp]

Ja bestimmt. Aber ich mach langsam Fortschritte :D

[Matrix316]

Wenns garnet geht, nimmt man halt Tabellen. Mit DIVs geht zwar viel, aber net unbedingt alles. Manches ist auch arg kompliziert geregelt. Das Layout hier würde aber relativ einfach so gehen:

DIV oben width:100%; height:5%
DIV Mitte Links width:20% height:89%; DIV rechts float:left; width:79%; height 89%
DIV unten float:none; width:5%

und in dem DIV mitte links machste drei DIVs untereinander rein.

So, oder so ähnlich. ;) Probleme gibts wahrscheinlich die mittleren DIVS auf die höhe der Seite zu bringen. Beim IE kann man tricksen in dem man, glaube ich, BODY und HTML auf 100% Höhe setzt.