PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Divs: Verschachtelung

tomtom
2005-08-20, 13:41:52
Hi Leute!

Hab grad ein Problem, weiß aber nicht, wie ich das am Besten löse;
Ich hab auf meiner Seite ein Div, das eine bestimmte Breite hat. Die Höhe beträgt 100%. Weiters hat dieses Div eine bestimmte Hintergrundfarbe. Nun ist in diesem Div auf einer bestimmten Position ein weiteres Div posititioniert. Überragt dieses div allerdings die maximale höhe des Elterndivs, wird die Hintergrundfarbe des Elterndivs nicht mehr angezeigt - also die maximale Höhe des Elterndivs nicht mehr nachberechnet.

Hab da mal ne kleine Grafik zur Veranschaulichung gemacht:
So ist es momentan, sollte es aber nicht sein:
http://www.w3fx.de/stuff/divs.GIF

Und so sollte es aussehen, funktioniert aber atm nicht so:
http://www.w3fx.de/stuff/divs2.GIF

Hier der Code aus dem Stylesheet:

div.main {position: absolute; top: 0px; left: 0px; width: 940px; height: 100%; background-color: #F9F9F9; z-index: 8;}
div.maincontent1 {position: absolute; top: 212px; left: 40px; width: 425px; z-index: 10; border-top: 1px solid #82766D;}


main ist das Elterndiv.

Hoffe, ihr versteht so einigermaßen was ich meine!
Danke schon mal...!

MfG, terminator2k3
Gast
2005-08-20, 14:00:54
Firefox?

Versuch mal die height Angabe in main zu löschen
Gil-galad
2005-08-20, 15:59:55
...
Wenn Du height=100% bei div einsetzt, dann wird das div so hoch wie das Browserfenster groß ist.
tomtom
2005-08-20, 16:11:56
Hmm...ok...an das hab ich nicht gedacht...dachte, dass das Div so groß wird, wie der benötigte Platz auf der Seite...nicht nur bis zum Rand des Browserfensters...

Gibts da dann ne andere Lösung, oder muss ich auf eine Tabelle zurückgreifen?

Danke!
MfG
Gil-galad
2005-08-20, 16:36:56
...
So? (http://www.amd-insight.de/misc/terminator/)
z3ck3
2005-08-20, 18:48:09
ich würd sagen das es daran liegt: position: absolute;
z3ck3
2005-08-20, 19:00:17
<html>
<head>
<title></title>
<meta name="author" content="z3ck3">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<style type="text/css">
<!--
div.main { width:940px; background-color:#CCCCCC; }
div.maincontent1 { margin-top:212px; margin-left:40px; width:425px; background-color:#DDDDDD; }
body { margin:0px; padding:0px; }
-->
</style>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<div class="main">div1
<div class="maincontent1">div2<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
</div>
</body>
</html>


so gehts bei beiden. Doch wenn du beim mozilla da height:100%; bei div.main hinzufügst, dann hast du wieder das alte problem.
tomtom
2005-08-21, 12:24:02
Danke für die Antworten...werds gleich mal ausprobieren :up:

MfG
Kinman
2005-08-21, 18:27:25
hast min-height schon probiert, so wie ich dir gesagt habe?

mfg Kinman
tomtom
2005-08-22, 00:04:23
Das mit dem min-height hat leider genau dasselbe verursacht wie meine frühere Variante!...trotzdem danke!

Habe dann z3ck3's Version ausprobiert - haut hin! Vielen Dank!

MfG