Кросбраузерная двух колоночная блочная верстка
Очень часто приходиться верстать двух-колоночные сайты с использованием блоков <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 “Кросбраузерная двух колоночная блочная верстка”
Оставить комментарий
Последние вопросы
- Перенести ли домены с Рег.ру на Бегет? спросил (а) Виктор
- RuCaptcha bot и бан по IP спросил (а) Родмик
- MySQL запрос с несколькими JOIN спросил (а) Александр
- MySQL выбрать данные из двух таблиц спросил (а) Виталий
- Редирект при переносе сайта на WordPress спросил (а) Николай
Последние комментарии
- Подключение сайта к хранилищу на Яндекс Облаке к записи
- Подключение сайта к хранилищу на Яндекс Облаке к записи
- Подключение сайта к хранилищу на Яндекс Облаке к записи
- PHP: распознать цифры, буквы с картинки к записи
- Анализ рынка Совместных покупок к записи
- Переустановка Apache к записи
- Интеграция сайта со СДЭК по API к записи
Меню
Archive
- +2020 (20)
- Декабрь 2020 (6)
- Сентябрь 2020 (2)
- Август 2020 (1)
- Июль 2020 (2)
- Май 2020 (2)
- Апрель 2020 (2)
- Март 2020 (2)
- Февраль 2020 (1)
- Январь 2020 (2)
- +2019 (18)
- Декабрь 2019 (3)
- Ноябрь 2019 (2)
- Октябрь 2019 (2)
- Сентябрь 2019 (1)
- Август 2019 (2)
- Июль 2019 (1)
- Июнь 2019 (1)
- Апрель 2019 (2)
- Март 2019 (1)
- Февраль 2019 (3)
- +2018 (44)
- Декабрь 2018 (4)
- Ноябрь 2018 (7)
- Октябрь 2018 (8)
- Сентябрь 2018 (1)
- Август 2018 (4)
- Июль 2018 (5)
- Май 2018 (3)
- Апрель 2018 (7)
- Март 2018 (1)
- Февраль 2018 (2)
- Январь 2018 (2)
- +2017 (19)
- Декабрь 2017 (2)
- Ноябрь 2017 (1)
- Октябрь 2017 (1)
- Сентябрь 2017 (2)
- Июль 2017 (1)
- Июнь 2017 (1)
- Май 2017 (2)
- Апрель 2017 (3)
- Март 2017 (2)
- Февраль 2017 (1)
- Январь 2017 (3)
- +2016 (37)
- Декабрь 2016 (3)
- Ноябрь 2016 (3)
- Октябрь 2016 (2)
- Сентябрь 2016 (3)
- Август 2016 (7)
- Июнь 2016 (3)
- Май 2016 (3)
- Апрель 2016 (3)
- Март 2016 (1)
- Февраль 2016 (1)
- Январь 2016 (8)
- +2015 (36)
- Ноябрь 2015 (5)
- Октябрь 2015 (4)
- Сентябрь 2015 (1)
- Август 2015 (8)
- Июнь 2015 (1)
- Май 2015 (4)
- Апрель 2015 (8)
- Март 2015 (3)
- Февраль 2015 (2)
- +2014 (26)
- Ноябрь 2014 (2)
- Октябрь 2014 (5)
- Сентябрь 2014 (6)
- Июль 2014 (1)
- Июнь 2014 (2)
- Май 2014 (3)
- Апрель 2014 (6)
- Февраль 2014 (1)
- +2013 (27)
- Декабрь 2013 (2)
- Ноябрь 2013 (1)
- Октябрь 2013 (1)
- Август 2013 (1)
- Июль 2013 (3)
- Июнь 2013 (10)
- Май 2013 (1)
- Апрель 2013 (2)
- Февраль 2013 (3)
- Январь 2013 (3)
- +2012 (42)
- Декабрь 2012 (2)
- Ноябрь 2012 (3)
- Октябрь 2012 (7)
- Сентябрь 2012 (2)
- Август 2012 (1)
- Июль 2012 (3)
- Июнь 2012 (2)
- Май 2012 (6)
- Апрель 2012 (2)
- Март 2012 (8)
- Февраль 2012 (5)
- Январь 2012 (1)
- +2011 (57)
- Декабрь 2011 (6)
- Ноябрь 2011 (2)
- Октябрь 2011 (3)
- Сентябрь 2011 (5)
- Август 2011 (4)
- Июль 2011 (3)
- Июнь 2011 (3)
- Май 2011 (3)
- Апрель 2011 (4)
- Март 2011 (10)
- Февраль 2011 (5)
- Январь 2011 (9)
- +2010 (43)
- Декабрь 2010 (7)
- Ноябрь 2010 (21)
- Октябрь 2010 (14)
- Сентябрь 2010 (1)
Свежие записи
- Регистрация программы для ЭВМ или базы данных в Роспатенте 27.12.2020
- Парсер для форума XenForo 22.12.2020
- Интеграция Тинькофф банк Эквайринг на сайт для приема платежей 18.12.2020
- PHP скрипт для проведения акций с призами на сайте(автоматизированный маркетинг) 16.12.2020
- Скрипт калькулятора емкости HDD для видеонаблюдения 03.12.2020


айайайа — подвал не прибит к низу