Форум Сайтостроение Веб-строительство

Как реализовать header через css

lovezoom2
На сайте с 13.11.2009
Offline
25
lovezoom2
2169

необходимо сделать шапку header сайта

например

<html>

<head>

</head>

<body>

<div id="main">

<div id="header">

<div id="header_l">

<div id="header_r>

<div id="logo">компания

</div>

</div>

</div>

</div>

........

</div>

</body>

у каждого дива есть свой background

#header

{

width:100%;

header:200px;

}

#header_l

{

background: url(../images/left_gradient.jpg) repeat-x top left;

заливается одним градиентом слева

слева на 100%

}

#header_r

{

background: url(../images/right_gradient.jpg) repeat-x top right;

заливается другим градиентом справа

справа на 100%

}

#logo

{

background: url(../images/logo.jpg) top left;

width:500px;

header:200px;

margin: 0 auto;

по центру

}

Каким образом модифицировать css, чтобы это работало в резиновой разметке на всю страницу

или может сделать это не вложенными дивами , а отдельными?

Скорая компьютерная помощь (http://www.firemob.ru). Создание сайтов (http://www.dreamlancer.ru)
A2
На сайте с 17.11.2009
Offline
52
asmakovec2
#1

http://htmlbook.ru/

[Удален]
#2
lovezoom2:
Каким образом модифицировать css, чтобы это работало в резиновой разметке на всю страницу
или может сделать это не вложенными дивами , а отдельными?

Вы бы хоть картинку показали, как можно на ваш вопрос ответить?

Olldman
На сайте с 21.04.2010
Offline
79
Olldman
#3
header:200px;

- а что это за новое свойство в css?

lovezoom2
На сайте с 13.11.2009
Offline
25
lovezoom2
#4
Olldman:
- а что это за новое свойство в css?

height

очепятка...

Что некому помочь?

Olldman
На сайте с 21.04.2010
Offline
79
Olldman
#5

Ну примерно так - дивы L,R позиционируем абсолютно, каждый по своим углам, <div id="header"> - ессно relative, див с лого тоже абсолютно по центру, ну и развести по z-index. Только вот фон явно не .jpg, а .png, иначе какой смысл накладывать один фон на другой.

p.s. а вообще один из L,R - лишний. Например, фон слева можно назначить <div id="header">, останется только вложенный R.

У каналов на Дзене Правильное фото товара для Google обновил рекомендации по

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