CSS-Layout: Krieg's einfach nicht hin, wer kann helfen?

raginrob · #1 (**permalink**) 29.01.2009, 12:33

Hallo zusammen,

ich hab mich endgültig entschlossen vom Tabellenlayout abzurücken und komplett auf CSS umzusteigen. Jetzt hab ich ein Problem mit dem Layout einer Seite und komme einfach nicht dahinter, wie es klappen soll, ich hoffe ihr habt den entscheidenden Tipp für mich

Das Problem ist, dass im rechten Bereich unter der Grafik mit dem Verlauf der Lückenfüller nicht das macht, was er machen soll, nämlich die Lücke füllen!

So sieht mein Layout in Reinform aus:

skizze1.jpg

und hier ist noch einmal eine Skizze mit ein paar Bereichen, um die es geht:

skizze2.jpg

Die DIV's habe ich folgendermaßen angeordnet:

Code:

<div id="hauptcontainer">
	<div id="oben"></div>
	<div id="mitte">
	  <div id="links">
	    <div id="menurand"></div>
	    <div id="menuzeile"></div>
	    <div id="contentbereich"></div>
	  </div>
	  <div id="rechts">
	    <div id="seitenbereich"></div>
	  </div>
	</div>
	<div id="unten">
	  <div id="untenlinks"></div>
	  <div id="untenmitte"></div>
	  <div id="untenrechts"></div>
	</div>	
</div>

Und hier ist das zugehörige Stylesheet:

Code:

#hauptcontainer {
	width: 1044px;
	margin-left:auto;
	margin-right:auto;
	margin-top: 20px;
}

#oben {
	width:100%;
	background-image:url(logo_top.jpg);
	height:123px;
	background-repeat:no-repeat;
}

#mitte {
	width:100%;
	background-image:url(Bilder/rand_lm.gif);
	background-position:left;
	background-repeat:repeat-y;
	background-color:#FFFF00;	
}


#links {
	float:left;
	width:786px;
	background-image:url(Bilder/rand_lm.gif);
	background-position:left;
	background-repeat:repeat-y;
	background-color:#006600;
}

#menurand {
	float:left;
	width: 33px;
	height: 39px;
	background-image:url(Bilder/rand_lo.gif);
	background-repeat:no-repeat;
}

#menuzeile {
	float:right;
	background-image:url(Bilder/entwurf_08.gif);
	background-position:bottom;
	background-repeat:repeat-x;
	width:753px;
	height:39px;
}

	
#contentbereich {
	clear;
	width:753px;
#	position:relative;
	margin-left:33px;
	background:#ff0000;
}

#rechts {
	float:right;
	width:258px;
	#height:10000px;
	background-image:url(Bilder/entwurf_13.gif);
	background-position:right;
	background-repeat:repeat-y;
}

#seitenbereich {
	background-image:url(Bilder/leiste_rechts.jpg);
	background-position:top;
	background-repeat:no-repeat;
	width:258px;
	height:400px;
}

#untenlinks {
	clear:both;
	float:left;
	background-image:url(Bilder/ecke_lu.gif);
	width:33px;
	height:76px;
}

#untenmitte {
	float:left;
	width:753px;
	height:76px;
	background-image:url(Bilder/rand_u.gif);
	background-repeat:repeat-x;
}


#untenrechts {
	float:left;
	background-image:url(Bilder/entwurf_18.gif);
	width:258px;
	height:76px;
}

Wenn ich nun im DIV "contentbereich" eine größere Menge Text eingebe, schiebt "contentbereich" das DIV "unten" weiter runter, wie es sein soll. Das Problem ist aber, das ich nicht weiss, wie ich es hinkriege, dass auf der rechten Seite der Lückenfüller (eine kleine Grafik, Nr. 6 auf der zweiten Skizze) die Lücke füllt! Im Browser sieht das ganze nämlich so aus:

ergebnis.jpg

Mit Tabellen war das bisher kein Problem, da eine Untertabelle in der linken Zelle beim Größerwerden die rechte Zelle vertikal ja ebenso vergrößerte und der Hintergrund der rechten Zelle somit ebenfalls weitergeführt wurde. Ich hab ehrlich gesagt keine Ahnung, wie das klappen soll, vielleicht habt ihr da eine Idee. Danke im Voraus!!!

regloh · #2 (**permalink**) 29.01.2009, 21:54

Das liegt daran, weil die Container nicht mitwachsen, wie die Zellen in einer Tabelle das tun. Zudem ist ja dein "#seitenbereich" auf 400px in der Höhebegrenzt. Du kannst diesen "Mitwachseffekt" durch einen Trick erzeugen. Einfach mal durchlesen.

Crizzo · #3 (**permalink**) 29.01.2009, 22:42

Bau bitte keine Div-Suppe: div-Suppe

Gerade als Umsteiger vom Tabellen-Layout bist du dafür "anfällig".

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Redesign für Steiner Cycling Team	pkipper	Site- und Layoutcheck	11	09.02.2011 12:25
Banner neben CSS Layout platzieren?	delaspuke	CSS	19	29.12.2010 22:08
CSS layout was 'mit geht'	Iceman*	CSS	2	30.12.2005 08:36
Ich bekomme das mit dem CSS einfach nicht hin	tkd	CSS	6	09.05.2004 20:43
includes bei css layout	dan	CSS	2	10.03.2004 18:21