Wie setze ich so ein Layout um?

Carino · #1 (**permalink**) 03.02.2009, 16:23

Muss ich da bereiche verschachteln oder komme ich mit floats weiter?
Besten Dank,

Carino

Carino · #2 (**permalink**) 03.02.2009, 16:30

Erste Idee, aber hier seh ich den Wrapper nicht, da die rechte spalte sich nicht an der höhe des containers orientiert.
Weiß jemand, wie man dem Abhilfe schaffen kann?

HTML-Code:

<style>
body {background: magenta;}
#wrapper {width: 900px; background: cyan; margin: 0 auto;}
#left {width: 600px; background: #666; float: left;}
#header {background: lime; height: 100px;}
#menu {background: blue; height:20px;}
#main {background: white;}
#footer {background: pink;}
#right {width: 300px; background: yellow;float: left;}

</style>
</head>

<body>
<div id="wrapper">
	<div id="left">
		<div id="header">header</div>
		<div id="menu">menu</div>
		<div id="main">main</div>
		<div id="footer">footer</div>
	</div>
    <div id="right">right</div>
</div>
</body>

saari · #3 (**permalink**) 03.02.2009, 16:56

Hallole, bin ja selber Neuling und hab an deinem layout rumgebastelt, aber auch nix.... hoffe jemand hilft dir weiter

mantiz · #4 (**permalink**) 03.02.2009, 17:35

Schau' Dir mal Faux Column und Easy Clearing an, sollte das sein, was Du brauchst.

Carino · #5 (**permalink**) 04.02.2009, 08:33

Hab es schon halbwegs geschafft, wenn ich das ein clear setze im letzten DIV.
Schau mir gleich mal deine Tipps an, Danke!

lippoli15 · #6 (**permalink**) 04.02.2009, 09:38

Zitat:

Zitat von Carino

Erste Idee, aber hier seh ich den Wrapper nicht, da die rechte spalte sich nicht an der höhe des containers orientiert.
Weiß jemand, wie man dem Abhilfe schaffen kann?

HTML-Code:

<style>
body {background: magenta;}
#wrapper {width: 900px; background: cyan; margin: 0 auto;}
#left {width: 600px; background: #666; float: left;}
#header {background: lime; height: 100px;}
#menu {background: blue; height:20px;}
#main {background: white;}
#footer {background: pink;}
#right {width: 300px; background: yellow;float: left;}

</style>
</head>

<body>
<div id="wrapper">
	<div id="left">
		<div id="header">header</div>
		<div id="menu">menu</div>
		<div id="main">main</div>
		<div id="footer">footer</div>
	</div>
    <div id="right">right</div>
</div>
</body>

Hi,
wie willst du ihn sehen, er ist 900px breit, in ihm sind 2 divs, die zusammen auch 900px breit sind.
Dann ist der arme auch schon zum platzen voll

Der Ansatz sieht aber schon gut aus!

CSS 4 You - The Finest in Stylesheets wird dir sicher das ein oder andere mal noch helfen, wenn du noch fragen hast schreibs, werde dir gern helfen, aber weiß gerade nicht ob du schon fertig bist xD

Carino · #7 (**permalink**) 04.02.2009, 09:53

Ja ich möchte den Wrapper ja rechts unter dem "right" sehen, da right ja nur eine Zeile hoch ist, ist unten noch genug Platz, der ausgefüllt wird, da "left" ja mehr höhe hat.

Wenn ich es so mache:

HTML-Code:

<style>
body {background: magenta;}
#wrapper {width: 900px; background: cyan; margin: 0 auto;}
#left {width: 600px; background: #666; float: left;}
#header {background: lime; height: 100px;}
#menu {background: blue; height:20px;}
#main {background: white;}
#footer {background: pink;}
#right {width: 300px; background: yellow; float:left;}

</style>
</head>

<body>
<div id="wrapper">
	<div id="left">
		<div id="header">header</div>
		<div id="menu">menu</div>
		<div id="main">main</div>
		<div id="footer">footer</div>
	</div>
    <div id="right">right</div> 
    <div style="clear: left;"></div>
</div>
</body>

sieht es schon sehr gut aus, weiß aber nicht ob man das so macht, oder ob es eleganter geht.

mantiz · #8 (**permalink**) 04.02.2009, 10:07

Ja, es geht mit EasyClearing einfacher, z.B.

Code:

#wrapper:after {
	visibility: hidden;
	clear:      both;
	display:    block;
	height:     0;
	content:    ".";
	font-size:  0;
}

* html #wrapper { height: 1%; } /* Hack für IE < 7, die :after nicht verstehen */

Den IE-Teil würde ich in eine extra css-Datei verpacken, die per Conditional Comments nur für den IE eingebunden wird.

Dann kannst Du Dir das Extra-div zum clearen sparen.

So mache ich es bisher zumindest und hatte noch keine Probleme damit.

// Edit:
Ich habe mir gerade nochmal den Artikel über EasyClearing angesehen, dort steht noch etwas zusätzlich für IE/Mac, welchen ich bisher nicht unterstütze, nur zur Info, evtl. willst Du das noch dazu bauen.
Weiterhin steht im Artikel nichts von font-size:0, was ich bei mir aber einfügen musste, weil ich sonst im FF3/Win einen blöden Abstand erhalten habe, den zwar eigentlich die Angabe von height:0 entfernen soll, was bei mir aber so nicht funktionierte.

fricca · #9 (**permalink**) 04.02.2009, 10:34

mantiz, auch IE7 kennt :after nicht, dein Kommentar also irreführend.
hasLayout ist für die Clear-Wirkung im IE <= 7 verantwortlich. Dieses hat #wrapper bereits durch die Breite, der Star-HTML-Hack ist also überflüssig.
[Das, was in dem Artikel für IE Mac eingesetzt wird, rettet das Easyclearing auch für IE7, siehe der letzte dazu verlinkte Artikel in den FAQ. Ja, das ganze ist überaus kompliziert.]

Ich halte das Easyclearing für keine gute Empfehlung für jemanden, der gerade das erste Mal erfahren hat, dass und wie Floats eingeschlossen werden können. "Einfacher" ist es ganz sicher nicht!
Carino, das zusätzlich eingesetzte Element ist zwar viellleicht nicht das eleganteste, doch es wirkt zuverlässig.

mantiz · #10 (**permalink**) 04.02.2009, 10:50

hmpf, anscheinend muss ich mein Wissen mal wieder auffrischen, das gibt's doch nicht.

Danke für die Richtigstellung, dann werde ich mal vorsichtiger mit meinen "Tipps".

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Bitte um Hilfe - CSS und Prozentangaben	sprefer	CSS	3	01.03.2011 04:11
Untermenü im IE	nici	CSS	10	22.06.2009 21:19
Probleme mit Layout	kruemelchen26	CSS	0	15.05.2007 22:40
Dynamische Layout Breite und Höhe	altes-kind	CSS	7	12.01.2007 11:54
Flexibles 3-Spalten Layout	Tobbe	CSS	4	18.10.2006 13:07