KODERS.KZ


Альфа-версия сайта

Главная | Форум | Все статьи | Контакты | Еще статьи

Приемы css верстки. 3-x колоночный дизайн на DIV-ах

В сети очень много сайтов сверстанных с помощью таблиц. Этот метод очень распространен, в некоторой степени прост. Но, по моему мнению, есть более удобные и универсальные способы создания html страничек. Об одном из них я Вам сегодня расскажу. Имя ему – «блочная» верстка. Прочитав эту статью, Вы научитесь создавать трех колоночные страницы. Замечу, что статья рассчитана для новичков с минимальными знаниями CSS. 
Сразу нужно определиться со структурой страницы.

Многие сайты верстаются по следующей схеме:

  1. Шапка страницы (Лого, навигация)
  2. Содержание страницы разделено на три колонки.
  3. Низ документа (Копирайты и т.п.)

Листинг. Примерный код.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>…</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div id="frame">

<div id="contentheader">
.....
</div>

<div id="contentleft">
....
</div>

<div id="contentcenter">
....
</div>

<div id="contentright">
...
</div>

<div id="contentbottom">
....
</div>

</div>

</body>
</html>

Сам css подгружается из style.css. Начнем разбор этого файла.

«body»

body {
font-family: Tahoma; //гарнитура шрифта.
font-size:12px; //размер шрифта 12 пикселей.
}

 

Первым идет блок «frame»:

#frame {
width:800px; //ширина блока 800 пикселей.
margin-right:auto; //центруем документ
margin-left:auto;  // центруем документ
padding:0px;       // внутренний отступ между содержимым блока и рамкой.
text-align:left;   // выравнивание текста, в данном случае по левому краю.
}
Этот блок является основным. Внутри него располагаются все остальные блоки. Параметр «margin» я выставил «auto». Т.к мне нужно центрирование содержимого страницы.

Блок «contentheader». Шапка страницы.

#contentheader {
width:800px;
background: #fff;
}

Блок «contentleft». Левый блок.

#contentleft {
width:227px;  //указываем ширину. Можно изменить по своему усмотрению.
padding:0px;
float:left;
background:white; //цвет фона. В данном случае фон белый.
}

Опция «float» служит для указания расположения блока, а также настройки взаимодействия элемента с другими элементами. В данном случае «float:left;», т.е блок выравнивается по левой стороне и остальные элементы обтекают его справа.

Блок  «contentcenter». Центральный блок.

#contentcenter {
width: 307px;
padding: 0px;
float: left;
background: #fff;
}

Блок «contentright». Правый блок.

#contentright
{
width:266px;
padding:0px;
float:left;
background: #fff;
}

Блок «contentbottom». Нижний блок.

#contentbottom{
width: 800px;
padding: 0px;
float:left;
height: 50px; //высота блока.
}

Все! Страница готова. Вы можете взять за основу пример предложенный мной, совершенствовать его по своему усмотрению, добавлять различные опции.

Новое на сайте



Партнерка



Спонсоры

Студия KazART



При использовании любого материала с сайта, ссылка на koders.kz обязательна.