Создать стиль 960px с двумя сплошными полосами, которые составляют 100% ширины страницы?

Question

Я пытаюсь создать стиль WordPress для сайта проекта, над которым я работаю.Я опытный дизайнер, но есть концепция, которую я не могу понять.Я бы хотел иметь ширину сайта в 960 пикселей, но иметь две полосы вверху.Вы можете видеть то, что я имею в виду на картинке ниже.

http://i.stack.imgur.com/pSShB.png

Я действительно хочу иметь возможность использовать синюю полосу в качестве системы меню и держать весь контент в пределах основного 960pxобщая ширинаИзображение логотипа должно начинаться в самом начале начала контента (где начинается 960 пикселей).Изображение просто макет, но я хочу, чтобы мои пользователи могли его видеть.Я хочу, чтобы весь сайт можно было масштабировать так, чтобы он выглядел одинаково на мониторе любого размера.

Я пытался найти решение, позволяющее сделать это эффективно весь день, но не смог придуматьчто-нибудь.

У кого-нибудь есть идеи для меня?Что-то, что будет работать во всех браузерах?

Answer 1

что-то вроде этого должно начать вас.

http://jsfiddle.net/pxfunc/DxW47/1/

css:

body {background:#eee url('http://files.me.com/pwb3/lo1t09') repeat 0 0;margin:0;padding:0;}

#greenBg {background:#00cb00;height:50px;width:50%;top:40px;right:50%;position:absolute;}
#blueBg {background:#00b8de;height:50px;width:50%;top:40px;left:50%;position:absolute;}

.clear {clear:both;}

#container {width:960px;margin:40px auto 0 auto;position:relative;}
#header {background-color:#00cb00;width:220px;float:left;padding:15px;}
#nav {background-color:#00b8de;width:678px;border-left:solid 2px #fff;float:left;padding:15px;}

#content {margin-top:10px;border:solid 1px #ddd;background-color:#fff;padding:15px;height:400px;}

html:

<div id="greenBg"></div>
<div id="blueBg"></div>

<div id="container">
    <div id="header">
        <span>site logo</span>
    </div>
    <div id="nav">nav</div>
    <br class="clear" />
    <div id="content">content</div>
</div>

Answer 2

Вы должны создать относительный контейнер, а внутри - в абсолютных контейнерах что-то вроде этого:

<div id="header_struct">
 <div id="green_area">{logo goes here float it right or something}</div>
 <div id="blue_area">{menu structure goes here, float left or something}</div>
</div>

Ваш стиль:

#header_struct{
 position: relative;
 width: 960px;
}
#green_area{
 position: absolute;
 right: 700px; // makes it start 260px in from the left side
 width: 1000px; // makes it go off the left side of the screen for instance
 background-color: green;
}
#blue_area {
 position: absolute;
 left: 260px; // makes it start 260px in from the left side
 width: 1000px; // makes it go off the left side of the screen for instance
 background-color: blue;
}

По сути, вам нужны вложенные абсолютные позиционные элементы div внутри относительного контейнера #header_struct.Я не проверял это, но я помню, что делал нечто подобное.Я надеюсь, что вы начали.

Вот очищенный JSFIDDLE, который работает: http://jsfiddle.net/37Fmh/