[Erledigt] Höhe von einem DIV-Layer relativ zum nachfolgenden DIV

#1

[Erledigt] Höhe von einem DIV-Layer relativ zum nachfolgenden DIV

04.01.2006, 15:48

Hallöchen...

gibts eine Möglichkeit die Höhe von einem DIV-Layer abhängig von einem anderen DIV-Layer zu machen?

ich hab folgendes:

Code:

<body> <div id="titel"> [img]biller/logo.gif[/img] <div id="kuerf"> {KUERF} </div> </div> <div id="navi"> {KATEGIREN} </div> <div id="main"> {HAAPTDEEL} </div> </body>

Und "navi" soll genau so hoch sein wie "main"

hab die zwei auch schon ineinander verschachtelt, aber irgendwie haut's nicht hin

Ich hab auch schon etwas im Forum rumgestöbert, aber irgendwie krieg ich die richtigen Suchbegriffe nicht zusammen...

Bin über jeden Hinweis dankbar!
Stichworte: -
lomtas

Dabei seit: 08.02.2005

Beiträge: 224
#2

04.01.2006, 16:05

nein, das geht nicht. Wenn es um Farben gibt, dann kann man das mit einem Trick erreichen, den ich vor kurzem schon einmal in diesem Forum beschrieben haben. Aber Divs sind halt keine Tabellen! (und das ist auch gut so )
Kommentar
Zergling-new

Dabei seit: 21.05.2008

Beiträge: 9931
#3

04.01.2006, 16:09

Sollen die beiden nebeneinander sein, oder warum soll eine Navigation genauso groß sein wie der Hauptteil direkt darunter?
Falls nebeneinander:
<div>-Container um beide, beide innerhalb bekommen 100% Höhe, der Inhalt drückt den eigenen und äußeren Container auf und da 100% festgelegt ist, sind beide inneren gleichgroß.
Kommentar

04.01.2006, 17:33

Genau, die zwei sind nebeneinander...
aber das mit dem div drumrum will nicht so ganz...
Hier mal meine CSS-Definitionen

Code:

#titel
{
	margin-top:			0px;
	position:			fixed;
	height:				95px;
	width:				100%;
	padding:			0px 5px;
	border-bottom:		1px solid #000000;
	background-color:	#600000;
	text-align : 		left;
	left:				5px;
	z-index:			1;
}
#navi
{
	font-family:		Georgia;
	margin-top : 		95px;
	margin-left:		0px;
	position : 			absolute;
	left:				5px;
	width:				200px;
	
	line-height:		18px;
	background-color:	#800000;
	height:				100%;
	text-align : 		left;
	padding-left:		2px;
	padding-top:		5px;
	font-size:			11px;
	border-right:		1px solid #000000;
	z-index:			0;
	border:1px solid green;
}
#main
{
	font-family:		Georgia;
	font-size:			14px;
	margin-top : 		95px;
	margin-bottom:		50px;
	margin-left:		203px;
	width:				650px;
	float:				left;
	text-align : 		left;
	padding:			5px;
	height:				100%;
	border:1px solid white;
}
#kuerf
{
	position:			fixed;
	right:				0px;
	height:				87px;
	top:				0px;
	padding:			2px 5px 1px 0px;
	margin:				0px;
	width:				170px;
	text-align:			right;
	font-size:			10px;
	font-family:		Verdana;
}

hier noachmal das komplette template:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	{REDIRECT}
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	
	{JS}
	
	<title>{TITLE}</title>
	
</head>
<body>

	
	<div id="titel">
		[img]biller/logo.gif[/img]<span style="position:absolute;margin-top:0px;">[img]biller/titel.gif[/img]

		<table border="0" width="650" cellspacing="0px" style="position:absolute;margin-top:17px;font-size:15px;padding:0px 3px;border:1px;">
			<tr>
				<td style="vertical-align:bottom;">
					Suche
				</td>
				<td style="vertical-align:bottom;">				
					AGB
				</td>
				<td style="vertical-align:bottom;">	
					Impressum
				</td>
				<td style="vertical-align:bottom;">	
					Datenschutz
				</td>
				<td style="vertical-align:bottom;">
					Kontakt
				</td>
				<td style="vertical-align:bottom;">
					Login
				</td>
				<form action="sichen.php5" method="GET" class="mini">
				<td style="vertical-align:bottom;" align="right">
					
					<span class="mini" style="text-align:right;">Stichwort:</span>
				</td>
				<td style="vertical-align:bottom;" >	
					<input type="text" name="s_text" class="mini" />
				</td>
			
				<td colspan="2" align="center"  style="vertical-align:bottom;">	
					<input type="submit" name="submit" value="Suchen" class="mini_button" />
					
				</td>
				</form>
			</tr>
		</table>
		<div id="kuerf">
			{KUERF}
		</div>
	</div>
	<div style="border:1px solid blue;padding:3px;" width="800px">
		<div id="navi">
			{KATEGIREN}
		</div>

		<div id="main">
			{HAAPTDEEL}
		</div>
	</div>
