✔ Hilfe bei verschachtelten DIVs

[tuFrogs]

Hi, ich bekomm es einfach nicht hin und hätte gern Hilfe.

Im Anhang ist eine Grafik die verdeutlichen soll was ich vorhabe. Ich habe es hinbekommen das die DIVs so angeordnert werden, das Problem was ich jetzt noch habe ist, dass wenn ich das Menü oder einen Inhalt hinzufüge, das die DIVs für Menü/Inhalt sich über den Banner unten erstrecken und das mittlere DIV die Höhe nicht verändert..

Hoffe ich konnte mich verständlich ausdrücken.

 

[Maik]

Hi,

du hast dich zwar verständlich ausgedrückt, nur hast du es versäumt, den dazugehörigen Quellcode zu posten, aus dem hervorgeht, auf welche Weise du die DIVs so angeordnet hast, sprich mit absoluten Positionsangaben oder mit einer Floatumgebung, und ob die DIVs evtl. eine fixe Höhenangabe besitzen.

 

[tuFrogs]

Die "leer-DIVs" sind nur dafür da um Platz zu schaffen um das ganze an die Hintergrundgrafiken anzupassen..

Index.php

<div id="seite">
	<div id="oben"></div>

<div id="mitte">
	
	<div id="leer">&nbsp;</div>
	
		<div id="menu"></div>
	
	<div id="leer">&nbsp;</div>
		
		<div id="inhalt">.inh.alt.</div>
	
</div>

	<div id="unten"></div>
</div>

style.css

div#seite
{
	background:					#000000 url(gfx/pz18_bkgr_mitte.jpg) repeat-y;
	margin:						0 auto;
	width:						900px;
	text-align:					left;
}

div#oben
{
	background:					#000000 url(gfx/pz18_bkgr_oben.jpg) repeat-y;
	margin:						0 auto;
	width:						900px;
	height:						118px;
}

div#unten
{
	background:					#000000 url(gfx/pz18_bkgr_unten.jpg) repeat-y;
	margin:						0 auto;
	width:						900px;
	height:						85px;
}

div#mitte
{´
	margin:						0 auto;
	width:						900px;
}

div#menu
{
	background:					#66dd66;
	margin:						0 auto;
	width:						200px;
	float:						left;
}

div#leer
{
	background:					#ff9600;
	margin:						0 auto;
	width:						30px;
	float:						left;
}

div#inhalt
{
	background:					#dddddd;
	margin:						0 auto;
	width:						610px;
	text-align:					left;
	float:						left;
}

 

[Maik]

Da es sich beim mittleren Teil des Layouts um eine "Floatumgebung" handelt, muss diese auch zum Abschluss "gecleart" werden (siehe hierzu http://positioniseverything.net/easyclearing.html), damit das umschliessende Element seine tatsächliche Höhe annimmt, und die Spalten es nicht am unteren Elementrand überlappen:

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Die Klasse .clearfix wird dann zusätzlich im DIV #mitte aufgerufen:

<div id="mitte" class="clearfix"> ... </div>

Und entferne hier mal das Apostroph nach der öffnenden geschweiften Klammer:

div#mitte
{´
    margin:                        0 auto;
    width:                        900px;
}

 

[tuFrogs]

Ist mir bisher gar nicht aufgefallen.. ^^ Okay ich danke dir, werde es gleich einmal überarbeiten.

 

[tuFrogs]

Siehe da es geht.. hihi Dankö!!