И так, на заметку напишу, как начать верстать DIV блоками шаг за шагом. Для начала нам нужен эскиз, а именно модель страницы, которую вы хотите сделать. Давайте сверстаем популярную модель страничек в Интернете - это двух колоночная верстка с помощью DIV.
Нарисуем модель (можно и на бумажке или в голове, а не в фотошопе):
Как видно из эскиза, у нас на сайте будет header («шапка» сайта), menu (место для меню), left (левая колонка), right (правая колонка), footer (нижняя часть сайта – «подвал»), и все эти блоки будут расположены в главном диве main.
Когда с макетом определились, создаем HTML документ с нашими дивами:
<div id="main"> <div id="header">«шапка» сайта</div> <div id="menu">место для меню | место для меню | место для меню</div> <div id="left">левая колонка</div> <div id="right">правая колонка</div> <div id="footer">нижняя часть сайта – «подвал»</div> </div>
Думаю объяснять здесь ничего не нужно! Теперь можно заполнять файл со стилями style.css, так как сейчас наша страничка совсем не похожа на то, что мы ожидаем.
body, html {margin:0;padding:0;background:#ECE9E9;}
#main {background:#C9EDFB;margin:0 auto;width:700px;}
#header{background:#FDD5D5;height:50px;}
#menu {background:#D6FDD5;padding:5px;text-align:center;}
#left {background:#C9EDFB;float:left;width:200px;}
#right {background:#9CE0FB;float:right;width:500px;min-height:300px;}
#footer{background:#FDD5D5;clear:both;}
строка 1 – простой сброс параметров браузера, устанавливаем отступы в "0" и задаем цвет фона всего тела body
строка 2 – выравниваем блок main по середине, установив ему выравнивание по бокам auto, задаем ширину и цвет фона
строка 3 – задаем высоту header и цвет фона
строка 4 – задаем внутренние отступы menu, выравнивание по середине и задаем цвет фона
строка 5 – задаем ширину контейнера left и выравниваем его по левой стороне
строка 6 – также задаем ширину контейнера right и выравниваем его по правой стороне, задаем цвет фона и минимальную высоту.
строка 7 – задаем цвет фона footer и отменяем обтекание элемента одновременно с правого и левого края.
На этом, пожалуй, и все! Все просто и логично.
Смотрим пример двух колоночная DIV верстка
Удачи!
(голосов 5, в среднем: 4.80 из 5)
Loading ...
#1 olexa - Январь 14th, 2011 at 22:21
к сожалению не рассмотрено двухколоночную резиновую верстку
а также трехколоночную, с резинкой посрединке
типа такого:
<style>
#col1 {
float: left;
width: 200px;
}
#col2 {
overflow:hidden;
}
#col3 {
float: right;
width: 200px;
}
</style>
<div id=’col1′>1</div>
<div id=’col3′>3</div>
<div id=’col2′>2</div>
#2 nice - Январь 14th, 2011 at 23:23
Согласен, к сожалению все никак не хватает времени дописать статью о 3х колоночной верстке.