</body>
</html>

der div mit dem blauen rand um "navi" und "main" ist auch gar nicht drumrum

der hängt oben und ist etwa 5 pixel hoch

oh mann, ich wollt ich würd css wenigstens etwas beherrschen

//edit: hab nur die mail-addresse rausgestrichen

Kommentar

lomtas

Dabei seit: 08.02.2005

Beiträge: 224
#5

04.01.2006, 18:49

Zitat von Zergling

<div>-Container um beide, beide innerhalb bekommen 100% Höhe, der Inhalt drückt den eigenen und äußeren Container auf und da 100% festgelegt ist, sind beide inneren gleichgroß.

Das ist nach meinen Erfahrungen ein Wunschdenken und funktioniert leider in der Praxis nicht.
Kommentar

DerDesian

Dabei seit: 02.03.2005
Beiträge: 305

05.01.2006, 08:43

Du kannst hinbekommen, dass es so aussieht, dass sie beide gleich hoch wären aber real werden sie es nicht sein.

Code:

<div style="width: 800px; background: url('./img/hintergrund.für.beide.divs.png');">
	<div style="width: 200px; float: left;">linkes div</div>
	<div style="width: 600px; float: right;">rechtesDiv</div>
	<div style="clear: both; width: 100%; height: 0px; overflow: hidden;">
	<!--
		- um beim floaten im Firefox das umschließende div auseinanderzuziehen
		- das wird sonst auf height 0px reduziert und du siehst halt das Hintergrundimg nicht
	 -->
	</div>
</div>

Gruß
Der Desian

Wenn dich was ankotzt, machs besser.

Kommentar

Zergling-new

Dabei seit: 21.05.2008

Beiträge: 9931
#7

05.01.2006, 10:03

Zitat von lomtas

Zitat von Zergling

<div>-Container um beide, beide innerhalb bekommen 100% Höhe, der Inhalt drückt den eigenen und äußeren Container auf und da 100% festgelegt ist, sind beide inneren gleichgroß.

Das ist nach meinen Erfahrungen ein Wunschdenken und funktioniert leider in der Praxis nicht.

???
Kommentar
#8

05.01.2006, 11:17

das klappert alles irgendwie nicht

so wie's der Desian gemacht hat wird bei nur das umschliessende div "aufgebläht", das linke bleibt so gross wie der Inhalt. Auch wenn height=100% bei den Inneren angegeben ist.

lomtas scheint recht zu haben...
Kommentar
juhuwoorps

Dabei seit: 21.07.2004

Beiträge: 377
#9

05.01.2006, 11:28

Habs auch mal versucht. Scheint zu funktionieren:

PHP-Code:

<?php <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css">  </style> </head> <body> <div class="container"> <div class="left">test</div> <div class="main">content</div> </div> </body> </html> ?>

Getestet mit FF 1.5

Und geht auch alles in die Binsen, immer heftig weiter grinsen!
Kommentar
#10

05.01.2006, 11:44

Huhu juhuwoorps,

mach doch mal etwas text in den rechten, dass mehr als eine bildschirmansicht gefüllt ist... dann sieht's nicht mehr so doll aus , leider

ich hab's jetzt so hingemogelt, dass der "drumrum" die gleiche Breite, Farbe, etc hat wie der linke. Der linke hat height: auto; sodass dort immer dem content angepasst wird.
wird der rechte jetzt grösser, wird der "drumrum" aufgezogen.

ist nicht ganz wie ich's mir vorgestellt hatte aber, naja, immerhin!
Kommentar
lomtas

Dabei seit: 08.02.2005

Beiträge: 224
#11

05.01.2006, 13:09

genau und das ist das einzige was funktioniert.
Kommentar

Ankündigung

[Erledigt] Höhe von einem DIV-Layer relativ zum nachfolgenden DIV

Neue Werbung 2019