• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Hintergrund eines Div-Containers wird trotz Inhalt nicht angezeigt

Status
Für weitere Antworten geschlossen.
D

dreamstate

Neues Mitglied
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:

Code: 
#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:

Code: 
/* ==================================================== */
#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"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 STRICT//EN" "html-dtd/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>dummy</title>
    <link rel="stylesheet" type="text/css" href="layout.css" />
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
    <div id="layout">
        <div id="top"></div>
        
        <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>
</body>

</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
 
Werbung:
Code: 
url(./background.png);
ansonsten Pfad überprüfen.
der fehler ist oft, dass die stylesheet-datei in einem ordner ist, das hieße:
url(../background.png);
 
=]ReDHeaD[= schrieb:
Code: 
url(./background.png);
ansonsten Pfad überprüfen.
der fehler ist oft, dass die stylesheet-datei in einem ordner ist, das hieße:
url(../background.png);[/quote]
Die Pfadangabe stimmt, das habe ich schon ausprobiert...

Das Bild wird auch angezeigt, sobald ich in #layout eine "Height"-Angabe schreibe, irgendeinen absoluten Wert. Sobald ich diese aber wieder rausnehme (da ich ja nicht weiß, wie hoch das Element letztendlich werden soll, es soll sich ja am Inhalt orientieren), verschwindet das Hintergrundbild wieder.
Zum Vergrößern anklicken....
 
Werbung:
Für mich stellt sich ja auch nur die Frage, warum die Box nicht da ist, schließlich hat sie Unterelemente, in denen sich Inhalt befindet und deren Größe teilweise fest definiert ist. Warum erhält dann das Mutterelement keine Höhe?
 
Werbung:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben