Организация блочной верстки в 2 колонки (Рейтинг: +2)

⚠️ Bymas - Форум разработчиков

Милый пушистый сайт !!!!

Статью писал для своего сайта, но по некоторым причинам решил все свои статьи перезалить сюда (что бы не утерять)!

Часто случается такое, что заходя на сайт вначале дизайн расположен как-попало, шапка вверху, левый блок ниже шапки, блок с контентом ниже, и т.д!
в 90% случаев это следствие разметки при помощи <table>...</table>.
Что бы такого не было, желательно делать это в блоках)

Так вот, для начала укажем тип документа, и укажем все необходимое для работы со страницей!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>My Page</title>
 </head>
 <body>
 
 </body>
</html>

Теперь в тело страницы, добавим 4 блока: head, left, right, foot

<div class="head">
 Head page
</div>

<div class="left">
 Left main
</div>

<div class="right">
 Right main
</div>
 
<div class="foot">
 Foot page
</div>

Теперь можно перейти к css.

Мы будем использовать:
Свойство border - для того, что бы показать бордюры блока.
Свойство margin - для отступов между блоками.
Свойство float - для обтекания текста с определенной стороны.
Свойство width - для определение ширины блока.

/* Левый блок */
.left {
    float:left;
    width: 100px;
    border: 1px solid #ccc;
}

/* Правая сторона */
.right {
    border: 1px solid #ccc;
    margin-left: 110px;
}

/* Шапка и ноги сайта */
.foot, .head {
    border: 1px solid #ccc; 
    margin: 2px 0px 2px 0px;
}

В итоге у нас должно получится так:

+-----------------------------+
| Head page                   | 
+-----------------------------+
| Left main | Right main      |
+-----------------------------+
| Foot page                   | 
+-----------------------------+

Вот и все =)
---------------
Планируется еще одна статья, где будет показано как выполнить блочную верстку в 3 колонки smile

Добавил: Nu3oN 16.11.2011 / 20:20

css, верстка, блочная верстка, дизайн, web

Рейтинг: +2

Просмотры: 2118
Комментарии (0) »