Помогите с хеадером

[mdss]

2 вложенных слоя сделай

<div class="header">
<div class="head-left">
<div class="head-right">
</div>
</div>
</div>

.header {
background:#393939;
height:224px;
}
.head-left {
height:224px;
background:url(images/head-left.gif) no-repeat left;
}
.head-right {
height:224px;
background:url(images/head-right.gif) no-repeat right;
}

 

[t3s]

А почему не под резину? Что в нем не так?

если вкратце, то для резины не делают жестких рисунков
бекраунд дублируют по горизонтали

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

если требуется сделать резиновой именно твою шапку, можешь воспользоваться min-width, опера/лис отреагирауют нормально
с ишаком придется поиграться - хотя именно для min-width с ишаком вариантов туева хуча

 

[whitewolff]

при разрешении 1024*768 максимальная ширина страницы 1к рх. на 1рх больше и появляется горизонтальный скролл. эта шапка в 1к рх вписывается, если левую часть обрезать скромнее, а не с огромным отступом вправо чуть ли не до середины шапки. и будет норм смотреться при ширине экрана 1024рх и выше.

 

[lolshik]

Аналогичная проблема, решил новый топик не создавать.
Делаю шапку для резиновой верстки.
Фон - тянучка 343 на 1 пиксель картинка.
Далее идут два блока. Всё в одну линую.
На блоке с галочкой хочу сделать фон (background) и картинку (img) друг на друге. Потом скрипт будет с эффектом менять одну картинку на другую.
Код делаю такой:

<div id="header">
<img src="logo.jpg"/>
<div id="eye_change"></div>
</div>
#header {
	margin:0 6px;
	height:228px;
	background: transparent url(../images/bg1.jpg) bottom left repeat-x;
}
#eye_change {
    display:inline-block;
	width: 343px;
	background: url(../images/linz_blur.jpg)  no-repeat;
}

Как лучше сделать? Пробовал по разному, то сползают блоки вниз, то просто не видно картинки.

 

[danneo]

а таблицей не судьба?

 

[lolshik]

а таблицей не судьба?

Можно наверное, но раз уж всё дивами хочется и тут ими сделать.

 

[whitewolff]

да здесь и дивами все отлично делается. щас допишу код.
rafic, тебе:

<style type="text/css">
 .div1{background: #000000 url('img.jpg') repeat-x; float: left; width: 100%; height: 200px; min-width: 800px;}
 .div2{background: url('bg_left.jpg') no-repeat; height: 200px; width: 300px; float: left;}
 .div3{background: url('bg_right.jpg') no-repeat; width: 300px; height: 200px; float: right;}
</style>
<div class="div1">
 <div class="div2">&nbsp;</div>
 <div class="div3">&nbsp;</div>
</div>

.div1 - высоту, минимальную ширину (сумму ширины левой и правой картинки в твоем случае) и фон подставиш свои
.div2, .div3 - ширину, высоту, фон приписываеш свои

lolshik, тебе:

<style type="text/css">
 .div1{background: #000000 url('img.jpg') repeat-x; float: left; width: 100%; height: 200px; min-width: 800px;}
 .div2{background: url('img2.jpg') no-repeat; width: 100%; height: 200px;}
 .div3{width: 300px; height: 200px; margin: auto;}
</style>
<div class="div1">
 <div class="div2">
  <div class="div3">&nbsp;</div>
 </div>
</div>

.div1 - заливаеш фоном-"тянучкой", размеры и фон подправиш под себя.
.div2 - ставиш картинку которая слева(не повторяющаяся), размеры правиш под себя
.div3 - ставиш фон или что тебе там угодно. для позиционирования по центру (как я понял тебе по центру нада) обязательно должна быть указана ширина и маргин слева-справа auto.

обоим. в css-ник для IE 6 допишите:

<style type="text/css">
 .div1 {width:expression(document.body.clientWidth > 770? “100%” :”770px” );}
</style>

770 меняете на нужную вам минимальную ширину

 

[lolshik]

<style type="text/css">
 .div1 {width:expression(document.body.clientWidth > 770? “100%” :”770px” );}
</style>

770 меняете на нужную вам минимальную ширину

Спасибо большое. Изменил под себя, и получилось кайфово. Можешь объяснить что делает последняя строка под ie6?

 

[whitewolff]

Спасибо большое. Изменил под себя, и получилось кайфово. Можешь объяснить что делает последняя строка под ie6?

в IE6 не работает свойство CSS min-width . ну а это - соответсвенно решение проблемы. если ширина окна меньше указаной, то эта указаная приписывается жестко, если не меньше - тогда на 100% тянется.