Кросбраузерная трех-колоночная блочная верстка (Opera, FF, IE6)
Автор: Роман Чернышов
В интернете можно найти множество вариантов трех-колоночной блочной верстки, как кросбраузерную так и написанную только под современные браузеры поддерживающие различные модные свойства CSS. Но несмотря на это я все же решил выложить понравившийся, в последствии немного доработанный мною вариант верстки. В котором конечно же есть свои плюсы и возможные минусы, которых пока я не заметил. Верстка конечно очень проста и по этому я готов к оправданной и конструктивной критике.
Из приимуществ данного варианта верстки, отмечу следующие:
- все колонки растягиваются на любую высоту, в зависимости от наполнения контентом
- абсолютно не каких хаков
- отображается одинаково во всех браузерах
- без применения JavaScript или библиотек типа jQuery
- не используются таблици, только DIVы
- полная валидность всего кода
- работает во всех браузерах: ie6, ie7, ie8, firefox 3.5,opera 9, opera 10, chrome4
файл стилей style.css
Просмотр кода 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} div#container{text-align:left} div#content p{line-height:1.4} div#navigation{background:#B9CAFF} div#extra{background:#FF8539} div#footer{background: #333;color: #FFF} div#footer p{margin:0;padding:5px 10px} div#container{width:1000px;margin:0 auto} div#wrapper{float:left;width:100%} div#content{margin: 0 150px} div#navigation{float:left;width:150px;margin-left:-1000px} div#extra{float:left;width:150px;margin-left:-150px} div#footer{clear:left;width:100%} |
Код html
Просмотр кода PHP
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Пример: Кросбраузерная трех-колоночная блочная верстка</title> <meta http-equiv="content-type" content="text/html; charset=windows-1251"> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <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> </html> |
В блочной разбивке все хорошо, кроме того, что если слишком нагружена страница, то грузиться она долго. В таком случае предпочтительней табличная разбивка — но это моё личное мнение.