Posted on By seodiz_baza_

Секреты дивовой верстки без хаков

Див верстка для сайта

Весткой сайтов я занимаюсь довольно давно (конечно это как посмотреть), старички-профессионалы скорей всего скажут что 5 лет — это не срок. Я их оспаривать совсем не хочу, да и толку, все то что они 5 лет назад верстали в таблицах еще до сих пор не переверстано.

Таблицы — для табличных данных, дивы — для всех остальных! Так я решил 4 года назад и с тех пор немножко поднаторел верстать сайты совсем без хаков.

IE6 — самый главный валидатор правильности вашей верстки, он очень чувствителен даже к малейшим неточностям в стилях, неговоря уже о незакрытых тегах, которые все современные браузеры просто-напросто игнорируют. Если сверстанный вами сайт хорошо отображается и не расползается в IE-6, то в остальных браузерах он темболее будет отображаться без проблем.

Ну, что то я немного отвлекся от сегодняшней темы (прошу вас извинить за столь длинное предисловие), пора мне выкладывать все свои козырные карты и научить вас, как верстать без использования хаков.

Основные правила верстки дивами

В отличие от табличной — устаревшей верстки, дивовая верстка (когда таблицы используются лишь по своему назначению: для отображения табличных текстовых данных, а не как каркас для веб-страниц) предоставляет верстальщику намного больше возможностей. Особенно это касается порядка загрузки контента.

Верстая дивами вполне реально как можно быстрее предоставить пользователю искомый контент (основное содержание), а пока он его просматривает и читает, подгружать остальные элементы дизайна: сайдбары, шапку (в которой зачастую расположены, пускай и красивые, но очень «тяжелые» картинки, которые совсем не нужны тем, кто ищет ответ на конкретный вопрос и желает найти его как можно быстрее.

Но дивовая верстка имеет и свои подводные камни, самые большие рифы в ней — плавающие элементы, после которых обязательно нужно очищать поток, иначе весь дизайн поломается. Я с ними уже сталкивался достаточно, а теперь хочу от этих столкновений предстеречь и вас. Вот каких несложных правил нужно всегда придерживаться верстая дизайн для сайта дивовой версткой:

Создавая плавающий элемент (float:left или float:right) никогда не назначайте ему маргины и паддинги (margin, padding), особенно с противоположной обтеканию стороны, иначе проблеммы с кроссбраузерностью, да и с простым отображением будут у вас уже в кармане.

Вот вам пример неправильной верстки:

HTML

<div id="BAD-example">
<div class="Left_float">с текстом trullala...</div>
<div class="Right_float">с текстом tratata...</div>
</div>

CSS

#BAD-example {width:100%;} // Здесь может быть любая ширина, или ее не может быть совсем (неопределена);
.Left_float {float:left; margin:10px; padding:10px;}
.Right_float {float:right; margin:10px; padding:10px;}

Обычно именно так начинающие верстальщики пытаются создать главный макет сайта (средний блок я упустил, чтобы вам было легче понять). Здесь присутствует целая куча ошибок: в разных браузерах маргины и паддинги плавающих элементов или складываются или вычитаются друг из друга, поэтому изначально используя такой вариант, пожже вам придется дописывать в стили целую кучу различных CSS хаков (отдельных под каждый браузер).

А вот правильная верстка:

HTML

<div id="GOOD-example">
<div class="Left_float">с текстом supertrullala...</div>
<div class="Right_float">с текстом supertratata...</div>
</div>

CSS

#GOOD-example {width:100%; overflow:hidden;} // ширина может быть любым числом в пикселях, процентах или поинтах (pt)
.Left_float {float:left; margin:10px 0; width:50%;}
.Right_float {float:right; margin:10px 0; width:50%;} // вместо маргинов в этих плавающих элементах можно назначить паддинги по такому же образцу.

Самое важное: не сочетайте в плавающих элементах оба этих свойства одновременно. И НИКОГДА не назначайте паддинг или маргин в ту сторону куда элемент плывет!

Создавайте плавающие (floated) html элементы только в блоках с фиксированной (неважно в чем: пикселях или процентах) шириной, тогда добавив родительскому блоку свойство: overflow-hidden вы автоматически очистите поток и избежите создания дополнительных очищающих его (обычно это дополнительный див, или даже тег разрыва строки с классом clearfix) элементов.

А вот один из примеров довольно сложного каркаса шаблона целого сайта, который я очень часто применяю.

HTML

<div id="Wrapper">
<div id="MY-example"><div id="MAIN">ГЛАВНЫЙ_КОНТЕНТ</div></div>
<div class="Left_float_sidebar">с текстом superpuper...</div>
<div class="Left_float_sidebar2">с текстом supertruper...</div>
</div>

CSS

#Wrapper{width:100%; overflow:hidden;} // Следующим будет плавающий элемент, поэтому поток чистим заблаговременно. А я больше склоняюсь к тому, чтоб еще изначально создать отступы с краев: width:98%; margin:0 auto;
#MY-example {float:left; width:100%;}
#MAIN{margin-left:250px; margin-right:250px;} // ширину этому блоку не задаем, конечно если у вас шаблон резиновый, а если фиксированной ширины, то ее лучше обозначить.
.Left_float_sidebar {float:left; width:250px; margin-left:-100%;}
.Left_float_sidebar2 {float:left; width:250px; margin-left:-250px;}.

И это весь код! А уже внутри этих блоков, назначайте любым своим элементам какие угодно паддинги и маргины. В любом случае сайт не расползется. Конечно если у вас с математикой все в порядке и вы способны делить, умножать, отнимать и прибавлять без грубейших ошибок. В этом случае мои советы по дивовой верстке вам к моему величайшему сожалению не помогут.

Читайте также: html css верстка дизайн сайты