Помогите разобраться с хедером... замучался

P1
На сайте с 08.04.2010
Offline
35
401

Приветствую! Была у меня шапка сайта прописана через css вот в таком виде

div#header

{background-image:url(header.jpg);

background-repeat:no-repeat;

background-position:top;

width:100%;

height:222px; }

div#header_back

{background-image:url(back.jpg);

background-repeat:repeat-x; }

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

Решил недавно сделать активные области на шапке, и вот тут сломал себе уже мозк.

Получаем вот такое -

<img name="header" src="header.jpg" width="999" height="158" border="0" usemap="#m_header"><map name="m_header">

<area shape="rect" coords="65,21,337,135" href="javascript:;" >

</map>

Этот код прописывается в html файле страницы, а как сделать шапку резиновую ? В первом варианте за это отвечал id header_back, а как быть тут ? Очень прошу помогите :)

AlikZP
На сайте с 22.11.2009
Offline
107
#1

Нужно сделать родительский слой с картинкой, а в него уже вставлять img

Примерно так:

CSS

div#header_back{

background-image:url(back.jpg);
background-repeat:repeat-x;
text-align:center; // Для отображения картинки по центру
}

HTML

<div id="header_back">

<img name="header" src="header.jpg" width="999" height="158" border="0" usemap="#m_header">
<map name="m_header">
<area shape="rect" coords="65,21,337,135" href="javascript:;" >
</map>
</div>
Website CMS: быстрая, удобная, недорогая! Вечная лицензия за 45$ (/ru/forum/524503) Яся - быстрый поиск фото для товаров. OpenCart/ocStore. Дополнение. (/ru/forum/665287) Грамотная верстка ваших макетов (/ru/forum/comment/8853216)
P1
На сайте с 08.04.2010
Offline
35
#2

Ядрен батон, заработало! Я два дня просидел за этим делом и ничего не получалось.

Приношу Вам большую и искреннюю благодарность за помощь. не знаю как бы сам справился. Добавлю отзыв, еще раз спасибо! :)🚬

AlikZP
На сайте с 22.11.2009
Offline
107
#3

Пожалста.

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

Даете div#header_back свойство css position:relative и внутри него позиционируете остальные элементы с помощью position:absolute;

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий