CSS: блочная верстка
Когда браузеры имели маленькие номера версий, а список всех сайтов влезал в тонкую жёлтую книжечку, возникли изначальные правила и методы разметки веб-страниц. Например, верстка сложных страниц с помощью таблиц и невидимых изображений.
Но с развитием браузеров и стабилизацией стандартов, этот метод окончательно устарел, так как имеет много существенных недостатков. Поэтому постепенно все перешли на так называемую “блочную верстку”, о возможности использования которой первый раз я услышал ещё в 2002 году. Многие даже cчитают, что использование таблиц сейчас глупо и неоптимально.
Суть блочной верстки - в использовании всех возможностей CSS (каскадных таблиц стилей) вместо таблиц и направляющих изображений.
В этой статье приведён пример использования блочной верстки для создания макета сайта с шапкой, навигационной панелью, основным контекстным пространством, блоком меню и подвалом, как на этой схеме.
1. Базовая структура
Для начала, создадим базовую структуру HTML-страницы:<div id="wrap">
<div id="header"></div>
<div id="nav"></div>
<div id="main"></div>
<div id="sidebar"></div>
<div id="footer"></div>
</div>
После этого наполним секции некоторым содержимым для наглядности.<div id="wrap">
<div id="header"><h1>Заголовок страницы</h1></div>
<div id="nav">
<ul>
<li><a href="#">Раздел 1</a></li>
<li><a href="#">Раздел 2</a></li>
</ul>
</div>
<div id="main">
<h2>Колонка 1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
</div>
<div id="sidebar">
<h3>Колонка 2</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<ul>
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
</ul>
</div>
<div id="footer">
<p>Подвал</p>
</div>
</div>
У нас получился XHTML-документ без стилей, со структурой, которая позволяет использовать CSS для любых изменений в его отображении.
2. Параметры тегов <body> и <html>
Этот приём некоторые называют “ластик” - сброс параметров отступов на странице. Ну и заодно зададим основной цвет фона и текста.
body, html {margin:0;padding:0;
background:#a7a09a;
color:#000;}
3. Расположение основного контейнера
Теперь нужно расположить всё содержимое страницы в центре и задать ему ширину. Для этого у нас есть контейнер #wrap. Тут же зададим ему цвет фона.
Метод, который мы используем, основан на том, что если левый и правый отступы элемента определены как auto, то он всегда будет находиться в центре окна браузера.
А чтобы предотвратить проблемы в некоторых браузерах, связанные с тем, что окно может быть меньше контейнера #wrap, установим минимальную ширину и его и всей страницы.
body,html {
margin:0;
padding:0;
background:#a7a09a;
color:#000;
}
body {
min-width:750px;
}
#wrap {
background:#99c;
margin:0 auto;
width:750px;
}
А для наглядности раскрасим фоны всех контейнеров в разные цвета.
#header {background:#ddd;}
#nav {background:#c99;}
#main {background:#9c9;}
#sidebar {background:#c9c;}
#footer {background:#cc9;}
4. Расположение колонок
Чтобы две колонки (#main и #sidebar) отображались рядом, определим для них фиксированную ширину.#main {
background:#9c9;
float:left;
width:500px;}
#sidebar {
background:#99c;
float:right;
width:250px;
}
5. Расположение подвала
Чтобы опустить секцию подвала в низ страницы, используем свойство clear, определяющее невозможность нахождения элементов на одной строке с текущим.
#footer {
background:#cc9;
clear:both;
}
6. Делаем пнель навигации горизонтальной
Контейнер #nav содержит список ссылок. Расположим его более правильно.
#nav ul{
margin:0;
padding:0;
list-style:none;
}
#nav li{
display:inline;
margin:0;
padding:0;
}
7. Настроим отступы
Почти готово. Небольшой тюнинг отступов элементов для лучшего отображения.
#header h1 {
padding:5px;
margin:0;
}
#nav {
background:#c99;
padding:5px;
}
#main h2, #main h3, #main p {
padding:0 10px;
}
#sidebar {
background:#99c;
float:right;
width:240px;
}
#sidebar ul {
margin-bottom:0;
}
#sidebar h3, #sidebar p {
padding:0 10px 0 0;
}
#footer p {
padding:5px;
margin:0;
}
Ну вот и готово. Полученный код можно использовать как основу для серьёзного дизайна, который можно будет изменить простой правкой CSS-файла.
Скачать полученный по этой инструкции html-файл можно тут.