Image im footer
Ich bin gerade dabei eine Webseite für eine Freundin zubasteln. Wie bekomme ich das hin, dass das Hintergrundbild im footer mit 100% Breite ist und ich weitere div’s drüber sind. Wenn ich jetzt momentan ein weiteres div im footer anlege, wird es entweder oberhalb oder unterhalb der Image angelegt. Vielleicht hat jemand ein Tipp?
LG Rogér
Ich bin gerade dabei eine Webseite für eine Freundin zubasteln. Wie bekomme ich das hin, dass das Hintergrundbild im footer mit 100% Breite ist und ich weitere div’s drüber sind. Wenn ich jetzt momentan ein weiteres div im footer anlege, wird es entweder oberhalb oder unterhalb der Image angelegt. Vielleicht hat jemand ein Tipp?
LG Rogér
HTML:
<div id="footer">
<img src="hp-bilder/footerback.png" alt="" width="100%" height="162" border="0" />
</div>
Code:
* {
margin : 0;
padding : 0;
}
body, html {
line-height: 1em;
background-color: #f9f0eb;
background-image: url(../hp-bilder/bodyback.png);
background-repeat: repeat;
background-position: left top;
text-align: center;
width: 100%;
height: 100%;
margin: 0; padding: 0;
}
/***Schrift***/
p {
color: #191919;
font-size: 1em;
font-family: georgia, serif;
line-height: 1.2em;
text-align: left;
word-spacing: normal;
letter-spacing: 0;
margin: 0;
padding: 10px 0 0;
}
/***alles***/
#alles {
background-image: url(../hp-bilder/schein.png);
background-repeat: repeat-x;
background-attachment: scroll;
background-position: left top;
min-height: 100%;
height: auto !important;
height: 100%;
width: 100%;
margin-bottom: -162px;
padding: 0;
}
/***inhalt***/
#main {
position: relative;
width: 920px;
height: auto!important;
height:100%; /* IE6: treaded as min-height*/
z-index: 1;
min-height: 100%;
margin: 0 auto 0;
padding: 0;
}
#header {
background-image: url(../hp-bilder/headback.png);
background-repeat: no-repeat;
background-position: right top;
position: relative;
width: 920px;
height: 276px;
z-index: 2;
margin: 0 auto;
padding: 0;
}
#ct {
position: relative;
width: 920px;
height: auto;
z-index: 2;
margin: 0 auto;
padding: 0;
}
#footer {
position: relative;
width: 100%;
height: 162px;
z-index: 2;
clear: both;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding: 0;
}
#sidebar {
width: 210px;
height: 100%;
float: left;
padding: 0;
}
#content{
width: 690px;
height: 100%;
float: right;
padding: 0;
}
.cinner{
width: 670px;
height: auto;
float: left;
margin-top: 20px;
padding: 0;
}
/***claer***/
div.clear {
clear : both;
height : 0;
font-size : 0;
margin : 0;
padding : 0;
}
.clearleft {
clear : left;
height : 0;
font-size : 0;
margin : 0;
padding : 0;
}
.clearright {
clear : right;
height : 0;
font-size : 0;
margin : 0;
padding : 0;
}
