CSS Layout - wie am besten ansetzen?

[EviLsEyE]

Hello, hello,

ich bastle grad an 'ner kleinen Sache und stelle mir die Frage, wie man folgendes Layout mit CSS umsetzen würde..


Mit Tabellen könnte ich das problemlos in 5 Minuten bauen, aber ich will das gerne in CSS umsetzen - da hapert's jedoch an meinen Fähigkeiten ;>

Wie geht man an sowas heran? Intuitiv hätte ich jetzt ein Container-DIV mit fester Breite und Höhe gebaut und darin dann 3x DIVs mit float:right und clear:right.. das haut aber irgendwie vorne und hinten nicht hin, mal davon abgesehen, dass ich nicht weiß, wie ich dann noch das rote DIV da unterbringen müsste..

Wäre dankbar, wenn mir jemand 'nen Tipp bzw. irgend ein Stichwort geben könnte, wonach man suchen könnte..

[Nomschta]

kommt drauf an was der inhalt sein soll mal angenommen, die drei blöcke rechts sollen immer da bleiben und der block links soll scrollbar sein.

dann machst du 4 divs mit eindeutiger ID, wobei die drei linken alle fixe positionierungen bekommen.

sinngemaess wuerde das dann so lauten:

.oberer block
{
position: fixed
top: 0px
bottom: abstand zum mittleren block
right: 0px
width: gewuenschter breite, alternativ abstand nach links angeben:
left: ...
}

.mittlerer block
{
position: fixed
top: abstand zum oberen block
width: gewuenschter breite, alternativ abstand nach links angeben:
left: ...
}

.unterer block ist aehnlich.

fixed heisst, dass die abstaende immer fest sind, egal welches das div in der naechst groesseren hierarchiestufe ist.

.grosser block links
{
position: relative
left: 0px
top: 0px
bottom: 0px
right: auto
overflow: auto wenn zu viel inhalt da ist, scrollbalken anzeigen, ansonsten nicht.
}

relative ist hier noetig, da der scrollbalken sonst nicht funktionieren wuerde. das parent div ist quasi der browser bzw. 'body'

es gibt im internet einige interaktive css "designer". das hat mir sehr geholfen. habe nach "multi column layout" gesucht.

wichtig am anfang ist eigentlich nur: position, overflow, margin, padding

€: die seite ist zB ganz gut: http://www.pagecolumn.com

[EviLsEyE]

Danke für den ausführlichen Post! Werde das später mal versuchen..

Wie gewünscht, paar Details zu den geplanten Inhalten..
In den kleinen Blöcken rechts hätte ich gerne Bilder (horizontal und vertikal zentriert) und in dem großen roten Block stehen gemischte Inhalte (Text, Bilder, ggf. eingebettete Objekte, z.B. YouTube..)..

Mal sehen, ob ich das endlich mal so hinkriege, wie ich will

[Nomschta]

gerne

mit welcher IDE arbeitest du? empfehlenswert ist auf jeden fall visual studio web developer express. dort gibt es eine vorschau und man sieht recht schnell was sich ändert wenn man an schraube xy dreht.

[acid]

Kannst auch 1 Gesamtdiv machen und 2 für links und rechts. Die Inhalte/Divs im rechten Container brechen automatisch um, wenn Du eine feste Breite angibst.

Oder probierst das linke Div normal zu positionieren und die rechten drei floaten zu lassen.

[zeeno]

Schau dir mal Grids an. Gibt verschiedene und damit lässt sich wunderbar leicht arbeiten.

960 Grid System z.B.

[EviLsEyE]

Ich missbrauche meinen alten Thread einfach mal wieder, da die Frage sich jetzt nur etwas verlagert hat

Folgendes möchte ich erreichen:


Das große Div hat eine feste Breite und Höhe und darin möchte ich das rote Div so positionieren, dass es horizontal zentriert und vertikal an der unteren Kante ausgerichtet ist..

So von der Theorie müsste ich ja einfach nur das rote Div ins große Div reinpacken und "relativ" an der Unterkante ausrichten.. klappt nur leider nicht, bzw. ich weiß nicht wie das richtig geht..

Als Workaround habe ich jetzt erstmal absolute Werte genommen und es eben über die gesamte Seite zentriert und 400px von der Oberkante entfernt.. passt zwar in diesem Beispiel gerade so eben, aber einerseits könnte es mit anderen Browsers wieder anders aussehen (die unterscheiden ja gern mal Koordinaten um 2-3 Pixel und schon sieht alles anders aus) bzw. andererseits kann es das nächste mal sein, dass das nicht so einfach klappt..

Daher würde mich interessieren, wie ich sowas umsetzen kann.. dürfte doch gar nicht so schwer sein eigentlich?


edit: okay, hab jetzt herausgefunden, dass ich dem großen Div die Eigenschaft "position:relative" geben muss, dann kann ich dem roten Div "position:absolute" angeben, dann bezieht sich das auf das übergeordnete Div.. nur jetzt krieg ich's irgendwie nicht zentriert, es hängt unten links in der Ecke

[acid]

#großes div
{
text-align: center;
vertical-align: bottom;
}

[EviLsEyE]

