Небольшой урок за основу которого я взял урок от GZ Design
Урок CSS вёрстки 3. Простой шаблон сайта. Я хочу показать как добиться той самой табличной тянучисти к которой все так привыкли. Если Вы присмотритесь к
демо версии, то обнаружите небольшой недостаток самой блочной верстки, казалось бы не возможно растянуть левый и правый блок по всей высоте от шапки сайта до подвала, как это можно сделать таблицами. Однако выход всегда есть.
css
/*
=============================================================
© 2008 Российская школа CSS (Russian CSS School)
http://www.css-school.ru
Урок CSS вёрстки №3 Простой шаблон сайта
style.css - Набор стилей для урока
=============================================================
*/
/* Задание стилей всего шаблона */
body {
font: 80% Arial;
text-align:center;
}
/* Задание стилей новой строки */
p {margin:0 10px 10px;}
/* Задание стилей ссылок */
a {
padding:5px;
text-decoration:none;
color:#0053a1;
}
/* Задание стилей ссылок при наведении */
a:hover {
text-decoration:underline;
color:#067a00;
}
/* Задание стилей блока заголовка */
div#header {
background-color:#005387;
color:#fff;
height:80px;
line-height:80px;
padding-left:20px;
}
/* Задание стилей всего шаблона */
div#all {
text-align:left;
width:750px;
margin:0 auto;
}
/* Задание стилей навигации */
div#navigation {
background:#e3f4ff;
float:left;
width:150px;
margin-left:-750px;
}
/* Задание стилей списка */
div#navigation ul {
margin:15px 0;
padding:0;
list-style-type:none;
}
/* Задание стилей элемента списка */
div#navigation li{margin-bottom:5px;}
/* Задание стилей правого столбца */
div#extra {
background:#c1e7ff;
float:left;
width:150px;
margin-left:-150px;
}
/* Задание стилей "подвала" */
div#footer {
background-color:#013657;
color:#fff;
clear:left;
height:25px;
}
div#footer p {
margin:0;
padding:5px 10px;
}
/* Задание стилей всего шаблона */
div#templ {
float:left;
width:100%;
}
/* Задание стилей центрального столбца */
div#content {margin: 0 150px;}
html
Российская школа CSS. Учебный шаблон 1
<div id="all">
<div id="header"><h1>Учебный шаблон №1</h1></div>
<div id="templ">
<div id="content">
<p><strong>Основное содержание</strong></p>
<p>Какой-то текст</p>
</div>
</div>
<div id="navigation">
<p><strong>Навигация</strong></p>
<ul>
<li>→ [url=http://www.css-school.ru/]</li>
<li>→ <a href="#">Ссылка 1[/url]</li>
<li>→ [url=#">Ссылка 2</a></li>
<li>→ <a href=]Ссылка 3[/url]</li>
<li>→ [url=#">Ссылка 4</a></li>
<li>→ <a href=]Ссылка 5[/url]</li>
</ul>
</div>
<div id="extra">
<p><strong>Дополнительно</strong></p>
<p>Различные полезные блоки, реклама и т.д.</p>
</div>
<div id="footer">
<p>© Copyright</p>
</div>
</div>
Для начала выкинем подвал сайта из общего блока "all" в противном случае могут всплыть баги в FF
CSS
div#footer {
background-color: #013657;
color: #fff;
clear: left;
height: 25px;
text-align: left; /* добавлено от блока "all" */
width: 750px; /* добавлено от блока "all" */
margin: 0 auto; /* добавлено от блока "all" */
}
HTML
</div>
</div>
<div id="footer">
<p>© Copyright</p>
</div>
Далее добавляем для двух блоков navigation и extra следующие свойства: margin-bottom: -1000em; - оттягивает блок вниз padding-bottom: 1000em; - не позволяет блоку провалиться при заполнением контента.
CSS
div#navigation {
background:#e3f4ff;
float:left;
width:150px;
margin-left:-750px;
margin-bottom: -1000em;
padding-bottom: 1000em;
}
div#extra {
background:#c1e7ff;
float:left;
width:150px;
margin-left:-150px;
margin-bottom: -1000em;
padding-bottom: 1000em;
}
У нас получается растянуть блоки на произвольную цифру 1000em можете указать и 5000em и 1000000px - это уже личное. Но у нас возникает проблема, что окно браузера растянулось. Для этого просто нашему блоку "all" пишем свойство overflow: hidden; - оно позволяет скрыть все лишнее.
CSS
div#all {
text-align:left;
width:750px;
margin:0 auto;
overflow: hidden;
}
Проблема решена, хоть и настолько радикальным способом. Приятного юзанья кода!
Уважаемый посетитель Российской школы CSS! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!
