Верстка дивами на примере

10 Июль, 2011 - 21:25

Нет ничего лучше в обучении, чем наглядный пример. Особенно это касается верстки дивами, т.к. самому освоить эту науку достаточно сложно.

Самые частые вопросы, которые ищут новички верстки:

Как сверстать резиновый сайт дивами
Как прикрепить футер внизу страницы
Как сверстать сайт дивами в 3 колонки

На все эти вопросы может ответь данная статья.

Обо всех тонкостях верстки я рассказывать не буду, а вот некоторые ньюансы все же объясню.

Первым делом посмотрите демо, а затем вставьте к себе на страницу код и сохраните ее в .html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Шаблон верстки страницы из 3 колонок</title>
<style type="text/css">

* { margin:0px; padding:0px; }
html { height:100%; }
body { min-height:100%; position:relative; min-width:800px; }
* html body { height:100%; }
#header { background:#9393FF; height:70px; width:100%; }

#content { width:100%; padding-bottom:60px; overflow:hidden; }

#container1 { width:100%; float:left; margin-right:-180px; }
#container2 { background:#000000; margin-right:180px; }
#container3 { width:100%; float:right; margin-left:-200px; }

#left { background:#AEAE00; width:200px; float:left; }
#center { background:#D86927; margin-left:200px; }
#right { background:#C0C0C0; float:right; width:180px; }

#min_width { width:800px; }

#footer { position:absolute; bottom:0px; background:#8F9EB1; width:100%; height:60px; }

</style>
</head>
<body>
<div id="header">Заголовок страницы</div>

<div id="content">
    <div id="container1">
        <div id="container2">
            <div id="container3">
               <div id="center">Центральная колонка</div>
            </div>
            <div id="left">Левая колонка</div>
        </div>
    </div>

    <div id="right">Правая колонка</div>

</div>

<div id="footer">Копирайт</div>
</body>
</html>

А теперь давайте коротко рассмотрим самое важное.

Чтобы футер находился внизу нужно прописать 2 свойства: position:absolute; bottom:0px;
- position - берем отсчет относительно начала браузера (это в нашем случае, тк. нет родительских элементов)
- bottom - прикрепляем к самому низу футер
Трехколоночность и резиновость делается за счет свойтв float и margin
- float - обтекание одного блока другим слева или справа
- margin - отступы от края браузера

Прикрепленный файл	Размер
Скачать пример верстки дивами	713 байтов

|

Tags: уроки CSS