Имя пользователя:
Пароль:  
Помощь | Регистрация | Забыли пароль?  | Правила  

Компьютерный форум OSzone.net » Компьютеры + Интернет » Вебмастеру » Помогите с версткой

Ответить
Настройки темы
Помогите с версткой

Старожил


Сообщения: 164
Благодарности: 0

Профиль | Отправить PM | Цитировать


Изменения
Автор: Bullet-Avalon
Дата: 23-06-2009
Плиз помогите с версткой, использую верстку слоями:
Код index.php файла:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link href="style.css" rel="stylesheet" type="text/css">
<title>Untitled Document</title>
</head>
<body>
<div class="header_1_div" ></div>
<div class="header_2_div"></div>
<div class="header_3_div" ><img src="img/h_img_line.gif"></div>
<div class="header_4_div"></div>
<div class="header_5_div"><img src="img/h_img_line.gif"></div>
</body>
</html>


Код CSS файла:
body { margin-top:10; margin-bottom:10; background-color:#1e1e1e;}
.header_1_div{position:relative; margin-left:auto; margin-right:auto; width:800px; height:25px; background-image:url(img/bg_h_red.gif);}
.header_2_div{position:relative; margin-left:auto; margin-right:auto; width:800px; height:20px; top:1px; background-image:url(img/bg_h_lines.gif);}
.header_3_div{position:relative; float:left; margin-left:auto; margin-right:auto; height:86px; width:1px; top:2px;}
.header_4_div{position:relative; margin-left:auto; margin-right:auto; width:798px; top:2px; height:25px; background-image:url(img/bg_h_wtrih.gif);}
.header_5_div{position:relative; float:; margin-left:auto; margin-right:auto; width:1px; top:55px;}

Проблема в следующем - первый рисунок(полоса белого цвета), который описан в .header_3_div, а так же второй рисунок (та же полоска) .header_5_div, должны плотно прилегать к слою .header_4_div (штриховка) с левой и правой стороны соответственно.
С учетом того что слои должны быть выравнены по центру, и иметь ширину 800 px.
Но у меня не получается расположить эти полоски как надо, подробнее в скриншоте.

Отправлено: 18:26, 27-11-2008

 

Аватара для Coutty

Кот Ти


Сообщения: 7318
Благодарности: 1204

Профиль | Отправить PM | Цитировать


Как всё сложно...

HTML код: Выделить весь код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <style> #header { position:absolute; top: 20px; width: 800px; height: 50px; } #header3 { float: left; background: url(img/h_img_line.gif) no-repeat top left; width: 10px; height: 50px; } #header4 { margin: 0 auto; background: url(img/bg_h_wtrih.gif) no-repeat top left; width: 780px; height: 50px; } #header5 { float: right; background: url(img/h_img_line.gif) no-repeat top left; width: 10px; height: 50px; } </style> <title>Ня</title> </head> <body> <div id="header"> <div id="header3" ></div> <div id="header4"></div> <div id="header5"></div> </div> </body> </html>


В общем, попробуйте. Я не проверял, т.к... лениво

Отправлено: 18:44, 27-11-2008 | #2



Для отключения данного рекламного блока вам необходимо зарегистрироваться или войти с учетной записью социальной сети.

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


Старожил


Сообщения: 164
Благодарности: 0

Профиль | Отправить PM | Цитировать


К сожалению ваш совет не принес желаемых результатов, получилась какая то кособячина :-)

Отправлено: 19:53, 27-11-2008 | #3


Аватара для Coutty

Кот Ти


Сообщения: 7318
Благодарности: 1204

Профиль | Отправить PM | Цитировать


Да-да, теперь я проверил в браузерах
Попробуйте вот так:
HTML код: Выделить весь код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <style> #header { margin-top: 20px; margin-left: auto; margin-right: auto; width: 800px; height: 50px; } #header3 { float: left; background: url(img/h_img_line.gif) green no-repeat top left; width: 10px; height: 50px; } #header4 { position: absolute; margin-left: 10px; background: url(img/bg_h_wtrih.gif) red no-repeat top left; width: 780px; height: 50px; } #header5 { float: right; background: url(img/h_img_line.gif) black no-repeat top left; width: 10px; height: 50px; } </style> <title>Ня</title> </head> <body> <div id="header"> <div id="header3"></div> <div id="header4"></div> <div id="header5"></div> </div> </body> </html>

Теперь должно работать.

Отправлено: 20:43, 27-11-2008 | #4



Компьютерный форум OSzone.net » Компьютеры + Интернет » Вебмастеру » Помогите с версткой

Участник сейчас на форуме Участник сейчас на форуме Участник вне форума Участник вне форума Автор темы Автор темы Шапка темы Сообщение прикреплено

Похожие темы
Название темы Автор Информация о форуме Ответов Последнее сообщение
[решено] Помогите с версткой Bullet-Avalon Вебмастеру 8 28-09-2009 20:43
ПОмогите с версткой, плз... Bullet-Avalon Вебмастеру 1 02-05-2009 13:22
Помогите с версткой! Bullet-Avalon Вебмастеру 4 02-02-2009 22:12




 
Переход