Верстка шапки

[re100]

Всем привет. Такая вот задачка...

Нужно сверстать шапку сайта следующим образом:
Есть 3 изображения. Первое "липнет" к левому краю, второе к правому. Третье в левой части страницы, перекрывает частично первое изображение. По центру блок поиска, под ним еще один блок для телефонов и контактных данных. Проблема в том, как расположить это в дивах, чтобы они не сползали и не выстраивались в колонку... схему шапки прикрепил. пока так:

<div id="header">
 
 
<div id="logo2" style="float: left"><style="float:left"></style="float:left"></div>
<div id="logo4" style="float: rifht"><style="float:right"></style="float:right"></div>
<div id="logo3" style="float: none"><style="float:none; margin-top:20px"=""></style="float:none;></div>
 
  
</div>

#header {
position: absolute;
width: 100%;
min-width: 1000px;
height: 300px;
background: #FFFFFF repeat-x left top;
display:inline-block;
}
#logo2 {
width:50%;
height: 100%;
margin: 0px auto;
background: url('../../_mod_files/ce_images/header-kp.png') no-repeat;
background-position:left;
float:left;
display:inline;
z-index:10;
}
#logo3 {
width:100%;
height: 100%;
margin: 0px auto;
background: url('../../_mod_files/ce_images/strojmag-fon.png') no-repeat;
background-position:center;
z-index:50;
margin: -95px;
}
#logo4 {
width: 29%;
height: 100%;
margin: 10px auto;
background: url('../../_mod_files/ce_images/header4.png') no-repeat;
float:right;
display:inline;
background-position:right;
z-index:0;

 

[BaNru]

Тут три варианта поиска решения (сейчас пришло только три в голову)
1) использовать позитион абсолют или релактив не только для хедера, но и для других блоков
2) так же можно опробовать воспользоваться overflow:hidden, что б блоки не падали
3) лучше идти в ногу со временем, забив на IE, и сделать множественный фон

 

[re100]

Все же забить на иэ нету никакой возможности, а первые 2 буду пробывать, спасибо

 

[lekzd]

множественный фон

Достигается путем вложения дивов с разным фоном друг в друга, дружит с ИЕ

 

[BaNru]

Ну так данная верстка, которая представлена выше и подразумевает работу в этом направление.
Боле подробно выглядит так.
Раз у нас уже все работает на позитион абсолют, то не составляет труда сделать слоями:

<div ставимт тут в стиля фон по левому краю (хотя можно все наоборот, смысл не меняется :-))><div тут делаем фон, но плог флоатим вправо></div></div>
<div header>ставим  тут три блока с position: relactive</div>

Первый див и хедер должны иметь одни и те же размеры, и позиции (top / left), но разный z-index.
По умолчанию они будут правильны раставлены, если делать в том порядке, что я показал, но первый див можно поставить в конец документа, нарушив семантику, но при это расчистить путь к контенту поисковикам.

 

[re100]

[member=BaNru], Получилось, но ИЕ все искажает. Можно что-то с этим сделать?

 

[BaNru]

что именно искажает? страницу в студию

 

[re100]

Не отображаются блоки header, которые по центру.
http://strojmag.ua
зы. Уже здорово помогли, спасибо!

Можно ли заставть ИЕ отображать как-нибудь остальные блоки?

 

[re100]

Люди, помогите с данным вопросом, очень нужно!

 

[tigra60]

Они отображаются, только немножко справа.

Как там Тёма говорит в таких случаях? "Так верстают только м..."

У вас блок id="logo2" style="float:left" шириной 100%, а за ним блок id="header", тоже шириной 100%, абсолютного позиционирования, плавающий влево.

Браузер получил четкую команду: "Стой там - иди сюда!"

В хроме, например, получилось 200% ширины с полосой прокрутки и два блока рядом.

#header {
position: absolute;
....
display:inline-block;
float:left;
}

Сочетание просто супер! Так держать!

Имеете то, что имеете. Вам бы только ИЕ ругать.

Ах, да, простите, не сказал, что же делать?
Учить блоковую модель CSS и семантические способы верстки. (гуглить самостоятельно).

 

[re100]

Спасибо, что указал на ошибку. Теперь отображается правильно.