Резиновая шапка сайта

[Bryant-24]

Доброго времени суток уважаемые участники форума!

Проблема в следующем, имеем рисунок который необходимо замостить на резиновую верстку сайта. Я решил сделать так - разделил рисунок на три части, выбрал фоновое изображение, но вот проблема - не могу сделать это на DIV-ах. Код сделал примерно следующим, index.html:

<div id="header">
 <div id="header_left">
 </div>
 <div id="header_logo">
 </div>
 <div id="header_right">
 </div>
</div>

И собственно style.css:

body {
margin: 0px;
padding: 0px;
}

#header {
background: url(images/header_block.png) repeat-x;
width: 100%;
}

#header_left {
background: url(images/header_left.png) no-repeat;
float: left;
}

#header_logo {
background: url(images/header_logo.png) no-repeat center;
}

#header_right {
background: url(images/header_right.png) no-repeat right;
}

#header, #header_left, #header_logo, #header_right {
height: 335px;
}

И не получается Я только знакомлюсь с DIV-ой версткой - подскажите, как сделать, чтобы картинка была ровно размещена на сайте?

[pika]

Сам лично пока еще не силен в тонкостях

Но мне кажется конкретно таким образом у вас эти картинки, кроме фоновой, даже высвечиваться не будут.

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

либо в дивах вместо css бэкграундов использовать тег <img src=""> в самом html

повторюсь, совет получился от новичка к новичку, так что не кидайтесь помидорами, если я не прав)

[CalvinKlein]

а не проще каритнку не резать на 3 части, а поставить на фон к body и выравнить по центру?

и ещё логотип лучше добавлять через img а не как фон

Edited August 30, 2011 by CalvinKlein

[pika]

CalvinKlein, разве от этого не получится простое центрирование, вместо нужно резиновой верстки?

[CalvinKlein]

вам что нужно? чтобы шапка засчёт картики казалась резиновой или что?

В общем советую почитать htmlbook.ru/samlayout/verstka-na-html5/shapka-stranitsy

lionindesert.ru вот сайт из этого примера обратите на шапку внимание

Edited August 30, 2011 by CalvinKlein

[Bryant-24]

Спасибо за ответы:

CalvinKlein, статью прочитал, но у меня немножко другой случай, рисунок должен быть полностью на экране монитора и растягиваться. я выделил три части рисунка, которые должны прижиматься соответственно слева, по центру и справа. Все остальное - будет фон рисунка, который повторяется на вытянутых местах.

pika, попробовал так, как ты сказал - вставил в html код теги <img>. В результате код принял следующий вид. index.html:

<div id="header">
	<div id="header_left">
	<img src="images/header_left.png" />
	</div>
	<div id="header_right">
	<img src="images/header_right.png" />
	</div>
	<div id="header_logo">
	<img src="images/header_logo.png" />
	</div>
</div>

И style.css:

body {
margin: 0px;
padding: 0px;
}

#header {
background: url(images/header_block.png) repeat-x;
width: 100%;
}

#header_left {
float: left;
width:226px;
}

#header_right {
float:right;
width:294px;
}

#header_logo {
width: 483px;
margin: 0 226px;
float: center;
}



#header, #header_left, #header_logo, #header_right {
height: 335px;
}

Теперь левый рисунок прижимается к левому краю, правый - к правому, а вот центральный рисунок не хочет становится по середине. Тут как то надо поиграть с отступами

margin: 0 226px;

только вот как я не менял - он не хочет становиться в центр.

[pika]

ну начнем с того,что float: center не существует

почитай вот это, может найдешь полезную информацию

http://htmlbook.ru/content/vyravnivanie-elementov

плюс еще попробуй добавить к стилю лого

margin-left: auto;

margin-right: auto;

добавлено позже

не заметил, что первая ссылка про табличную верстку, сорри.

а на счет второго совета подробно написано здесь

http://htmlbook.ru/faq/kak-vyrovnyat-sloi-po-tsentru-veb-stranitsy

Edited August 31, 2011 by pika

[Bryant-24]

Статья про табличную верстку - а мне все таки нужно через блочную сделать.

Делаю скриншот результата - проставил отступы на avto, вот что получилось:

Edited August 31, 2011 by Bryant-24

[sigma77]

Bryant-24,

А можешь показать картинку как должно быть?

Макет psd?

Edited August 31, 2011 by sigma77

[pika]

я вот не знаю на сколько это нормально с точки зрения кодинга, но если картинку обернуть тегом <center>...</center>, то она будет стоять по центру. (но сначала наверно лучше убрать маргины)

я, кстати, не очень понял почему картинка вниз съехала. наверно с размерами связано.

Edited August 31, 2011 by pika

[Bryant-24]

Все, получилось. Спасибо большое - я ступил, прописал отступ, как avto, вместо положенного auto. Размер картинок чуть уменьшил, чтобы все они по длине влезли в "одну строчку". Если кому нибудь вдруг понадобиться подобное - прописываю готовый вариант кода. index.html:

<div id="header">
	<div id="header_left"> <!--Контейнер для левой картинки-->
	<img src="images/header_left.png" />
	</div>
	<div id="header_right"> <!--Контейнер для правой картинки-->
	<img src="images/header_right.png" />
	</div>
	<div id="header_logo"> <!--Контейнер для центральной картинки-->
	<img src="images/header_logo.png" />
	</div>
</div>

И style.css:

#header {
background: url(images/header_block.png) repeat-x; /*Путь к фоновому рисунку и повтор по горизонтали*/
width: 100%; /*делаем ширину на всю страницу*/
}

#header_left { /*стиль для контейнера левой картинки*/
float: left; /*прижимаем к левому краю*/
width:226px; /*размер картинки по ширине*/
}

#header_right { /*стиль для контейнера правой картинки*/
float:right; /*прижимаем к правому краю*/
width:294px; /*размер картинки по ширине*/
}

#header_logo { /*стиль для контейнера центральной картинки*/
width: 483px; /*размер картинки по ширине*/
margin: 0 auto; /*отступ сверху и снизу 0, слева и справа - одинаковое, чтобы картинка была по центру*/
}



#header, #header_left, #header_logo, #header_right {
height: 335px; /*для всех контейнеров делаем высоту, равную высоте картинок*/
}

Всем большое спасибо!

sigma77, макет вот, только я еще не до конца сделал фоновый рисунок как надо, но должно получиться именно так.

[pika]

а вообще имеет ли смысл прописывать картинкам ширину?

[Bryant-24]

pika, может ты и прав - размеры не обязательно. Но, думаю, лишним не будут

[sigma77]

Bryant-24,

У вас сейчас неправильный подход. Вы пытаетесь применить принципы табличной верстки к блокам.

1) Есть же свойство background, используйте его.

2) Не нужно делать "ложных" колонок, можно использовать следующую структуру:

<div class="header">
	<div class="header_inner">
		<div class="header_inner2">
			<a href="#"><img src="logo.png" alt="" class="logo" /></a>
		</div>
	</div>
</div>

Стили

.header {
    background: #e0b57d url(gray.png); /* повторяющийся серый фон */
}

.header_inner {
    background: url(left.png) no-repeat; /* левая часть шапки с прозрачным фоном */
}

.header_inner2 {
    background: url(right.png) 100% 0 no-repeat; /* правая часть шапки с прозрачным фоном */
}

Облачка, если не являются частью лого, тоже можно засунуть в отдельный слой. Лого также с прозрачным фоном.

Ну и не совсем понятно, что за оранжевый блок справа.

[Bryant-24]

sigma77, спасибо большое - Вы точно все описали. У меня действительно имеется PSD макет со слоями, использую все так, как Вы и описали =)

[Bryant-24]

sigma77, пропишите пожалуйста еще стиль для класса логотипа чтобы его правильно выровнять по центру?

[Bryant-24]

Все, разобрался. Дописал в стиле для header_inner2 следующее:

text-align:center

и логотип выровнялся по центру экрана.