✔ DIV wird nicht angezeigt

Status
Nicht offen für weitere Antworten.
T

Tix

Erfahrenes Mitglied
Hallo zusammen,

hier ist mein Quelltext:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
</head>

<body style="background-color:#E9EEF4; margin:0px;">
<div style="width:925px; margin:0 auto; position:relative;">

<div style="background-image:url(images/background/background.gif); position:absolute; left:0px; top:114px; border:none; width:925px; background-repeat:repeat-y;">
<br />
<br /><br /><br /><br /><br /><br />test
test
</div>
<div style="position:absolute; top:0px;"><img src="images/background/header.gif" border="0" alt="Header" /><img src="images/background/funny.gif" alt="Funny" width="139" height="86" border="0" /><img src="images/background/shocker.gif" alt="Shocker" width="139" height="86" border="0" /><img src="images/background/sexy.gif" alt="Sexy" width="139" height="86" border="0" /><img src="images/background/other.gif" alt="Other" width="167" height="86" border="0" /></div>
<div style="position:absolute; top:86px; height:28px; width:925px; background-image:url(images/background/header_bottom.gif);">&nbsp;</div>
<div style="position:absolute; bottom:0px; height:40px; width:925px; background-image:url(images/background/footer.gif);">&nbsp;</div>
</div>
</body>
</html>

Und hier ist die ganze Sache zu sehen.

http://www.bloemker.info/test.html

Warum wird der unterste DIV (mit footer.gif) nicht angezeigt?
 
Hi,

da die DIVs innerhalb des Elternelements absolut positioniert sind, benötigt es auch eine Höhenangabe, um den Footer darzustellen.
 
Zum Beispiel so, indem du auf die absoluten Positionsangaben verzichtest und stattdessen die DIVs einfach in ihrer chronologischen Reihenfolge im Quellcode notierst:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>

</head>
<body style="background-color:#E9EEF4; margin:0px;">

<div style="width:925px; margin:0 auto; position:relative;">
     <div><img src="http://www.bloemker.info/images/background/header.gif" border="0" alt="Header" /><img src="http://www.bloemker.info/images/background/funny.gif" alt="Funny" width="139" height="86" border="0" /><img src="http://www.bloemker.info/images/background/shocker.gif" alt="Shocker" width="139" height="86" border="0" /><img src="http://www.bloemker.info/images/background/sexy.gif" alt="Sexy" width="139" height="86" border="0" /><img src="http://www.bloemker.info/images/background/other.gif" alt="Other" width="167" height="86" border="0" /></div>
     <div style="height:28px; width:925px; background-image:url(http://www.bloemker.info/images/background/header_bottom.gif);"></div>
     <div style="background-image:url(http://www.bloemker.info/images/background/background.gif); border:none; width:865px; background-repeat:repeat-y; padding:0 30px"><br /><br /><br/><br /><br /><br /><br />test test</div>
     <div style="height:40px; width:925px; background-image:url(http://www.bloemker.info/images/background/footer.gif);"></div>
</div>

</body>
</html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück