Кросбраузерная трех-колоночная блочная верстка (Opera, FF, IE6)

Author Роман Чернышов    Category CSS, HTML     Tags , , , , , Комментариев 1 Дата 12 Окт

css div Кросбраузерная трех колоночная блочная верстка (Opera, FF, IE6)В интернете можно найти множество вариантов трех-колоночной блочной верстки, как кросбраузерную так и написанную только под современные браузеры поддерживающие различные модные свойства CSS. Но несмотря на это я все же решил выложить понравившийся, в последствии немного доработанный  мною  вариант верстки. В котором конечно же есть свои плюсы и возможные минусы, которых пока я не заметил. Верстка конечно очень проста и по этому я готов к оправданной и конструктивной критике.

Из приимуществ данного варианта верстки, отмечу следующие:

  • все колонки растягиваются на любую высоту, в зависимости от наполнения контентом
  • абсолютно не каких хаков
  • отображается одинаково во всех браузерах
  • без применения JavaScript или библиотек типа jQuery
  • не используются таблици, только DIVы
  • полная валидность всего кода
  • работает во всех браузерах: ie6, ie7, ie8, firefox 3.5,opera 9, opera 10, chrome4

файл стилей style.css

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

<!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>

1 Comment to “Кросбраузерная трех-колоночная блочная верстка (Opera, FF, IE6)”

  • Игорь 28.06.2012 в 11:20 пп

    В блочной разбивке все хорошо, кроме того, что если слишком нагружена страница, то грузиться она долго. В таком случае предпочтительней табличная разбивка — но это моё личное мнение.

Оставить комментарий

О блоге и авторе

Добро пожаловать на блог веб-разработчика! На протяжении многих лет, начиная с 2009 года, я занимаюсь созданием специализированных сайтов, сервисов и крупных веб-порталов. Мною было создано несколько сотен сайтов, большинство из которых работают на ПО созданном под заказ, а также на готовом ПО которое я разрабатываю на протяжении всего периода моей деятельности. Это: CMS "Совместные покупки", CMS "osRealty", CMS "Спорт прогнозы" и многое другое.

На страницах моего блога вы найдете множество информации о программировании, о появлении новых разработок, сможете ознакомиться с товарами и услугами которые я предоставляю. А также сможете получить консультацию, заказать разработку сайта или приобрести готовое решение, для реализации собственного проекта.

Поиск по блогу
Категории
Архив
Новое на сайте
Блогеры пишут
  • Роман Чернышов: Для работы капчи на PHP 5.6, замените в файле class.captcha.php строку 264 $ifunc( $this -> i [...]
  • Роман Чернышов: Схема такая: 1) На сайте есть виртуальные кошельки (далее ВК) 2) При пополнении пользователем ВК, [...]
  • Александр: Может скрипт комментариев блокирует сообщения с кодом? Или как длинный текст не проходит?
  • Александр: Пытаюсь в который раз здесь показать код, но страница обновляется, и не сообщения, ни любого оповеще [...]
  • Роман Чернышов: Лично у меня интерес к продаже ссылок пропал уже давно. Преимущество сапы, это то - что ссылки можно [...]
Портфолио Все работы


www.detskiy-mir.net
www.detskydoctor.ru
www.betelit.ru
www.all-alliance.ru
www.videogonok.ru
www.carpfishing.by
www.property-greek.com
www.domcons.ru

с 2009 года по сегодняшний день, создано более 300 сайтов...