HTML/CSS <div> größen anpassen

D

Default

Standard
ID: 264299
L
1 Dezember 2006
1.272
136
Hallo,
ich hab da mal ein Probelm. Ich habe bis jetzt nur mit Tabellen gearbeitet, da ging das problemlos.

Ich habe 3 div´s nebeneinander, links ein Rahmen, rechts ein Rahmen und in der Mitte einen weißen bereich.
wenn ich jetzt was in den Weißen bereich in der Mitte schreibe, dann soll der Rahmen aussen "mit wachsen".

Ich hoffe man versteht mein Problem... und jemand kann mir vlt helfen.

Ich hab mal ne skizze davon gemacht, also wenn sich die "2" verlängert sollen sich "1" und "3" mit verlängern, damit das design ganz bleibt.


greez
Default
 
somit das ganz normale standart 3-column layout, und wo liegt jetzt dein problem?

Du gibst den mittleren bereichen vordefinierte breiten und keine länge, beim footer dann noch ein "clear: both;" und alles wird sich dynamisch dem inhalt anpassen (je nach anwendungsgebier wäre noch über overflow nachzudenken..)

mfg
 
Mexxim schrieb:
Du gibst den mittleren bereichen vordefinierte breiten und keine länge, beim footer dann noch ein "clear: both;" und alles wird sich dynamisch dem inhalt anpassen (je nach anwendungsgebier wäre noch über overflow nachzudenken..)
Zum Vergrößern anklicken....

also, ich hab jetzt dem footer nochmal ein clear:both; gegeben, und in der mitte jede höhe entfernt.
nun hat sich das design ganz verschoben. :(

Ich arbeite in den div´s (wie oben in der grafik) mit hintergrundbildern um einen Rahmen um die Seite zu machen. Ich hau hier mal den Quelltext rein:

Das erste ist die *.htm, das zweite die *.css
Code: 
<html>

<head>
<meta http-equiv="Content-Language" content="de">

<title>Neue Seite 1</title>
<link rel="stylesheet" type="text/css" href="./format.css">
</head>

<body bgcolor="#D3D2D2">

<div id="rahmen_oben">
	<div id="rahmen_oben_links"></div>
	<div id="rahmen_oben_rechts"></div>
	<div id="rahmen_oben_mitte"></div>
</div>
<div id="rahmen_mitte">
	<div id="rahmen_mitte_links"></div>
	<div id="rahmen_mitte_rechts"></div>
	<div id="anzeigebereich">
		<p align="center">Hier kommt der Text hin</p>
		<p> </p>
		<p> </p>
		<p> </p>
		<p align="center">und alles was auf dieser höhe ist muss mit verlängert werden</p>
		<p> </p>
		<p> </p>
		<p> </p>
		<p> </p>
		<p align="center">auch die Seitenränder, also rahmen_mitte_links und rahmen_mitte_rechts!</p>
		<p> </p>
	</div>
</div>
<div id="rahmen_unten">
	<div id="rahmen_unten_links"></div>
	<div id="rahmen_unten_rechts"></div>
	<div id="rahmen_unten_mitte"></div>
</div>
</body>
</html>

Code: 
#rahmen_oben{
	height:69px;
}
					
#rahmen_oben_links{
	background-image:url('rahmen/ol.jpg');
	height:69px;
	width:76px;
	float:left
}

#rahmen_oben_mitte{
	background-image:url('rahmen/om.jpg');
	height:69px;
	margin-left:76px;
	margin-right:77px;
}

#rahmen_oben_rechts{
	background-image:url('rahmen/or.jpg');
	width:77px;
	height:69px;
	float:right;
}

#rahmen_mitte{
	margin-top:-16px;
}	
	
#rahmen_mitte_links{
	background-image:url('rahmen/ml.jpg');
	background-repeat:repeat-y;
	width:76px;
	float:left;
}

#anzeigebereich{
	background-color:#FFFFFF;
	margin-left:76px;
	min-height:250px;
}


#rahmen_mitte_rechts{
	background-image:url('rahmen/mr.jpg');
	background-repeat:repeat-y;
	width:77px;
	float:right;
}

#rahmen_unten{
	height:68px;
	clear:both;
}

#rahmen_unten_links{
	background-image:url('rahmen/ul.jpg');
	height:68px;
	width:76px;
	float:left;
}

#rahmen_unten_mitte{
	background-image:url('rahmen/um.jpg');
	height:68;
	margin-left:76;
	margin-right:77;
}

