8Dle
Авторизация

Верстка шаблонов спомощью тега DIV

Верстка шаблонов спомощью тега DIV

Как и перед каждым развивающимся веб дизайнером, передо мной встал вопрос, чем же верстать свои творения, таблицами или боксами? Я решил приступить к этому вопросу логически и прикинул основные плю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>


Вот собственно и всё, я старался обьяснять всё как можно подробнее.
Автор урока: Aleko

Жмите на Кнопу ниже, или подписывайтесь!


Читайте также
  1. Toonik
    21 мая 2010 22:41
    Извините, а что такое "вертикальное центрирование"? (:
  2. Rejiser
    21 мая 2010 23:26
    ппс старая статья
    див - новая технология? о боги)

    вертикальное центрирование - тоже давно решенная проблема:
    <div style="height: 44px; line-height: 44px;">
    </div>
  3. 4warez
    22 мая 2010 00:08
    Цитата: Rejiser
    ппс старая статья

    статья то может и старая, но актуальная, дает новичкам понять как шаблоны верстать, очень понятно написана, как некая отправная точка в верстке шаблонов, очень даже пойдет smile
  4. Rejiser
    22 мая 2010 03:46
    4warez, не очень, тут самая большая ошибка - это стили вместе с html
    Стили следует выносить в отдельный файлик
  5. 4warez
    22 мая 2010 09:33

    Цитата: Rejiser
    тут самая большая ошибка - это стили вместе с html
    Стили следует выносить в отдельный файлик

    А что мешает? fellow
    Любому ясно что при верстке на дивах вся настройка с CSS, но сдесь это сделано для примера, т.с. для наглядного отображения что к чему. удобней ведь смотреть и изучать когда всё в одном чем сидеть с кучей файлов и в каждом сделить что к чему относится. Короче, статья норм. кому не нравится идите курите.
  6. riunter
    21 декабря 2010 13:14
    +1 хорошая статья, новичку как раз! Какая бы старая не была, сверстать по ней можно! winked
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.


Dle это движок который изначально проектировался для создания новостных сайтов, но по мере своего развития движка значительно расширил свою функциональность и стал универсальным средством разработки и сопровождения сайтов и блогов различной направленности и тематики. По сравнению с другими бесплатными (и некоторыми платными) CMS системами движок dle обладает довольно обширными возможности.

Авторизация