selle1
Erfahrenes Mitglied
Hallo zusammen,
ich möchte ein Layout erstellen, bei dem der Header und Footer feststehen und der Mittelteil je nach Größe scrollbar sein soll. Ich habe etwas gegoogelt und habe bisher folgendes Ergebnis. Bin aber noch nicht 100%ig zufrieden. Gibt es bessere Lösungen?
Gruss
ich möchte ein Layout erstellen, bei dem der Header und Footer feststehen und der Mittelteil je nach Größe scrollbar sein soll. Ich habe etwas gegoogelt und habe bisher folgendes Ergebnis. Bin aber noch nicht 100%ig zufrieden. Gibt es bessere Lösungen?
Gruss
PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Feststehende Kopf- und Fußzeile</title>
<style type="text/css">
body {
position:absolute;
background:#ffffff;
}
html, body {
top:0; left:0; right:0;
min-height:100%;
margin:0;
padding:0;
width:100%;
}
#header_container {
position:fixed;
top:0;
left:0;
right:0;
text-align:center;
margin:0;
height:200px;
z-index:3;
background-image: url(pics/bg-top2.gif);
}
#header {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
height:100%;
z-index:3;
margin:0;
padding: 0;
background-image: url(pics/bg-top2.gif);
}
#menu {
position:fixed;
top:210px;
left:.5em;
width:9em;
border: 3px dotted #dedede;
padding:.5em;
}
#content {
margin:0;
padding-top:4.85em;
padding-left:12em;
padding-bottom:3em;
z-index:4;
}
#footer_container {
position:fixed;
bottom:0; left:0; right:0;
text-align:center;
margin:0;
height:2em;
z-index:5;
}
#footer {
position:absolute;
top:0; left:0; right:0; bottom:0;
background:#efefef;
z-index:3;
}
/* Nun für den MSIE */
* html, * html body {
overflow:hidden;
bottom:0;
height:100%;
}
* html #header_container, * html #footer_container {
position:absolute;
width:900px;
padding-right:0px;
}
* html #menu {
position:absolute;
}
* html #header,* html #footer {
height:100%;
position:static;
}
* html #content {
position:absolute;
top:200px; bottom:0; left:0; right:0;
height:100%;
width:100%;
overflow:auto;
margin:0;
}
#menu li {
list-style: none;
margin:0;
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:0;
padding:0.2em;;
}
#menu a:hover {
background:#4f4f4f;
color:#ffffff;
text-decoration:underline;
}
* html #menu {
margin:0;
width:10.5em;
/* Der IE soll das Element breiter darstellen, da margin und padding hier von
der Breite abgezogen wird! */
}
</style>
</head>
<body>
<div id="header_container">
<h1 id="header"> </h1>
</div>
<ul id="menu">
<li><a href="beispiel1.htm">Einfacher Footer</a></li>
<li><a href="beispiel2.htm">Feststehender Footer</a></li>
<li><a href="beispiel3.htm">Feststehender Footer für den Internet Explorer</a></li>
<li><a href="beispiel4.htm">Kombination: Ein Footer für alle</a></li>
<li><a href="beispiel5.htm">Feststehende Kopf- und Fußzeile</a></li>
<li id="active">Alternative Positionierung, feste Navigation</li>
<li><a href="index.htm#fixierte_navigation_bsp">Zum Artikel</a></li>
</ul>
<div id="content">
<p>w</p>
<p>w</p>
<p>w</p>
<p>w</p>
<p>w</p>
<p>w</p>
<p>w</p>
<p>w</p>
<p>w</p>
<p>w</p>
<p>w</p>
<p>w</p>
<p>w</p>
<p>w</p>
<p>w</p>
<p>w</p>
<p>w</p>
<p>w</p>
<p>w</p>
<p>w</p>
<p>w</p>
<p>w</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="footer_container">
<div id="footer">
<b>Und hier ist der endgültige Footer!</b>
</div>
</div>
</body>
</html>