Danke für den Versuch, sowas in der Art habe ich jedoch schon ausprobiert
Ich dachte vertical-align funktioniert nicht bei divs, weil es keine Blockelemente sind?
Mal davon abgesehen, ich will ja nicht den gesamten Inhalt des großen Divs unten ausrichten, sondern nur das zusätzliche rote Div..

[acid]

Dann würde ichs mit relativer Positionierung und negativen margin-Werten probieren.

[Johanson]

Oder mit %-Werten.
CSS: DIV zentrieren - ulf-theis.de

Musst Dir halt nur für die horizontale Zentrierung umbasteln.

[xxx]

Hier mal mein Vorschlag (die wichtigen Elemente hervorgehoben)

Code: Alles auswählen

<html>
<head>
<style type="text/css">
#outer {
    background: #EBE7B8;
    width: 500px;
    height: 500px;
    [i]position: relative;[/i] /* gewährleistet, dass die Position in #inner relativ zum äußeren Div sind */
}

#inner {
    [i]position: absolute;
    width: 100%;
    bottom: 0;[/i] /* Bringt Div nach unten */
}

#innest {
    background: #FF0013;
    width: 300px;
    height: 50px;
    [i]margin: 0 auto;[/i] /* zentriert das rote Div */
}
</style>
</head>
<body>

<div id="outer">
 <div id="inner">
   <div id="innest">
   </div>
 </div>
</div>

[h4zz4rd]

edit: okay, hab jetzt herausgefunden, dass ich dem großen Div die Eigenschaft "position:relative" geben muss, dann kann ich dem roten Div "position:absolute" angeben, dann bezieht sich das auf das übergeordnete Div..

Allgemein formuliert: Eine position:absolute Angabe bezieht sich immer auf das nächsthöhere Blocklevel-Element, welches nicht static(default) ist. Ansonsten auf den body...

Ich dachte vertical-align funktioniert nicht bei divs, weil es keine Blockelemente sind?

Genau genommen, eben weil es Blockelemente sind.


Zu Deiner Fragestellung gibt es mehrere Möglichkeiten:
Die Möglichkeit 1 hat xxx beschrieben und das wäre auch die von mir favorisierte Lösung. Ich habs mir nicht genauer angesehen, aber die Idee mit margin:auto ist gut.
margin:0 auto sorgt für die horizontale Zentrierung und wenn das äußere Div <= dem roten Div wird, dann klebt es links und rechts am Rand.

Möglichkeit 2:
Statt margin:auto ein Hilfselement unten einsetzen, welches padding: 0 50px oder sowas hat und da das rote Div ohne Breitenangabe hineinlegen. Dann hast Du rechts und links immer einen festen Abstand, was allerdings bei kleineren Fenstern, wie z.B. bei Mobilbrowsern aus Platzgründen blöd wäre. Bei sehr großen Fenster sähe es vielleicht cooler aus, wenn das rote mitwachsen würde.

Generell abraten würde ich von acids Vorschlag so etwas wie left:50% und margin-left: -halbe Breite zu verwenden. Da wandert es bei kleinen Fenster links raus. margin:auto ist einfacher und in meinen Augen auch viel praktischer. Eine Win-Win-Situation...

Aber wie so oft ist hier vieles Geschmackssache...

€dith: Habe mir die Fragestellung gerade nochmal (hilft manchmal *g*) durchgelesen. Wenn das äußere auch eine feste Breite hat, ist es wirklich nur noch Geschmackssache. Ich dachte zunächst das weiße wäre der Body...

[EviLsEyE]

Großen Dank Euch für die Codebeispiele und ausführlichen Erklärungen
Die ein oder andere Sache ist mir dadurch zumindest klarer geworden (auch wenn ich mich im CSS-Dschungel immer noch nicht heimisch fühle)

Sowas wie "margin:0 auto;" kannte ich z.B. bisher gar nicht.. im Prinzip aber das, was ich schon lange suche..

[EviLsEyE]

Eine Frage hätte ich noch.. wie habt Ihr gelernt, mit CSS umzugehen?
Einfach drauflos und sich bei jedem Problem durch die Doku und Blogs wühlen oder habt Ihr strukturiert (z.B. mit Hilfe eines Buches) gelernt?

Ich hab mir alles bisher selbst mittels "learning by doing" beigebracht, merke aber oft, dass das wohl nicht der richtige Weg ist/war, da man viele Sachen entweder falsch verstanden oder gar nicht erst angeschaut hat und einem dann bei der Entwicklung solche banalen Problemstellungen eine Hürde sind..

Hätte eigentlich gerne eine Lektüre, die das Thema CSS strukturiert und halbwegs verständlich rüber bringt - habt Ihr da besondere Empfehlungen?

[acid]

html-world.de und cha0s im IRC nerven

[Warzenschwan]

learning by doing. wie eigentlich alles. und ja, cha0s war/ist immer eine gute hilfe

[Anapäst]

um html/css "neu" zu lernen bot sich damals Einführung in XHTML, CSS und Webdesign - Michael Jendryschik an. inzwischen hat der das umgestaltet und mehr in buchform aufgebaut, sollte aber immernoch gut sein.