Кросбраузерная двух колоночная блочная верстка
Роман Чернышов 
CSS, HTML 
div, валидная, две колонки, кросбраузерная верстка
Комментариев 1
Дата 3 Ноя
Очень часто приходиться верстать двух-колоночные сайты с использованием блоков <DIV>, на мой взгляд это один из самых распространенных вариантов представления информации на сайте. Во первых нет излишней перегруженности, во вторых простота реализации. Так как мне приходиться часто верстать сайты именно в таком формате я решил поделиться с вами способом построения такой конструкции.
Стили:
Просмотр кода PHP
html,body{margin:0;padding:0} body{font: 76% arial,sans-serif;text-align:center} p{margin:0 10px 10px} a{display:block;color: #981793;padding:10px} div#header h1{height:80px;line-height:80px;margin:0; padding-left:10px;background: #EEE;color: #79B30B} #container{text-align:left} #content p{line-height:1.4} #navigation{background:green} #extra{background:yellow} #footer{background: #333;color: #FFF} #footer p{margin:0;padding:5px 10px} #container{width:900px;margin:0 auto} #content{float:right;width:500px} #navigation{float:left;width:200px} #extra{float:left;clear:left;width:200px} #footer{clear:both;width:100%} |
И непосредственно сам HTML код:
Просмотр кода PHP
<body> <div id="container"> <div id="header"><h1>Шапка сайта</h1></div> <div id="wrapper"> <div id="content"> <p>Основной блок, для размещения статей</p> </div> </div> <div id="navigation"> <p>Блок навигации, для размещения ссылок и всего что только пожелаете</p> </div> <div id="extra"> <p>Дополнительный блок в котором можно разместить баннеры или иную рекламу.</p> </div> <div id="footer"><p>Подвал, счетчики и копирайты</p></div> </div> </body> |
Преимущества моего варианта верстки:
- работает во всех браузерах, включая IE 6
- используется минимальное количество тегов и свойств стилей CSS
- нет абсолютно ни каких хаков, все работает на чистом коде
- нет использования скриптов JavaScript или библиотек типа jQuery, MooTools
- полностью валидный код, соответствующий стандартам HTML W3C
- вся верстка построена исключительно на блоках DIV
- несколькими изменениями в коде легко превращается в резиновую, если это нужно
Имея под рукой этот готовый вариант, вы всегда сможете начать верстать шаблон для любой CMS без предварительной проработки вроде-бы такого простого, но в то же время не послушного действа как структура страницы.
Похожие записи
1 Comment to “Кросбраузерная двух колоночная блочная верстка”
Оставить комментарий
О блоге и авторе
Поиск по блогу
Блогеры пишут
-
Роман Чернышов: Для работы капчи на PHP 5.6, замените в файле class.captcha.php строку 264 $ifunc( $this -> i [...]
-
-
Александр: Может скрипт комментариев блокирует сообщения с кодом? Или как длинный текст не проходит?
-
-
Портфолио Все работы
с 2009 года по сегодняшний день, создано более 300 сайтов...
айайайа — подвал не прибит к низу