prowebber.ru - Тут есть все для настоящих вебмастеров

Чтение RSS Мы в твиттере
«    Декабрь 2016    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 

Всё для вебмастера » Web » Полезные статьи » Верстка шаблонов спомощью тега DIV

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


Данный материал предоставлен сайтом ProWebber.ru исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
У нас вы можете скачать бесплатно Верстка шаблонов спомощью тега 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


+3
Просмотры: 4749 VIP ProWebber | Комментарии (12)
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

#11nokia

  • 30 мая 2010 21:42
  • Регистрация: 1.12.2009
  • ICQ: 1
  • Комментариев: 106
Спасибо за урок, сразу же на печать отправил. Плюсы и минусы неправильно описаны, их больше и там и там.
А вот пример неплохой, попробую его.

0

#2kaktus

  • 1 июня 2010 19:12
  • Регистрация: 9.10.2009
  • ICQ: 402814915
  • Комментариев: 112
Урок очень понятный, мне очень помог.

0

#3stemp

  • 12 сентября 2010 16:09
  • Регистрация: 31.05.2010
  • ICQ: --
  • Комментариев: 15
крутой урок,спасибо)

0

#4sasquatchpro

  • 15 сентября 2010 12:08
  • Регистрация: 15.09.2010
  • ICQ: --
  • Комментариев: 15
Спасибо , интересно было почитать )

0

#5Xan_cheg

  • 25 сентября 2010 21:00
  • Регистрация: 25.09.2010
  • ICQ: 614812746
  • Комментариев: 4
Ну если ты хоть немного смыслишь в html и css, то для тебя всё это и так понятно. Но автору спасибо, за труд.

0

#6SERGON

  • 12 ноября 2010 20:43
  • Регистрация: 31.01.2010
  • ICQ: --
  • Комментариев: 4
Цитата: Xan_cheg
Ну если ты хоть немного смыслишь в html и css, то для тебя всё это и так понятно.

А если только пытаешься разобраться? Для меня урок хоть как то разложил по полочкам представления о DIVах. Спасибо автору.

0

#7Excentrik

  • 8 декабря 2010 05:55
  • Регистрация: 6.12.2009
  • ICQ: --
  • Комментариев: 6
Какой понт использовать доктайп html 5, если не использовано ни чего из функционала этой спецификации?

Ну и поскольку в начале статьи было упомянуто о том, что div уменьшает трафик посредством уменьшения колличества аттрибутов, то было бы неплохо упомянуть и о том, что инлайновые стили ничего хорошего не несут.

Т.е. все style в идеале нужно выносить во внешние файлы т.к. там они хотя бы кэшируются браузером.

0

#8roman33

  • 21 декабря 2010 16:25
  • Регистрация: 21.12.2010
  • ICQ: --
  • Комментариев: 10
чет ничего не получается

0

#9Ilyas74

  • 23 декабря 2010 16:00
  • Регистрация: 4.11.2010
  • ICQ: 566716045
  • Комментариев: 2
Приведите примеры сайтов с такой версткой

--------------------

0

#10Djozes

  • 2 января 2011 04:06
  • Регистрация: 20.11.2010
  • ICQ: 2830600
  • Комментариев: 26
Спасибо , интересно было почитать )

0

#11max961

  • 9 января 2011 18:43
  • Регистрация: 10.05.2010
  • ICQ: --
  • Комментариев: 15
Очеень интересно, для ...

0

#12gneznakomec

  • 9 мая 2011 20:40
  • Регистрация: 7.03.2011
  • ICQ: --
  • Комментариев: 19
Эх, раньше мне эти дивы не как не давались, подвернулась бы эта статейка...

0
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии в данной новости.

Max-energy.top - Заработок на электросчетчиках;)

Skripters.info - все для вебмастера. Только эксклюзивный контент.

Создание шаблонов DLE, быстро и недорого! 3wave.com.ua

Бро лей на лучшую партнёрку

Почти бесплатный VDS хостинг!

Сео продвижение сайта

Не заказывайте продвижение сайта, пока не посмотрите наши условия

wildpixel.ru


Линолеум гетерогенный гомогенный .

stroyzel.ru


Хлеб оптом самара

Вкусный быстрый и простой Рецепт бездрожжевого хлеба в хлебопечке

fortfood.ru


Поддержи сайт
Скрипты, cms, шаблоны, статьи по раскрутке

Опросы

Как часто вы бываете на сайте?

Захожу 1-2 раза в день
1-2 часа в сутки
Более 2 часов
Почти целый день тут smile

Архив новостей
Ноябрь 2016 (7)
Октябрь 2016 (10)
Сентябрь 2016 (8)
Август 2016 (11)
Июль 2016 (14)
Июнь 2016 (17)

Последние комментарии:

Искать людей

Ваши переписки