What type of css is used to achieve this sort of result?
Could some one please tell me what type of css is used to achieve this sort result.
What I am after is on this link. http://osc4.template-help.com开发者_如何学运维/wt_32912/
Example when you press Ctrl-- the header with the black and grey shade seems to stay in position just decreases in size and the rest of the stuff goes to the center. What I am able to do with a simple wrapper is everything decreases in size and then there is some white space on the left and the header also comes to the center. How is this achieved on the link provided? Any tips would be appreciated.
you have to set the width of the div containing the grey-black element 100%, but you have to center the header element. When you have that 100% set up, it can stretch out as much you want as possible. Also dont forget to put right:0; as well. Actually it would help you a lot if you just take a look at their .css file..
This is how the site in question has been made:
HTML:
<body>
<div class="tail-top">
<div class="tail-top1">
<div class="tail-bottom">
<div class="main">
</div>
</div>
</div>
</div>
</body>
CSS:
.tail-top {
background: url("images/bg.gif") repeat-x scroll center top #FFFFFF;
}
.tail-top1 {
background: url("images/top.jpg") no-repeat scroll center top transparent;
}
.tail-bottom {
background: url("images/bot.gif") repeat-x scroll center bottom transparent;
}
.main {
margin: 0 auto;
text-align: left;
width: 979px;
}
Basically the idea is that the header and footer bars repeat for the whole screen's width using background-image with repeat-x and the content area is on top of them and has margin: 0 auto and some width to set it in middle of the page acting as a wrapper.
加载中,请稍侯......
精彩评论