Организация блочной верстки в 2 колонки (Рейтинг: +2)
Статью писал для своего сайта, но по некоторым причинам решил все свои статьи перезалить сюда (что бы не утерять)!
Часто случается такое, что заходя на сайт вначале дизайн расположен как-попало, шапка вверху, левый блок ниже шапки, блок с контентом ниже, и т.д!
в 90% случаев это следствие разметки при помощи <table>...</table>.
Что бы такого не было, желательно делать это в блоках)
Так вот, для начала укажем тип документа, и укажем все необходимое для работы со страницей!
Теперь в тело страницы, добавим 4 блока: head, left, right, foot
Мы будем использовать:
Свойство border - для того, что бы показать бордюры блока.
Свойство margin - для отступов между блоками.
Свойство float - для обтекания текста с определенной стороны.
Свойство width - для определение ширины блока.
В итоге у нас должно получится так:
---------------
Планируется еще одна статья, где будет показано как выполнить блочную верстку в 3 колонки
Добавил: Nu3oN
16.11.2011 / 20:20Часто случается такое, что заходя на сайт вначале дизайн расположен как-попало, шапка вверху, левый блок ниже шапки, блок с контентом ниже, и т.д!
в 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 колонки
Рейтинг:
+2
Просмотры: 2072Комментарии (0) »