Frage stellen
in einem <div>Container bekomme ich es einfach nicht hin, dass ein Background-Image OHNE explizite Höhenangabe angezeigt wird.
Die CSS-Angaben sehen wie folgt aus:
- Code: Alles auswählen
body {
font: 78.5% "Lucida Sans Unicode", verdana, helvetica, sans-serif;
line-height: 130%;
color: #ffffff;
}
#top {
width: 100%;
min-width: 960px;
height: 59px;
background: url(../images/frame_top4.png) repeat-x left top;
}
#center {
background: url(../images/blackboard3.jpg) center top;
width: 100%;
}
#container {
margin: 0 auto;
width:960px;
}
#left {
float: left;
width: 580px;
}
#right {
float: right;
width: 380px;
}
#footer {
clear: both;
background: url(../images/border_bottom2.png) left top repeat-x;
width: 100%;
min-width: 960px;
height: 200px;
}
#footer_container {
margin: 70px auto;
width:960px;
}
Das Problem liegt im #center. Dieser stellt den Inhaltsbereich dar und soll das HG-Bild beinhalten. Leider wird das Bild nur angezeigt, sofern ich eine Höhendeklaration (height: xy px) hinzufüge. Da das Ganze als Layout für verschiedene Seiten innerhalb einer Site (mit mal mehr mal weniger Inhalt je Seite)fungieren soll, ist dies keine Lösung.
Was mache ich falsch?
Hier noch der XHTML-Code:
- Code: Alles auswählen
<title>Hier komt der Titel hin</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/avdstyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="top"></div>
<div id="center">
<div id="container">
<div id="left">
<h1 class="news">Neuigkeiten</h1>
<p class="headline">Erstes Planungstreffen am 27.02.10</p>
<p class="post">eingestellt am 20.02.2010</p>
<p class="newstext">Jede Menge Text, usw.
</div>
<div id="right">
<ul><li><a href="#">Startseite</a></li>
<li><a href="#">Über uns</a></li>
<li><a href="index_fa.html">Fotoalbum</a></li>
<li><a href="#">Downloads</a></li>
</ul>
<h1 class="welcome">Willkommen</h1>
<p>Nochmal jede Menge Text.</p>
</div>
</div>
</div>
<div id="footer">
<div id="footer_container">Copyright © 2010<br />
<a href="#">Startseite</a>|<a href="#">Impressum</a>|<a href="#">Nach oben</a>
</div>
</div>
</body>
</html>
