- Ошибка
Блочная верстка сайта с помощью div и css
| WEB-строительство - Верстка сайта |
Здравствуйте. Для многих уже не секрет, что блочная верстка web страниц гораздо эффективнее табличной. Во первых страница получается меньшего объёма. Во вторых лучше воспринимается поисковиками. В третьих быстрее отображается т.к. <DIV></div> отображается сразу после загрузки, ну а разметка не зря называется блочной. Каждый такой блок отображается самостоятельно в отличии от таблиц - которая отображается лишь после полной загрузки. Но эти преимущества даются не для всех так просто ведь <DIV> это строковый элемент, и разместить его в нужном месте не всегда получается. О одном решении этого вопроса я и написал в этой статье.
Если у Вас таких проблем не возникает то вероятно что читать данную статью вам не обязательно. Разве что для того что бы поправить и прокомментировать данный подход к блочной верстке. Вся конструктивная критика воспринимается адекватно.
Итак это было лирическое отступление, продолжим...
Верстать сайт мы будем по простому шаблону.
Как видите страница содержит пять блоков: Header (Шапка), Sidebar1 (Левая колонка), Sidebar2 (Правая колонка), MainContent (Основное содержимое), footer (Подвал)
Создайте индексный файл html, в котором мы и будем верстать наш сайт. Я надеюсь Вы знаете как это делается поэтому не буду сейчас объяснять элементарные вещи, описанные к тому же во многих в том числе и моих предыдущих статьях. Начинаться файл обязательно должен с DOCTYPE.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Добавьте в наш файл шесть блоков <DIV></div>, вложенные по следующей схеме:
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Для чего нам потребовался шестой блок <div>? Он будет оберткой для остальных и будет ограничивать остальные блоки. Таким образом у вас должен получиться примерно такой код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Моя первая страница сверстанная блоками</title>
</head>
<body>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
Что же получилось при запуске? Чистый лист, понятно, мы ведь ничего не вводили, а блоки невидимы. Давайте увидим их. Для этого нам прийдётся создать соответствующие классы CSS, в которых мы и определим фон и прочие параметры блоков. Благодаря которым они и будут вести себя так как мы задумали. Опредилите стили для каждого элемента. У меня это получилось вот так:
<style type="text/css">
<!--
body {
color: #000000;
}
.cbody #container {
background: #FFFFFF;
}
.cbody #header {
background: #33CCFF;
}
.cbody #sidebar1 {
background: #FF99CC;
}
.cbody #sidebar2 {
background: #FF99CC;
}
.cbody #mainContent {
background:#FFFFFF;
}
.cbody #footer {
background:#336699;
}
-->
</style>
Данный код вы должны вставить между тегами <head> и </head>. Незабудьте также присвоить тегу <body> класс "cbody", всем тегам <div> присвоить соответствующие "id".
<div id="container">
<div id="header">Шапка</div>
<div id="sidebar1">левый сайдбар</div>
<div id="sidebar2">правый сайдбар</div>
<div id="mainContent">Содержание</div>
<div id="footer">Подвал</div>
</div>
Теперь блоки будут видны
Вот только результат никак не похож на требуемый макет. В этом и заключается особенность блочной верстки, строковые элементы отображаются строками, а нам нужно блоками. Займемся теперь настройкой css стилей наших блоков.
Разместим нашу страницу по центру экрана и назначим ей ширину 800 пикселей. Для этого добавляем соответствующие селекторы в класс .cbody #container.
.cbody #container {
background: #FFFFFF;
position: relative; /* относительная позиция отцентрует блок относительно левого и правого отступов*/
width: 780px; /* используем на 20px меньше из полных 800px ширины это позволит избежать проблем с горизонтальной полосой прокрутки в браузерах Chrome */
margin: 0 auto; /* параметр auto в союзе с width центрует страницу*/
text-align: left; /* это заменяет text-align: center на элементе body. */
}
редактируем заголовок: .cbody #header
.cbody #header {
height: 60px;
padding: 0 10px 0 20px; /* дополнительные отступы слева и снизу для красоты. */
background-color: #33CCFF;
}
Изменяем стиль .cbody #sidebar1
.cbody #sidebar1 {
position: absolute;
top: 60px; /* смещение сверху на высоту шапки */
left: 0; /* положение слева */
width: 150px; /* ширина колонки, фоновый цвет будет присутствовать только в пределах блока */
padding: 15px 10px 15px 20px; /* отступы */
background-color: #FF99CC;
}
.cbody #sidebar2
.cbody #sidebar2 {
position: absolute;
top: 60px; /* смещение сверху на высоту шапки */
right: 0; /* положение справа */
width: 160px; /* ширина колонки, фоновый цвет будет присутствовать только в пределах блока */
padding: 15px 10px 15px 20px; /* отступы */
background-color: #FF99CC;
}
.cbody #mainContent
.cbody #mainContent {
margin: 0 200px; /* правое и левое поле создают две колонки по сторонам страницы. Безразлично, сколько sidebar содержит, пространство колонки останется неизменным. */
padding: 0 10px; /* запомните padding пространство внутри div, а margin пространство за пределами div*/
}
.cbody #footer
.cbody #footer {
padding: 0 10px 0 20px;
background-color: #336699;
}
в результате получается следующий код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<meta name="author" content="Oleg Bugaev (Seth)"/>
<meta name="site" content="www.utgarda.ru"/>
<title>Моя первая страница сверстанная блоками</title><style type="text/css">
<!--
body {
color: #000000;
}
.cbody #container {
background: #FFFFFF;
position: relative; /* относительная позиция отцентрует блок относительно левого и правого отступов*/
width: 780px; /* используем на 20px меньше из полных 800px ширины это позволит избежать проблем с горизонтальной полосой прокрутки в браузерах Chrome */
margin: 0 auto; /* параметр auto в союзе с width центрует страницу*/
text-align: left; /* это заменяет text-align: center на элементе body. */
}
.cbody #header {
height: 60px;
padding: 0 10px 0 20px; /* дополнительные отступы слева и снизу для красоты. */
background-color: #33CCFF;
}
.cbody #sidebar1 {
position: absolute;
top: 60px; /* смещение сверху на высоту шапки */
left: 0; /* положение слева */
width: 150px; /* ширина колонки, фоновый цвет будет присутствовать только в пределах блока */
padding: 15px 10px 15px 20px; /* отступы */
background-color: #FF99CC;
}
.cbody #sidebar2 {
position: absolute;
top: 60px; /* смещение сверху на высоту шапки */
right: 0; /* положение справа */
width: 160px; /* ширина колонки, фоновый цвет будет присутствовать только в пределах блока */
padding: 15px 10px 15px 20px; /* отступы */
background-color: #FF99CC;
}
.cbody #mainContent {
margin: 0 200px; /* правое и левое поле создают две колонки по сторонам страницы. Безразлично, сколько sidebar содержит, пространство колонки останется неизменным. */
padding: 0 10px; /* запомните padding пространство внутри div, а margin пространство за пределами div*/
}
.cbody #footer {
padding: 0 10px 0 20px;
background-color: #336699;
}
-->
</style>
</head>
<body class="cbody">
<div id="container">
<div id="header">Шапка</div>
<div id="sidebar1">левый сайдбар</div>
<div id="sidebar2">правый сайдбар</div>
<div id="mainContent">
<p><strong>Содержание</strong></p>
<p>контент вашего сайта</p>
</div>
<div id="footer">Подвал</div>
</div>
</body>
</html>
Результат работы перед вами. Надеюсь вы пользуетесь нормальным браузером и он отображает разметку как положено.
Содержание
Контент вашегого сайта
Author: Seth | 