Div верстка. Делаем ее правильно. Избегаем конфликтов 11.07.2013

Здравствуйте! В данном посте будем учиться делать правильную div верстку. Многие могут подумать, а что там может случиться не правильного? Сделал несколько div контейнеров, расположил их так как тебе надо и вот тебе готов каркас сайта.

Ну как бы да, все так и есть. А у вас возникало хоть раз вот такая ситуация. Вот вы начали верстать. Все вроде бы правильно сделал, div верстка, которая у вас была в голове должна появиться на страничке в таком же мысленно задуманном виде.

Вы запускаете документ в котором верстали и тут бац, че то немного не так как задумал. Этот блок уехал, этот получился один в одном. А вроде бы все делал правильно. И на первый взгляд на код все как и надо. В чем дело?

Div верстка. Конфликты полей.

Это называется конфликты полей, некоторые законы верстки которые нарушены, вызывают не соответствие внешнего вида документа и задуманного.

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

Скорость создания страничек выросла, а это важный показатель. Давайте разбираться.

Ну во-первых скачайте файл с приведенными ниже примерами, а во-вторых я рекомендую к каждому див блоку прописывать вот такую строчку в фале стилей:

.nash-bloc {

outline: 1px solid #00cccc;

}

Это что то типа рамки, только для того чтоб нам было удобно ориентироваться, чтоб мы всегда видели границы блока. Цвета для каждого блока удобнее ставить разные, так будет нагляднее видно, их различия.

Итак, первый конфликт который может случиться, это конфликт между блоком див и абзацем. Выглядит это вот так:

<div id="conflict-1">Это блок div</div>
<p id="conflict-2">Это у нас абзац</p>

Это мы пишем в наш index.html

В файле стиле пишем следующее:

#conflict-1 {
outline: 1px solid #000;
margin: 0 0 30px 0;
padding: 0;
}
#conflict-2 {
outline: 1px solid #cc0000;
margin: 20px 0 0 0;
padding: 0;
}

Мы сделали отступ от нижнего края дива 30px и 20px отступ от верхнего края параграфа. По логике расстояние между ними должно получиться 50px (сумма 30 и 20), но на деле между ними расстояние 30px.

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

Следующая ситуация, когда у нас параграф находится в диве:

<div id="conflict-3">
<p id="conflict-4">Это у нас абзац</p>
</div>

Стили для них прописаны следующие:

#conflict-3 {
outline: 1px solid #000;
margin: 30px 0 0 0;
padding: 0;
}
#conflict-4 {
outline: 1px solid #cc0000;
margin: 20px 0 0 0;
padding: 0;
}

При такой ситуации див имеет отступ 30px сверху и еще задан отступ 20px тоже сверху у параграфа. Но, опять же,. у нас только 30px отступа от предыдущего примера. Это конфликт двух верхних полей, так же это правило справедливо и для нижних полей. Причем у нас поле отступа параграфа ни ка не влияет на див и выходит за его рамки.

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

Решение: Избавиться от данного конфликта полей можно заданием рамки для вида и параграфа. Либо только для дива.

#conflict-3 {
margin: 30px 0 0 0;
padding: 0;
border: 1px solid #2FFF00;
}
#conflict-4 {
margin: 20px 0 0 0;
padding: 0;
border: 1px solid #FF00AE;
}

Заметьте, все это мы делали с внешними отступами margin. С padding (внутренними отступами) таких проблем не возникнет.

А у вас когда нибудь возникали конфликты полей при верстке? По данной теме на сегодня у меня все. Подписывайтесь на обновления! Будем держать связь.

До встречи на Sayt-Stroy.com

Метки: , ,

Оставь свой первый комментарий и получи книгу в подарок!

Данная книга расскажет о всех секретах правильного и полноценного продвижения интернет проектов.

Именно с нее следует начать изучение SEO.

WordPress

Добавить комментарий

ВКонтакте