Hi,
ich habe ein Problem, dessen Lösung mir einfach nicht einfallen will.
Ich habe einen div-Container, der zur Zentrierung der gesamten Homepage dient, und außerdem das Hintergrundbild für den Inhalt umfasst, folgendermaßen definiert:
#layout
{
position: relative;
left: 50%;
width: 730px;
margin: 0 auto 0 auto;
margin-left: -365px;
background-image: url(background.png);
}
Nun habe ich verschieden andere div-Container in diesem Layout-Container, die zur Positionierung der einzelnen Elemente und Aufnahme des eigentlichen Inhalts dienen:
/* ==================================================== */
#top
{
position: absolute;
left: 15px;
width: 700px;
height: 150px;
z-index: 1;
}
/* ==================================================== */
#main
{
position: absolute;
left: 15px;
top: 150px;
width: 700px;
z-index: 1;
}
/* ==================================================== */
usw...
Der Quelltext der Seite sieht grob wie folgt aus:
[html]<?xml version="1.0" encoding="UTF-8"?>
dummy <div id="navigation">
<ul id="nav">
<li class="first"><a href="#">news / blog</a></li>
<li><a href="#">about</a></li>
</ul>
</div>
<div id="main">
<div id="pos">
» home \ blablubb \ nooooet
</div>
<div>
ZORT
</div>
</div>
</div>
[/html]
Das Problem liegt jetzt darin, dass das Hintergrundbild des "Layout" Containers einfach nicht angezeigt wird, sobald ich eine -zeitweise für Testztwecke- definierte "height" wieder aus dem CSS-Code herausnehme.
Anscheinend hat der Layout-Container keine Höhe (denn sonst müsste er das Hintergrundbild wohl anzeigen), aber ich kann mir nicht erklären, woran das liegt, da doch alle anderen divs Unterelemte dieses Containers sind, und auch mit dem obligatorischen "position: absolute" ausgestattet wurden.
Ich weiß nicht mehr weiter, vllt fällt einem von euch ja eine Lösung für das Problem ein, ich würde nur ungerne wieder ganz von vorne anfangen müssen, um dieses Problem zu umgehen
Vielen Dank!
Grüße
dreamstate