问题描述:

I am trying to do a site that has a header and menu on top that is 2 colored backgrounds that spreads the entire width of the screen regardless of the monitor resolution, however i want the content itself Logo, menu items, etc. to be centered and no width more than 1024 pixels with the same colored backgrounds of course so it appears as a solid 2 lines of content. under that will be white space and the content of that I wish to be 1024 pixels centered too. i am unsure of how to accomplish this as if my div goes 100% the inner div wont center fixed. i know this is basic but I have not mastered css yet and am trying to avoid tables i am including a pic in case the way im explaining makes no sense. dont want the lines want it to appear as solid colors through out. any help would be greatly appreciated. http://i.stack.imgur.com/yUc70.png

网友答案:

Try this fiddle:

jsfiddle.net/P9jg6/2/

For full screen output:

jsfiddle.net/P9jg6/2/show/

网友答案:

You can use several nested divs. The outer one providing the background and color for the whole width, and the inner one providing the content, width, and centering

<div class="header">
    <div class="content">Header</div>
</div>
<div class="menu">
    <div class="content">Menu</div>
</div>
<div class="main">
    <div class="content">Content</div>
</div>
.content {
    max-width: 300px;
    margin: 0 auto;
    padding: 5px;
}
.header {
    background-color: olive;
    color: darkred;
}
.header .content {
    border-left: 2px solid darkred;
    border-right: 2px solid darkred;
}
/* same for menu, main */

Full JSFiddle

Update:

To remove the white space around the web page, you must remove the margin

body {
    margin: 0;
}

Modified JSFiddle

网友答案:

I'd rather used :before and :after pseudoclasses as two backgrounds positioned absolutely.

eg:

body{}
body::before{ content: ''; position: absolute; left: 0; right: 0; top: 0; height: 30px; background: #F00; }
body::after{ content: ''; position: absolute; left: 0; right: 0; top: 30px; height: 10px; background: #0F0; }

Of course it won't work if you need variable height of those stripes. Then you have to create stripes with wrappers inside (stripe = background, wrapper = centered content).

相关阅读:
Top