Июнь 2nd, 2012 
Archi
Как и перед каждым начинающим веб дизайнером, передо мной встал вопрос, чем же верстать свои творения, таблицами или боксами? Я решил приступить к решению этого вопроса логически и прикинул основные плюcы и минусы обоих вариантов:
TABLE
+ старый, проверенный кроссбраузерный способ
+ просты и доступны для понимания при верстке (логическая структура)
+ Имеет возможности, пока недоступные div’у
- Невозможно полностью вынести настройку в css
- Огромное количество лишнего кода
DIV
+ не загружает код страницы, позволяет сделать его красивым
+ может выводить информацию в любое место страницы независимо от положения с коде
+ всё управление осуществляется через файл стилей
- Достаточно капризно воспринимается разными браузерами
- Имеет много значительных недостатков, хотя бы отсутствие вертикального центрирования
Получилось поровну. И я решил, что мне пришла пора изучить возможности верстки боксами, тем более мир не стоит на месте, а боксы, как никак, новая технология.
Трехколоночная div верстка
Попробуем вместе с вами, читатели, создать боксовую верстку в три колонки поэтапно. Открываю пустую html страничку блокнотом и вписываю туда основные страничные параметры:
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />
<title>Верстка</title>
</head>
<body>
</body>
</html>
Теперь пришла пора прикинуть, какие боксы нам нужны:
- Хэдэр (шапка нашего шаблона)
- Враппер («обволакивающий» див — в него помещаются все остальные боксы)
- Контейнер (в этом диве будут лежать левая, правая и центральная колонки)
- Левый див (левая колонка)
- Центральный див (центральная колонка)
- Правый див (правая колонка)
- Футер (див, замыкающий наш шаблон, в нем обычно прописывается копирайт)
Пока хватит. Давайте разместим их на нашей странице. Сначала сделаем враппер и сразу под ним футер, затем в враппер поместим хэдэр и сразу под хэдэром — контейнер, в котором в свою очередь расположим дивы колонок:
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />
<title>Верстка</title>
<style type=»text/css»>
</style>
</head>
<body>
<div id=»wrapper»>
<div id=»header»></div>
<div id=»container»>
<div id=»left»></div>
<div id=»right»></div>
<div id=»center»></div>
</div>
</div>
<div id=»footer»></div>
</body>
</html>
Как видите, я назначил каждому диву свой идентификатор. Теперь нам нужно позиционировать наши дивы относительно друг друга:
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />
<title>Верстка</title>
<style type=»text/css»>
#header {height:100px;}
#container {min-width:800px;} <!— указываем минимальную ширину —>
#center {margin:0px 200px 0px 200px;}
#left {float:left; width:200px;}
#right {float:right; width:200px;}
#footer {height:100px;}
</style>
</head>
<body>
<div id=»wrapper»>
<div id=»header»></div>
<div id=»container»>
<div id=»left»></div>
<div id=»right»></div>
<div id=»center»></div>
</div>
</div>
<div id=»footer»></div>
</body>
</html>
После установки подобных стилей, наш шаблон приобрел более менее завершенный вид, но это ещё не всё. Обратите внимание: если вы начнете добавлять контент в левую или в правую колонку — она, растягиваясь, проедет над футером. Это происходит от того, что боксы с параметром float:left; или float:right; не растягивают родительский бокс (бокс в котором находятся).
Для решения этой проблемы нам нужно добавить в самый низ бокса «контейнер» ещё один пустой бокс с параметром clear:both; и после этого контейнер будет растягиваться при увеличении контента в колонках:
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />
<title>Верстка</title>
<style type=»text/css»>
#header {height:100px;}
#container {min-width:800px;} <!— указываем минимальную ширину —>
#center {margin:0px 200px 0px 200px;}
#left {float:left; width:200px;}
#right {float:right; width:200px;}
#footer {height:100px;}
.clear {clear:both;}
</style>
</head>
<body>
<div id=»wrapper»>
<div id=»header»></div>
<div id=»container»>
<div id=»left»></div>
<div id=»right»></div>
<div id=»center»></div>
<div></div>
</div>
</div>
<div id=»footer»></div>
</body>
</html>
Но и это ещё не всё…
Приклеиваем футер к нижней границе экрана
Часто, когда на странице мало контента, под футером образуется некрасивый пропуск, что может полностью испортить дизайн. Чтобы избежать этого, нам необходимо сначала придать основному диву высоту в 100% относительно высоты окна браузера, а затем сдвинуть его вверх вместе с футером на ширину футера, которую нам нужно точно знать.
Сначала установим 100% высоту дива с id=wrapper :
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />
<title>Верстка</title>
<style type=»text/css»>
/* устанавливаем высоту на 100% */
html, body {height:100%;}
#wrapper {height:auto !important;height:100%;min-height:100%;}
/* — — */
#header {height:100px;}
#container {min-width:800px;} /* указываем минимальную ширину */
#center {margin:0px 200px 0px 200px;}
#left {float:left; width:200px;}
#right {float:right; width:200px;}
#footer {height:100px;}
.clear {clear:both;}
</style>
</head>
<body>
<div id=»wrapper»>
<div id=»header»></div>
<div id=»container»>
<div id=»left»></div>
<div id=»right»></div>
<div id=»center»></div>
<div></div>
</div>
</div>
<div id=»footer»></div>
</body>
</html>
А теперь сдвигаем на место уехавший за пределы экрана футер, для этого сдвигаем его вверх на его высоту, а для того чтобы контент не заезжал под футер, установим ещё один пустой див-распорку:
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />
<title>Верстка</title>
<style type=»text/css»>
html, body {height:100%;}
#wrapper {height:auto !important;height:100%;min-height:100%;}
#header {height:100px;}
#container {min-width:800px;} /* указываем минимальную ширину */
#center {margin:0px 200px 0px 200px;}
#left {float:left; width:200px;}
#right {float:right; width:200px;}
#footer {height:100px;margin-top:-100px;} /* добавляем отступ */
.clear {clear:both;}
#space {height:100px;} /* стиль распорки */
</style>
</head>
<body>
<div id=»wrapper»>
<div id=»header»></div>
<div id=»container»>
<div id=»left»></div>
<div id=»right»></div>
<div id=»center»></div>
<div></div>
<div id=»space»></div> <!— div-распорка —>
</div>
</div>
<div id=»footer»></div>
</body>
</html>
Вот собственно и всё, я старался обьяснять всё как можно подробнее.Отписываемся в коментах…
Источник: masterdle.ru
Опубликовано в рубрике 
Метки: