Форум веб-мастеров

Все о веб-дизайне, разработке и раскрутке сайтов
Текущее время: 22 окт 2018, 10:53

Часовой пояс: UTC + 3 часа [ Летнее время ]





Начать новую тему Ответить на тему  [ Сообщений: 2 ] 
Автор Сообщение
 Заголовок сообщения: Вёрстка DIV'ми!!!
СообщениеДобавлено: 26 май 2009, 23:06 
Не в сети

Зарегистрирован: 26 май 2009, 23:02
Сообщения: 1
Здравствуйте!
Задумал я верстать макет DIV'ми, а не таблицами. т.к. и кода меньше и масштабируемость на высоте....
Суть макета:
Изображение

Очень важно, чтобы макет был резиновый: поэтому я задал по 15% у правой и левой колонки и 70% у шапки и основного блока контента.
Я не могу понять, почему у меня разъезжается макет? почему при уменьшении размеров окна правая колонка съезжает влево?
В идеале нужно что бы при размере окна 1024px боковые колонки с фоном прятались и их не было видно, только среднюю часть. А при большом разрешении - они растягивались.
Короче у кого больше монитор, тот больше фона и увидит...

вот CSS и HTML файл макета, скачать можно здесь:
http://slil.ru/27696617
http://depositfiles.com/files/5i43q0wbj
http://rapidshare.com/files/237517492/error_maket.zip.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">
<title>Макет</title>
<link href="../style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="left"></div><div id="right"></div>
<div id="header">
<div align="center">
<table width="1025" height="295" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="338" height="295" rowspan="3" background="logo_bg.jpg">
<p align="center">
</object>большой логотип</td>
<td width="616" height="217" colspan="3" background="name.jpg">
<p align="center">название сайта</td>
<td width="71" height="295" rowspan="3" background="right_head_line.jpg">
</td>
</tr>
<tr>
<td width="205" height="65" background="panel_bg.jpg">
<p align="center">войти на сайт</td>
<td width="206" height="65" background="resourse/panel_bg.jpg">
<p align="center">войти в почту
</td>
<td width="205" height="65" background="panel_bg.jpg">
<p align="center">поиск по сайту
</td>
</tr>
<tr>
<td width="616" height="13" colspan="3" background="img_head_line.jpg">
</td>
</tr>
</table></div>
</div>
<div id="content">
&nbsp;<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

</div>
<div id="clear"></div>
<div id="footer">
   <p style="text-align: center">ПОДВАЛ</div>
</div>
</body>
</html>


И CSS:
Код:
body, html {
margin:0px;
padding:0px;
text-align:center;
}
#container{
margin:0 auto;
text-align:left;
min-width:1024px;
width:100%;
}
/*стили для шапки сайта */
#header{
   margin:0px;
   background-color:orange;
   padding:0px;
   height:295px;
   width:70%;
   margin-left:18%;
   margin-right:18%;
}
#header h1 {
   margin: 0; }
/*стили для левой колонки */
#left{
background-color:yellow;
width:15%; 
height:1384px;
float:left;  /*выравнивание по левому краю,с включением обтекания*/
}
/*стили для правой колонки*/
#right{
width:15%; /*ширина правой колонки */
background-color:yellow;
height:1384px;
float:right; /*выравнивание колонки по правому краю с включением обтекания */
}
/*стили для блока контента */
#content{

background-color:#d5d7b5;
margin:0px;
margin-left:15%;
margin-right:15%;
}
#content h1 {
margin:0px;
}
#content p {
margin:0px;
padding:5px;
}
/*Опускаем слой footer в самый низ. */
#clear{
height:0;
font-size:1px;
line-height:0px;
clear:both;
}
/*стили для подвала сайта */
#footer{
background-color:grey;
}
#footer p{
margin:0px;
padding: 10px 0;
}

Вложение:
error_maket.zip [1.3 КБ]
Скачиваний: 371


Вернуться к началу
 Профиль  
Ответить с цитатой  
 Заголовок сообщения: Re: Вёрстка DIV'ми!!!
СообщениеДобавлено: 25 ноя 2009, 15:27 
Не в сети

Зарегистрирован: 25 ноя 2009, 15:07
Сообщения: 3
лучше используйте px вместо % и проблем не будет


Вернуться к началу
 Профиль  
Ответить с цитатой  
Показать сообщения за:  Поле сортировки  
Начать новую тему Ответить на тему  [ Сообщений: 2 ] 

Часовой пояс: UTC + 3 часа [ Летнее время ]


Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 1


Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения

Найти:
Перейти:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Русская поддержка phpBB
    liveinternet.ru: показано число просмотров за 24 часа, посетителей за 24 часа и за сегодня   Rambler's Top100   Рейтинг@Mail.ru