• 2105
  • 0
  • Автор: ----------
  • Адаптировал: ----------
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

Как и перед каждым развивающимся веб- дизайнером, передо мной встал вопрос, чем же верстать свои творения, таблицами или боксами? Я решил приступить к этому вопросу логически и прикинул основные плюcы и минусы обоих вариантов:

TABLE

+ старый, проверенный кроссбраузерный способ
+ просты и доступны для понимания при верстке (логическая структура)
+ Имеет возможности, пока недоступные div'у

- Невозможно полностью вынести настройку в css
- Огромное количество лишнего кода

DIV

+ не загружает код страницы, позволяет сделать его красивым
+ может выводить информацию в любое место страницы независимо от положения с коде
+ всё управление осуществляется через файл стилей

- Достаточно капризно воспринимается разными браузерами
- Имеет много значительных недостатков, хотя бы отсутствие вертикального центрирования

Получилось поровну. И я решил, что мне пришла пора изучить возможности верстки боксами, тем более мир не стоит на месте, а боксы, как никак, новая технология.

Трех колоночная div верстка

Попробуем вместе с вами, читатели, создать боксовую верстку в три колонки поэтапно. Открываю пустую html страничку блокнотом и вписываю туда основные страничные параметры:

Код:
    <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Верстка</title>
</head>
<body>
</body>
</html>

Теперь пришла пора прикинуть, какие боксы нам нужны:

- Хэдэр (шапка нашего шаблона)
- Враппер ("обволакивающий" див - в него помещаются все остальные боксы)
- Контейнер (в этом диве будут лежать левая, правая и центральная колонки)
- Левый див (левая колонка)
- Центральный див (центральная колонка)
- Правый див (правая колонка)
- Футер (див, замыкающий наш шаблон, в нем обычно прописывается копирайт)

Пока хватит. Давайте разместим их на нашей странице. Сначала сделаем враппер и сразу под ним футер, затем в враппер поместим хэдэр и сразу под хэдэром - контейнер, в котором в свою очередь расположим дивы колонок:
Код:
    <!DOCTYPE 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>
Как видите, я назначил каждому диву свой идентификатор. Теперь нам нужно позиционировать наши дивы относительно друг друга:
Код:
<!DOCTYPE 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; и после этого контейнер будет растягиваться при увеличении контента в колонках:
Код:
<!DOCTYPE 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;}
.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 class="clear"></div>
</div>
</div>
<div id="footer"></div>
</body>
</html>
Но и это ещё не всё...

Приклеиваем футер к нижней границе экрана

Часто, когда на странице мало контента, под футером образуется некрасивый пропуск, что может полностью испортить дизайн. Чтобы избежать этого, нам необходимо сначала придать основному диву высоту в 100% относительно высоты окна браузера, а затем сдвинуть его вверх вместе с футером на ширину футера, которую нам нужно точно знать.
Сначала установим 100% высоту дива с id=wrapper :

Код:
<!DOCTYPE html>
<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 class="clear"></div>
</div>
</div>
<div id="footer"></div>
</body>
</html>

А теперь сдвигаем на место уехавший за пределы экрана футер, для этого сдвигаем его вверх на его высоту, а для того чтобы контент не заезжал под футер, установим ещё один пустой див-распорку:

<!DOCTYPE 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 class="clear"></div>
<div id="space"></div> <!-- div-распорка -->
</div>
</div>
<div id="footer"></div>
</body>
</html>
Вот собственно и всё, я старался обьяснять всё как можно подробнее.

Можешь почитать и вот эту статейку "Набор Дизайнерских Шрифтов"

mistakes

Это тоже интересно

Комментирование данной новости запрещено.

Ваше мнение

Каким софтом вы пользуетесь?
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element