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

04.01.2006, 16: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!

lomtas · 04.01.2006, 17: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

)

Zergling-new · 04.01.2006, 17: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ß.

04.01.2006, 18: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

lomtas · 04.01.2006, 19:49

Zitat:

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.

DerDesian · 05.01.2006, 09: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

Zergling-new · 05.01.2006, 11:03

Zitat:

Zitat von lomtas

Zitat:

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.

???

05.01.2006, 12: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...

juhuwoorps · 05.01.2006, 12: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">

<!--

.left {

    margin: 5px;

    padding: 5px;

    float: left;

    height: 97%;

    width: 150px;

    background-color: gray;

}

.main {

    margin: 5px;

    padding: 5px;

    float: right;

    height: 97%;

    width: 500px;

    background-color: gray;

 
}

.container {

            width: 700px;

            height: 100%;

            border: 1px solid gray;

            margin: 5px;

            margin-left: auto;

            margin-right: auto;

            padding: 5px;

        }

-->

</style>

</head>

 
<body>

<div class="container">

<div class="left">test</div>

<div class="main">content</div>

</div>

</body>

</html>

 
?>

Getestet mit FF 1.5

05.01.2006, 12: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!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Link hinter div layer nicht anklickbar (Firefox)		HTML, Usability und Barrierefreiheit	3	26.11.2009 17:12
Layer immer zentriert erscheinen lassen	andrew22	HTML, Usability und Barrierefreiheit	2	10.05.2007 10:19
Layer ebenen	kiffy	HTML, Usability und Barrierefreiheit	1	07.05.2006 15:42
Layer relativ zur Tabelle	suter	HTML, Usability und Barrierefreiheit	4	20.03.2006 14:06
JS: Layer aus und einblenden	php1	HTML, Usability und Barrierefreiheit	2	02.01.2006 14:51
Layer auf Bild	Rotti	HTML, Usability und Barrierefreiheit	6	25.12.2005 10:14
kleines Problem mit css layer	Rotti	HTML, Usability und Barrierefreiheit	0	08.12.2005 22:36
Training von neuronalen Netzen		PHP Tipps 2005	5	28.09.2005 15:12
Layer am Ende einer Seite platzieren	php1	HTML, Usability und Barrierefreiheit	2	21.03.2005 22:44
Text in Layer	Stümper	HTML, Usability und Barrierefreiheit	16	23.02.2005 05:26
Layer nach Klicken des Banners schließen?!		HTML, Usability und Barrierefreiheit	2	07.11.2004 18:05
Layer mittels PHP steuern		PHP Tipps 2004	1	30.08.2004 09:27
Layer visibility per Css-Script ändern		HTML, Usability und Barrierefreiheit	3	18.08.2004 23:28
Layer zentrieren	rocco	HTML, Usability und Barrierefreiheit	12	02.08.2004 17:25
Div Layer erst nach 2 Sekunden öffnen		HTML, Usability und Barrierefreiheit	1	22.07.2004 18:22

04.01.2006, 16:48
Gast Beiträge: n/a	[Erledigt] Höhe von einem DIV-Layer relativ zum nachfolgenden DIV 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!


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

04.01.2006, 17:05
lomtas Erfahrener Benutzer Registriert seit: 08.02.2005 Beiträge: 224	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 )

04.01.2006, 17:09
Zergling-new Erfahrener Benutzer Registriert seit: 21.05.2008 Beiträge: 9.937	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ß.

05.01.2006, 12:17
Gast Beiträge: n/a	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...

05.01.2006, 12:28
juhuwoorps Erfahrener Benutzer Registriert seit: 21.07.2004 Beiträge: 377	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"> <!-- .left { margin: 5px; padding: 5px; float: left; height: 97%; width: 150px; background-color: gray; } .main { margin: 5px; padding: 5px; float: right; height: 97%; width: 500px; background-color: gray; } .container { width: 700px; height: 100%; border: 1px solid gray; margin: 5px; margin-left: auto; margin-right: auto; padding: 5px; } --> </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!

05.01.2006, 12:44
Gast Beiträge: n/a	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!