nicht angemeldet
<div> Element kann nicht genau an Grafik angepasst werden
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>
-
hi,
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?An dem Platz, der für die Unterlängen eines eventuellen Textinhaltes des Divs reserviert wird.
vertical-align:bottom oder display:block für das Bild schaffen Abhilfe.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Wunderbar. Genau das war es.
Danke :-)
-