Hallo,
irgendwie komm ich nicht weiter.
Ichhabe mir ein Layout zusammengestrickt, doch ich bekomme es nicht hin, das er die Layer automatisch auf 100% des Browser-Fensters anpasst.
wenn ich im Stylesheed html, body{ height:100%;} eingebe, ist der Layer immer um einiges Größer als 100%
Kann mir da vielleicht mal jemand einen Tip geben, was ich falsch mache?
Hier der Quellcode:
irgendwie komm ich nicht weiter.
Ichhabe mir ein Layout zusammengestrickt, doch ich bekomme es nicht hin, das er die Layer automatisch auf 100% des Browser-Fensters anpasst.
wenn ich im Stylesheed html, body{ height:100%;} eingebe, ist der Layer immer um einiges Größer als 100%
Kann mir da vielleicht mal jemand einen Tip geben, was ich falsch mache?
Hier der Quellcode:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Layout Bost-PC-Service</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html, body
{
height:100%;
width:100%;
margin:0;
padding:0;
}
body
{
margin:0%;
padding:0%;
font: 76% arial,sans-serif;
}
p
{
margin:0 10px 10px;
}
a
{
display:block;
color: #006;
}
/* HEADER */
div#container
{
min-height: 100%;
height: auto !important;
height:100%;
}
div#header
{
position:relative;
width:100%;
height:245px;
}
div#right
{
background-color:inherit;
position:relative;
width: 100%;
height:245px;
background-image: url(header_rechts.png);
background-repeat:repeat-x;
float: right;
}
div#left
{
position:relative;
width: 256px;
height:245px;
display: block;
background-image:url(header_links.gif);
background-repeat:no-repeat;
}
div#light
{
background-color:inherit;
position:absolute;
left:0px;
top:0px;
z-index:10;
width: 656px;
height:22px;
background-image: url(header_light.png);
background-repeat:no-repeat;
}
div#logo
{
background-color:white;
position:absolute;
left:65px;
top:80px;
width: 154px;
height:160px;
border:gray solid 2px;
background-image: url(logo.png);
background-repeat:no-repeat;
background-position:center center;
}
/* CONTENT */
div#content p
{
line-height:1.4;
}
div#content
{
margin-left:250px;
}
/* NAVI */
div#navi
{
background:white;
float:left;
width:230px;
text-align:right;
}
ul#Navigation
{
padding-left:65px;
margin:0px;
background-color:white;
}
#Navigation li
{
padding:0px;
margin:0px;
list-style-type: none;
font-size: 1em;
white-space: nowrap;
text-align:left;
text-transform:uppercase;
text-decoration:none;
}
ul#Navigation a
{
padding:4.5px;
padding-left:35px;
background-image: url(button.gif);
background-repeat:no-repeat;
background-position:left;
font-family:verdana, sans serif;
font-size: 0.825em;
font-weight: bold;
color: white;
}
ul#Navigation a:link
{
text-decoration:none;
}
ul#Navigation a:visited
{
color: white;
text-decoration:none;
}
ul#Navigation a:hover
{
text-decoration:underline;
font-style:bold;
}
ul#Navigation a:active
{
background-color:#999999;
text-decoration:none;
font-weight:normal;
}
/* RED_PANEL */
div#redPanel
{
background:inherit;
float:left;
clear:left;
width:230px;
height:100%;
}
div#redPanel p
{
position:relative;
margin-left:66px;
margin-right:0px;
}
div#redPanel p#oben
{
margin-top:1px;
margin-bottom:0px;
background-image: url(redPanel_oben.png);
background-repeat:no-repeat;
height:40px;
}
div#redPanel p#mitte
{
margin-top:0px;
margin-bottom:0px;
background-image: url(redPanel.png);
background-repeat:repeat-y;
height:100%;
}
div#redPanel p#unten
{
margin-top:0px;
margin-bottom:1px;
background-image: url(redPanel_unten.png);
background-repeat:no-repeat;
height:40px;
}
/* Footer */
div#footer
{
position:relative;
width:100%;
height:81px;
}
div#f_right
{
background-color:inherit;
position:relative;
width: 100%;
height:81px;
background-image: url(footer_rechts.gif);
background-repeat:repeat-x;
float: right;
}
div#f_left
{
position:relative;
width: 256px;
height:81px;
display: block;
background-image:url(footer_links.gif);
background-repeat:no-repeat;
}
div#wrapper
{
float:right;
width:100%;
margin-left:-253px;
}
div#footer
{
clear:both;
width:100%;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<DIV id="right">
<DIV id="light"></DIV>
<DIV id="left">
<DIV id="logo"></DIV>
</DIV>
</DIV>
</div>
<div id="wrapper">
<div id="content">
<p><strong>1) Content here.</strong> </p>
<table height="100px"><TR><TD>asdf</TD></TR></table>
</div>
</div>
<div id="navi">
<ul id="Navigation">
<!-- Achtung müssen ohne Zeilenumbruch hintereinander, sonst zerschiest es IE6-->
<li><a href="#">Über uns</a></li><li><a href="#">PC-Service</a></li><li><a href="#">Unterricht</a></li><li><a href="#">Notdienst</a></li><li><a href="#">Webdesign</a></li></ul>
</div>
<div id="redPanel">
<p id="oben"></p>
<p id="mitte"></p>
<p id="unten"></p>
</div>
<div id="footer">
<DIV id="f_right">
<DIV id="f_left"></DIV>
</DIV>
</div>
</div>
</body>
</html>