nicht angemeldet
Hallo zusammen,
ich verwende (ein wohl bekanntes) DIV-Konstrukt zur Darstellung von Header, Menu, Content und Footer.
Darstellung in IE, NS, Mozilla, Firefox perfekt, nur Opera (7.23) macht mir hier probleme, er zeigt den Footer - also den unteren DIV-Container - nicht an.
Ich suche dazu schon längere Zeit nach ner Lösung, bin aber bis jetzt noch nicht fündig geworden.
Vielleicht sehe ich auch den Bug vor lauter Bäumen nicht...
Könnte jemand von Euch mal einen Blick auf den Code werfen, vielleicht isses ganz einfach...?
Quellcode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DIV-Konstrukt</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
position:absolute;
background:#FFFFFF;
}
html, body {
top:0px;
left:0px;
right:0px;
min-height:100%;
margin:0px;
padding:0px;
width:100%;
}
#header_container {
position:fixed;
top:0px;
left:0px;
right:0px;
text-align:center;
margin:0px;
height:3em;
z-index:3;
}
#header {
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
height:100%;
background:navy;
z-index:3;
margin:0px;
padding:0.2em;
}
#menu {
position:fixed;
top:4em;
left:0.5em;
width:9em;
border: 3px dotted #dedede;
padding:0.5em;
}
#content {
margin:0px;
padding-top:4em;
padding-left:15em;
padding-bottom:3em;
z-index:2;
}
#footer_container {
position:fixed;
bottom:0px;
left:0px;
right:0px;
text-align:center;
margin:0px;
height:2em;
z-index:3;
}
#footer {
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
background:navy;
z-index:3;
}
/* Nur für den MSIE */
* html, * html body {
overflow:hidden;
bottom:0px;
height:100%;
}
* html #header_container, * html #footer_container {
position:absolute;
width:100%;
padding-right:16px;
}
* html #menu {
position:absolute;
}
* html #header,* html #footer {
height:100%;
position:static;
}
* html #content {
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
height:100%;
width:100%;
overflow:auto;
margin:0px;
}
/* Weiter mit browserübergreifenden Deklarationen */
#menu li {
list-style: none;
margin:0px;
padding:0.3em;
}
#menu li#active {
padding:0.5em;
text-decoration:underline;
}
#menu a:link, #menu a:visited {
display:block;
background:#EEEEEE;
color:black;
text-decoration:none;
margin:0px;
padding:0.2em;;
}
#menu a:hover {
background:#4f4f4f;
color:#FFFFFF;
text-decoration:underline;
}
/* Der IE soll das Element breiter darstellen, da margin
und padding hier von der Breite abgezogen werden! */
* html #menu {
margin:0px;
width:10.5em;
}
</style>
</head>
<body>
<div id="header_container">
<p id="header"><font color="#CCCCCC" size="5"><b>CSS-Seitenkonstrukt mit Header,
Menü und Footer!</b></font></p>
</div>
<div id="menu">
<p><font color="#000066" size="3"><b>Menue</b></font></p>
<a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link
4</a>
</div>
<div id="content">
<p>Hier ist der Inhalt!</p>
</div>
<div id="footer_container">
<div id="footer">
<p><b><font color="#CCCCCC" size="3">Und hier ist der Footer!</font></b></p>
</div>
</div>
</body>
</html>
Vielen Dank für Eure Mühe schon mal vorab!
Gruss,
Lkwjoe