nicht angemeldet
Ich habe ein Webseitenlayout mit <div> Elementen erstellt(ist noch in der Entwicklungsphase).
Im oberen Element habe ich eine (Banner)Grafik. Es bleibt aber ein kleiner Streifen unter
der Grafik zum Elementen Rand hin frei. margin, padding sind schon auf 0, trotzdem bbleibt
dieses freie Stück. Habe es bis jetzt Nur wegbekommen wenn ich die Grafik als Hintergund
für dieses Elemnt definiert habe.
Woran liegt das Problem?
<head>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
#banner {
background-color:#00CC33;
padding: 0px;
width: 913px;
height: 150px;
clear: none;
float: none;
margin: 0px;
text-decoration: none;
left: auto;
top: auto;
right: auto;
bottom: auto;
clip: rect(auto,auto,auto,auto);
}
.main {
position: relative;
margin : auto;
min-height : 300px;
width : 58.1em;
background-color : #ffffff;
}
#navi {
float : left;
width: 10em;
height: 50em;
}
#navi ul{
padding: 0;
margin: 0em 0em 0em 0em;
list-style-type: none;
}
#navi ul li {
padding: 0em 0em 0em 3.3em;
}
#inhalt {
float : left;
width: 40em;
height: 50em;
margin : auto;
padding-left: 3em;
padding-right: 3em;
}
#info {
float: right;
width: 8em;
height: 50em;
}
div {border: 1px solid red} <!-- Zur besseren Übersicht -->
</style>
</head>
<body>
<div id="banner">
<img src="bild.jpg" width="913" height="150" alt="">
</div>
<div class="main">
<div id="navi">
<img src="bild2.jpg" width="141" height="75" alt="">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">usw</a></li>
</ul>
</div>
<div id="inhalt">
<p>
Hier schreibe ich mal etwas Inhalt.
</p>
</div>
<div id="info">
Info
</div>
</div>
</body>
</html>