#rahmen_unten_rechts{
	background-image:url('rahmen/ur.jpg');
	height:68px;
	width:77px;
	float:right;
}

Ich weiß das das ganze sicher besser geschrieben werden kann, aber ich versuche das erste mal css richtig einzusetzen und mit einer extra *.css -datei ein design zu erstellen :LOL:
Wie gesagt, das design passt soweit zusammen, allerdings nur mit einer festen höhe. Und die will ich nicht immer ändern müssen wenn inhalt dazu kommt...

/EIDIT: "min-height:" hab ich auch schon versucht, aber mein firefox nutzt das anscheinend wie height...

greez
Default
 
Wenn du willst, dass die Rahmen der beiden seitlichen Felder mit nach unten gezogen werden, auch wenn ihr Inhalt schon vorher zu Ende ist, dann musst du das zu wiederholende Rahmenbild als Hintergrund der übergeordneten divs benutzen (also bei dir: rahmen_mitte).
Das ist auch grundlegend in theHackers Link beschrieben (allerdings einen Abschnitt untendrunter).
Da es hier um 2 Container geht, dürfte es jedoch recht knifflig sein, das einigermaßen dynamisch hinzubekommen (man könnt beispielsweise noch ein div um rahmen_mitte legen, so dass eins für den rechten und eins für den linken Rahmen zuständig ist).

Eine Alternative wäre die dynamische Höhenanpassung per Javascript. Das wäre zwar ein recht einfacher Ansatz, aber es gibt ja auch User ohne bzw. mit deaktiviertem JS, so dass diese dein Design falsch angezeigt bekämen. Wäre also keine allzu gute Lösung.

Edit: Ich sehe gerade, dass rahmen_mitte_links und _rechts offenbar ausschließlich dazu da sind deinen Rahmen zu malen (ich dachte, sie hätten jeweils einen eigenen Rahmen, um den es geht).
In dem Fall würde ich auf jeden Fall zu meiner ersten Variante raten.

Also folgender Aufbau:
Code: 
<div id="rahmen_mitte_links">
    <div id="rahmen_mitte_rechts">
        <div id="anzeigebereich">...</div>
    </div>
</div>

Dann kannst du das Hintergrundbild von rahmen_mitte_rechts mit background-position nach rechts ausrichten.
 
Zuletzt bearbeitet:
Hi, danke soweit. Ich habs verstanden, glaube ich zumindest^^

dein unterster quote siht mir vielversprechend aus, ich versuch das gleich mal. Danke!
 
Sorry für den doppelpost!

Ich bekomm das so auch net hin :(

/EDIT: Hier mal der link zum ansehen der schandtat...

Ich hab es in der *.htm jetzt so:

Code: 
<div id="rahmen_mitte">
	<div id="rahmen_mitte_links">
		<div id="rahmen_mitte_rechts">
			<div id="anzeigebereich">
				<p align="center">Anzeigebereich</p>
				<p align="center">Anzeigebereich</p>
				<p align="center">Anzeigebereich</p>
			</div>
		</div>
	</div>
</div>

und jetzt ist das Anzeigefenster rechts vom rechten rand. Alsoder rechte Rand und das Anzeigefenster sind vertauscht.

>Obwohl ich den background von rahmen_mitte_rechts mit "background-position:right;" an den rechten rand geklebt hab.

Code: 
#rahmen_mitte{
	margin-top:-16px;
	width:100%;
}	
	
#rahmen_mitte_links{
	background-image:url('rahmen/ml.jpg');
	background-repeat:repeat-y;
	background-color:#FFFFFF;
	width:100%;
	float:left;
}

#anzeigebereich{
	background-color:#FFFF00;
	margin-left:76px;
	margin-reight:77px;
	min-height:250px;
}


#rahmen_mitte_rechts{
	background-image:url('rahmen/mr.jpg');
	background-position:right;
	margin-left:76px;
	float:right;
	width:77px
}

thx fur die Hilfe bis hierher... :(
 
Die rahmen_mitte_links und _rechts brauchen nicht mehr zu floaten bei diesem Aufbau, da ja hier nichts nebeneinander angeordnet ist.

Wenn du das weg machst sollte es gehn.
 
Danke! Beim float lag das problem also... ich hoffe das ich den Rahmen jetzt soweit fertig gebaut bekomme.

Thx an alle die geholfen haben!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben