ГЛАВНАЯ СТРАНИЦА     НАШИ КОНТАКТЫ    

объявления

новости

В Нью-Йорке представили флагманский седан Volvo S90 2018
В линейку силовых агрегатов машины 2018 модельного года вошли три мотора – 250-сильный Т5, 316-сильный Т6 и Т8, выдающий 400 л.с. Внешне автомобиль выполнен в традиционном корпоративном дизайне шведской марки.
Chery представит новый компактный кроссовер Т17 в Шанхае
В Сети появились первые эскизы обновленного кроссовера Chery Т17. Автомобиль, готовый к серийному выпуску, будет представлен на автовыставке в Шанхае. Эксперты, изучившие эскизы, обнаружили в дизайне Chery Т17 концепт Beta.
Директор по маркетингу «Локомотива-Кубань» провёл рэп-презентацию команды
Директор по маркетингу краснодарского клуба «Локомотив-Кубань» Денис Лагутин провёл рэп-защиту презентации клуба на премии MarSpo в номинации «Дизайн».
АвтоВАЗ представил юбилейную «Ниву»
Новинка поступит в продажу до конца 2017 года. Какие доработки получит спецверсия, пока не сообщается. На представленных снимках видны юбилейные шильдики и новый дизайн колесных дисков.

реклама



Шаблонны- DIV vs. TABLE.

Автор: Алексей Петров aka Sq.Piglet

В этой статье я хочу рассказать о преимуществе блочной HTML или XHTML верстки над версткой таблицами и привести конкретные примеры блочной верстки самых распространенных моделей web-страниц.

Недостатки табличной верстки

У табличной верстки есть много недостатков. Рассмотрим их по порядку:

  1. Web-стандарты. Используя табличную верстку невозможно сверстать более или менее серьезный макет, который бы не содержал синтаксических ошибок в коде.
  2. Семантика. Таблицы были введены в HTML исключительно для облегчения представления табличной информации (прайс лист и т. д.), но поскольку в спецификации HTML 3.2 не было каких-либо других способов позиционирования элементов на странице, тогдашние web-мастера использовали таблицы для разметки страницы на блоки (меню, шапка, подвал и т. д.).
  3. Нелогичность поведения таблиц. Если вы верстали или верстаете таблицами, то наверняка сталкивались с нелогичностью поведения таблиц в сложных макетах и разных браузерах. Это связано с тем, что таблицы не предназначены для верстки и с тем, что большинство браузеров отрисовывают страницы с табличной версткой в кварк режиме, а этот режим у всех браузеров разный.
  4. Читабельность кода и редизайн. Вы когда-нибудь пробовали разобраться в коде чужого сайта, сверстанного таблицами — наверное это было нелегко. А внести какие-либо серьезные изменения в дизайн иногда вообще невозможно, легче сверстать все заново.
  5. Размер кода. В подавляющем большинстве случаев верстка таблицами значительно увеличивает код страницы по сравнению с блочной версткой.

Таким образом, мы выяснили, что табличная верстка это не только вчерашний день, но и много проблем для верстальщика и пользователя.

Кроссбраузерность блочной верстки

У блочной верстки есть один единственный недостаток — отсутствие полноценной поддержки CSS 2.0 в некоторых браузерах. Но так ли все плохо? По глобальной статистике «Hotlog» на момент написания этой статьи (15.08.2005) ситуация следующая:

статистика использования браузеров на 15.08.2005
Статистика использования браузеров на 15.08.2005

Теперь выясним, какие из приведенных в таблице браузеров не поддерживают CSS 2.0. Это: MSIE 4.0 (0,59 %); Netscape 3.0 (0,16 %); Netscape 4.7 (0,15 %). Итого: 0,9 %. Немного, не правда ли? Стоит ли думать о 0,9 % пользователей старых браузеров, которых с каждым днем становится все меньше, и создавать проблемы себе и нормальным пользователям? Надо также отметить, что не все из оставшихся 99,1 % браузеров имеют 100 % поддержку CSS 2.0, но с их недостатками можно весьма успешно бороться.

Преимущества блочной верстки

  1. Соответствие стандартам. Правильная блочная верстка полностью соответствует стандартам HTML и CSS. Это обеспечивает легкое понимание вашего кода теми, кто знаком со стандартами и гарантируемую поддержку в новых версиях браузеров.
  2. Отделение содержания от представления. Это обеспечивает легко читабельный код и смену дизайна всего сайта простым изменением файла стилей.
  3. Правильное отображение страниц разными устройствами. Возможность создания разных файлов стилей для разных устройств (КПК, принтер и т. д.) без изменения HTML кода.
  4. Легкость и логичность верстки. Вы просто берете нужный блок и, используя стили, определяете его размеры, вид и место на странице.

Примеры резиновых блочных версток

Поскольку верстка жестких (не тянущихся) макетов блочной версткой не представляет какой-либо сложности, то мы будем рассматривать примеры только резиновой верстки.

Сразу отмечу, что для соответствия стандартам и избежания проблем с браузерами семейства Internet Explorer, обязательно использовать правильный DOCTYPE (тег, объявляющий версию и тип языка разметки). Вот несколько примеров:

  1. «<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    » — HTML версии 4.01 переходный.
  2. «<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    » — HTML версии 4.01 строгий.
  3. «<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    » — XHTML версии 1.0 строгий.

Вы можете использовать тот стандарт, который вам подходит. Это не повлияет на качество верстки, а я в своих примерах буду использовать XHTML 1.0.

Буква «Г»

Одна из стандартных схем расположения элементов на странице и самая простая в верстке.

схема расположения элементов на странице
Схема расположения элементов на странице

Сразу договоримся, как должны вести себя блоки в этой верстке:

  1. Header (шапка). Тянется по горизонтали, но не менее 600 px, высота 150 px.
  2. Menu (меню). Тянется по вертикали и всегда такой же высоты, как блок info, ширина 250 px.
  3. Info (информация). Тянется по вертикали и горизонтали, но не уже 350 px.

Подготовим XHTML код нашей страницы:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>

<title></title>
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1251" />
</head>
<body>
<div id="header">HEADER (шапка)</div>

<div id="menu">MENU (меню)</div>
<div id="info">INFO (информация)</div>
</body>
</html>

смотрим, что получилось

Теперь напишем стили для блоков:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">

<head>
<title></title>
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1251" />
<style type="text/css">
html,body{
margin:0;
padding:0
}

/* убираем отступ у тега body */

#header{
height:150px;
min-width:600px;
background:#FFEF97
}

/* высота 150 px, минимальная ширина 600 px, цвет фона */

#menu{
width:250px;
float:left;
background:#FFC597
}

/* ширина 250 px, этот блок обтекает с левой стороны
следующий блок, цвет фона */

#info{
min-width:350px;
margin-left:250px
}

/* минимальная ширина 350 px, отступ слева 250 px */


</style>
</head>
<body>
<div id="header">HEADER (шапка)</div>
<div id="menu">MENU (меню)</div>
<div id="info">INFO (информация)</div>

</body>
</html>

смотрим, что получилось

Вот в принципе и все. Но мы столкнулись с несколькими проблемами. Будем решать их последовательно:

  1. Браузеры семейства Internet Explorer не понимают свойство CSS «min-width», которое задает минимальный размер блочного элемента. Решается это следующим CSS хаком — следует создать еще один контейнер, в который поместить все содержимое тега body, и написать для него следующие стили — «{width: expression(((document.documentElement.clientWidth || document.body.clientWidth) < 600)? "600px" : "100%")}».
  2. Блок MENU не тянется по вертикали, занимая все оставшееся пространство, а растягивается контентом. Решить в лоб эту проблему нельзя, но можно создать видимость решения. Для этого следует создать изображение такого же цвета, что и цвет фона меню, и такого же размера по горизонтали. Задать его в качестве фона тега body и заставить размножаться фоновое изображение только по вертикали
    — «html,body{margin:0; padding:0; background:url(bg-menu.gif); background-repeat:repeat-y}».

смотрим, что получилось

Описание глюков

Для избежания появления нежелательных отступов между блоками MENU и INFO в браузерах семейства Internet Explorer не задавайте вертикальные размеры этим блокам.

О прелестях CSS

Изменив свойства «float:left» блока MENU на «float:right» и «margin-left:250px» блока INFO на «margin-right:250px» и добавив свойство «background-position:right» тегу body, получим вместо левого меню правое.

смотрим, что получилось

Кроссбраузерность

IE 5+; Opera 6+; Mozilla 1.3+; FF 1+.

Буква «С»

Такая же верстка, как и в предыдущем примере, только с footer (подвал).

схема расположения элементов на странице
Схема расположения элементов на странице

Описание поведения блоков:

  1. Header (шапка). Тянется по горизонтали, но не менее 600 px, высота 150 px.
  2. Menu (меню). Тянется по вертикали и всегда такой же высоты, как блок info, ширина 250 px.
  3. Info (информация). Тянется по вертикали и горизонтали, но не уже 350 px.
  4. Footer (подвал). Всегда находится под блоками info и menu, тянется по горизонтали, но не менее 600 px.

Возьмем код предыдущего примера и добавим в него блок footer:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">

<head>
<title></title>
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1251" />
<style type="text/css">
html,body{
margin:0;
padding:0;
background:url(bg-menu.gif);
background-repeat:repeat-y
}

/* убираем отступ у тега body,
задаем фоновое изображение, размножающееся по вертикали */

#header{
height:150px;
min-width:600px;
background:#FFEF97
}

/* высота 150 px, минимальная ширина 600 px, цвет фона */

#menu{
width:250px;
float:left;
background:#FFC597
}

/* ширина 250 px, этот блок обтекает с левой стороны
следующий блок, цвет фона */

#info{
min-width:350px;
margin-left:250px
}

/* минимальная ширина 350 px, отступ слева 250 px */

#body{
width: expression(((document.documentElement.clientWidth
|| document.body.clientWidth) < 600)?
"600px" : "100%")
}


</style>
</head>
<body>
<div id="body">
<div id="header">HEADER (шапка)</div>
<div id="menu">MENU (меню)</div>

<div id="info">INFO (информация)</div>
<div id="footer">FOOTER (подвал)</div>
</div>
</body>
</html>

Опишем стили для блока footer — «#footer{height:20px;min-width:600px;background:#B9CC8A;clear:both}».
Где «clear:both» — прекращение обтекания.
Перенесем свойства «background:url(bg-menu.gif);background-repeat:repeat-y» тега body блоку body.

смотрим, что получилось

Кроссбраузерность

IE 5+; Opera 6+; Mozilla 1.3+; FF 1+.

Буква «О»

Такая же верстка, как и в предыдущем примере, только с двумя меню (правым и левым).

схема расположения элементов на странице
Схема расположения элементов на странице

Описание поведения блоков:

  1. Header (шапка). Тянется по горизонтали, но не менее 800 px, высота 150 px.
  2. Menu (меню) правое и левое. Тянется по вертикали и всегда такой же высоты, как блок info, ширина 250 px.
  3. Info (информация). Тянется по вертикали и горизонтали, но не уже 350 px.
  4. Footer (подвал). Всегда находится под блоками info и menu, тянется по горизонтали, но не менее 800 px.

Возьмем код предыдущего примера и добавим в него три новых блока. Первый — для задания фона правому меню, и еще два — внутрь блока info. Первый внутренний блок будет правым меню, а второй будет заменять блок info.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>

<title></title>
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1251" />
<style type="text/css">
html,body{
margin:0;
padding:0
}

/* убираем отступ у тега body */

#header{
height:150px;
min-width:800px;
background:#FFEF97
}

/* высота 150 px, минимальная ширина 800 px, цвет фона */

#menu{
width:250px;
float:left;
background:#FFC597
}

/* ширина 250 px, этот блок обтекает с левой стороны
следующий блок, цвет фона */

#info{
min-width:550px;
margin-left:250px
}

/* минимальная ширина 550 px, отступ слева 250 px */

#body{
background:url(bg-menu.gif);
background-repeat:repeat-y;
width: expression(((document.documentElement.clientWidth ||
document.body.clientWidth) < 800)? "800px" : "100%")}

/* задаем фоновое изображение, размножающееся по вертикали,
css хак для Internet Explorer, имитация свойства min-width */

#footer{
height:20px;
min-width:800px;
background:#B9CC8A;
clear:both
}

/* высота 20 px, минимальная ширина 800 px,
цвет фона, прекращение обтекания */


</style>
</head>
<body>
<div id="body">
<div id="body_2">
<div id="header">HEADER (шапка)</div>

<div id="menu">MENU (меню)</div>
<div id="info">
<div id="right_menu">MENU (меню)</div>
<div id="info_int">INFO (информация)</div>

</div>
<div id="footer">FOOTER (подвал)</div>
</div>
</div>
</body>
</html>

смотрим, что получилось

Теперь опишем стили для новых блоков и подкорректируем для старых. Блоку body_2 добавим фон и определим позицию фона справа, определим минимальную ширину — «background:url(bg-menu.gif); background-repeat:repeat-y; background-position:right; min-width:800px». Блок right_menu должен обтекать блок info_int справа — «float:right;width:250px;background:#FFC597». Поставим блоку info_int отступ справа, чтобы при переполнении он не налезал на блок right_menu — «margin-right:250px».

смотрим, что получилось

Кроссбраузерность

IE 5+; Opera 6+; Mozilla 1.3+; FF 1+.

Выравнивание блоков по центру

Переходя на блочную верстку, верстальщики сталкиваются с проблемой выравнивания блоков по центру. Тут все очень просто. Единственное условие: верстальщик должен точно знать размер блока в любых предусмотренных CSS единицах измерения. Для того, чтобы выровнять блок по центру экрана, надо определить для него следующие стили — «position:absolute;left:50%;margin-left:−половина ширины выравниваемого блока».

Пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">

<head>
<title></title>
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1251" />
<style type="text/css">
#center{
width:200px;
height:200px;
background:#f00;
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px
}

/*
ширина 200 px, высота 200 px, фон,
абсолютное позиционирование,
подвинуть блок вправо на 50 %,
подвинуть блок вниз на 50 %,
отступ слева -100 px, отступ сверху -100 px
*/


</style>
</head>
<body>
<div id="center">CENTER</div>
</body>
</html>

смотрим, что получилось

Для того, чтобы отцентрировать блок внутри контейнера, следует заменить CSS свойство «position:absolute» на «position:relative».

Кроссбраузерность

IE 5+; Opera 6+; Mozilla 1.3+; FF 1+.

 

Статьи проекта TEMPL.RU:
Как верстать сайт? Шаблонная вёрстка сайта.
Шаблонны- DIV vs. TABLE.
Как сделать дизайн сайта простым и удобным.
Преимущества и недостатки табличной верстки.
XHTML+CSS. Преимущества очевидны.
7 советов начинающему Вэб-Мастеру.
Простые советы вэб-дизайнеру.
Советы начинающим вэб-мастерам.
Создание меню с применением CSS и DHTML
Практика сайтостроения.