Css div with header and footer and dynamic content height
I want to construct a div that has a header with background like that
some content with a background of one pixel repeated at y(or not?)
and a footer with background like that
resulting in something like that with some text in the div content(Correct result)
I want to have the same result with 5 lines or 50 lines of text.
Right now i have this HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<div id="header"></div>
<div id="content">Text goes here
</div>
<div id="footer"></div>
</body>
</html>
and this CSS
#header {
width: 959px;
height: 169px;
margin:0 auto;
padding:0;
background: url(header.jpg);
}
#content {
width: 959px;
margin:0 auto;
background: url(content.jpg);
color: white;
}
#footer {
width: 959px;
height: 158px;
margin:0 auto;
padding:0;
background: url(footer.jpg);
}
resulting in this(Wrong result)
I hope i demonstrated the problem clea开发者_运维技巧rly Cheers
Could you try that ?
HTML:
<div id="container_outer">
<div id="container_inner">
<div id="content">
Your text goes here
</div>
</div>
</div>
And the CSS:
#container_outer {
background:url(images/body.png) repeat-y center center;
}
#container_inner {
background:url(images/footer.png) no-repeat center bottom;
padding-bottom:10px;
}
#content {
background:url(images/header.png) no-repeat center top;
padding-top:10px;
}
you could add a negative margin to the #header and #content to pull the #content up over the header and the #footer up under the #content
#header{
margin-bottom:-169px;
}
#content{
margin-bottom:-158px;
}
the only problem is what happens with not much content the footer will be pulled up into the header but you can use the min-height on the #content to stop this here is a jsfiddle of it http://jsfiddle.net/s295h/1/
#header {
margin:0 auto;
padding:0;
background: url(images/header.png);
}
#content {
margin:0 auto;
padding:0;
background: url(images/body.png);
}
#footer {
margin:0 auto;
padding:0;
background: url(images/footer.png);
}
Just give the #content element also a background-image with repeat-y which contains just the middle part of the image.
#content {
background: url(images/body.png) repeat-y;
}
#content p{
padding:10px;
width:939px;
}
add this to the css and write the text inside the content div within the
tags.eg:
<div id="content"><p>content here</p></div>
加载中,请稍侯......
精彩评论