Hi,
ich habe ein Problem mit meinem Layout.
Die Page ist ein einem Header- ,Content- und einem Footerbereich aufgeteil.
Der header und footer sind richtig im Browser plaziert aber in meinem Contentbereich hab ich eine Hintergrundgrafik welche sich komplett zwischen den header und footer per repeat-y;
ausspannen soll, unanbhängig davon wieviel text ich im meinem Content bereich habe.
Hab es mal nachskizziert.
Also so solls aussehen. -link-
Und so siehts bei mir aus: -link-
Die BgGrafik richtet sich nur so weit aus wieviel ich an text habe.
Code
html, body {
height:100%;
}
body {
margin:0;
padding:0;
background-color:white;
}
#container {
position:relative;
min-height:100%;
height:100%;
voice-family:"\"}\"";
voice-family:inherit;
height:auto;
}
html>body #container {
height:auto;
}
#header {
height:49px;
background-color:#1dce00;
}
#headerbox{
background:URL(css/header.jpg);
width:498px;
height:49px;
margin:0 auto;
}
#main{
margin:0 auto;
width:498px;
}
#mainbox {
padding-bottom:1px;
width:498px;
background:URL(css/lines.jpg) repeat-y;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:38px;
background-color:#1dce00;
}
#footerbox{
margin:0 auto;
background:URL(css/footer.jpg);
width:498px;
height:38px;
}
...
<div id="container">
<div id="header"><div id="headerbox"></div></div>
<div id="main"><div id="mainbox">BlaBlaBlaBla
BlaBlaBlaBla</p>BlaBlaBlaBla
BlaBlaBlaBla</p></div></div>
<div id="footer"><div id="footerbox"></div></div>
</div>Ist mein Vorhaben überhaupt möglich? Wäre über jeden Tip sehr dankbar.
Gruß