Здесь вводится дополнительный блок <div style="position:relative;" id="dopoln_block">. Собственно вопрос - зачем? На форуме данного сайта ответа не было. Если убрать этот блок "2 Текст" съезжает наверх.
You can post now and register later.
If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.
Актуальные контакты:
Telegram: @Nikker_web
E-Mail: tarasevich.email@gmail.com
Портфолио https://www.behance.net/d4d4186e
Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ
Актуальные контакты:
Telegram: @Nikker_web
E-Mail: tarasevich.email@gmail.com
Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ
Портфолио https://www.behance.net/d4d4186e
Question
Sedli
Здравствуйте!
Только начал осваивать CSS, и никак не могу понять одну вещь в дивовой верстке. На одном сайте увидел пример:
<div style="background:#A485B8;">1<br>text</div>
<div style="position:relative;" id="dopoln_block">
<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>
<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; 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="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>
Опять же не понятно, зачем нужны container1, container2,conteiner3. Буду очень благодарен за ответ!
С Уважением, Вячеслав
Link to comment
Share on other sites
2 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.