Верстка div

Sedli · December 28, 2010

Здравствуйте!

Только начал осваивать CSS, и никак не могу понять одну вещь в дивовой верстке. На одном сайте увидел пример:

<div style="background:#66AAD7; width:200px; position: absolute; top:10px; left:10px;">2<br>текст</div>

</div>

<div style="background:#C6C600;">3<br>содержимое</div>

Здесь вводится дополнительный блок <div style="position:relative;" id="dopoln_block">. Собственно вопрос - зачем? На форуме данного сайта ответа не было. Если убрать этот блок "2 Текст" съезжает наверх.

Можно привести более расширенный пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Шаблон верстки страницы из 3 колонок</title>

* { 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; width:expression(document.body.clientWidth > 800 ? "100%" : "800px"); 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="center">Центральная колонка</div>

</div>

<div id="left">Левая колонка</div>

</div>

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

</div>

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

</body>

</html>

Опять же не понятно, зачем нужны container1, container2,conteiner3. Буду очень благодарен за ответ!

С Уважением, Вячеслав

Vlad · December 28, 2010

Вячеслав, обрамляйте коды примеров в [ code ] и [ /code ] - без пробелов.

Конструкция <div style="position:relative"><div style="position:absolute"></div</div> нужна, чтобы внутренний слой сдвигать относительно родителя. При добавлении left, top и др. сдвиг будет происходить относительно положения родительского элемента.

Пример, надо отметить, ужас, ужас.

Sedli · December 28, 2010

Спасибо, Влад! В следующий раз обязательно буду использовать [ code ] и [ /code ].

А этот пример выводится на первом месте в гугле по запросу "кодировка div". Если это такой ужас, буду смотреть другие источники.

Sign In

Верстка div

Question

Sedli

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

Sedli

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information