Структура блочной вёрстки
Наиболее часто встречающаяся вёрстка - блочная. Однако, не все правильно верстают блоками, в основном, это те, кто делает это впервые. Как показывает практика, такие новички долго мучаются с первой блочной вёрсткой, а уже последующие им даются гораздо легче, так как они уже знают структуру блочной вёрстки. И чтобы облегчить немного жизнь новичкам, я в данной статье покажу уже готовую структуру блочной вёрстки.
Привожу HTML-код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Заголовок страницы</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Описание страницы." />
<meta name="keywords" content="ключевые слова страницы" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">Шапка сайта</div>
<div id="content">
<div id="left">Левые блоки</div>
<div id="right">Правые блоки</div>
<div id="center">Центральная часть</div>
</div>
<div class="clear"></div>
<div id="footer">Содержимое подвала</div>
</body>
</html>
И CSS-код:
#left {
float: left; // Левые блоки размещаем слева
width: 200px; // Установка ширины 200 пикселей
}
#right {
float: right; // Правые блоки размещаем справа
width: 200px; // Установка ширины 200 пикселей
}
#center {
margin-left: 200px; // Отступ слева 200 пикселей
margin-right: 200px; // Отступ справа 200 пикселей
}
.clear {
clear: both; // Отменяем позиционирование (влияние float)
}
Эту структуру Вы можете смело копировать на свой сайт. Безусловно, некоторые элементы можно менять. Например, размеры левых и правых блоков. Соответственно, надо будет поменять и отступы у центрального блока. Также если вёрстка фиксированная, или она не должна растягиваться на всю страницу, то необходимо все блоки добавить в другой, самый верхний, у которого задать фиксированную ширину в пикселях (фиксированная вёрстка) или в процентах (резиновая, но не на всю страницу).
Надеюсь, данная структура блочной вёрстки поможет новичкам с минимальным количеством проблем сверстать свою первую страницу блоками.
-
Создано 01.06.2012 12:27:27
-
Михаил Русаков
Комментарии (61):
А что же делать с РАЗНЫМИ РАСШИРЕНИЯМИ ЭКРАНОВ у пользователей ?( Может через JS проверять, и устанавливать ширину блоков?)))))
Ответить
Для этого можно ставить ширину в процентах.
Ответить
Если ширина блоков будет в процентах, то не повлияет это на фиксированную ширину контента? например картинка 200х200 будет одиннаково отображаться на всех разрешениях ? т.е. 200х200
Ответить
Размер картинки тогда надо тоже задавать в процентах.
Ответить
Михаил, а порядок описания селекторов важен? Или можно все id по алфавиту написать?
Ответить
Нет, не важен.
Ответить
Михаил, я правильно понимаю, что на вашем сайте резиновая верстка, а главная страница таких сайтов как яндекс и мэйл фиксированная?
Ответить
Нет, у них тоже вёрстка резиновая.
Ответить
У них при масштабировании контент сжимается, а у вас при любом масштабе растягивается на весь эран. Т.е. у вас в %, а у них в px блок "content"?
Ответить
Надо смотреть не на отдельный блок, а на весь сайт в целом. Безусловно, какой-то кусок и не сжимается. У меня тоже не сжимаются чекбоксы и кнопки, например.
Ответить
А вы напишите статью как прижать подвал к низу? Если напишите то и расскажите про все методы? Просто это очень полезная вещь!!!
Ответить
Может напишу, в любом случае спасибо за идеи для статей.
Ответить
За идеи спасибо не надо, Я взял на себя смелость лазить по интернету в поисках плохих статей - чтобы вы их усовершенствовали и раскрыли!!!
Ответить
Здравствуйте, Михаил. А как убрать расстояния между блоками в IE7? У меня шапка сайта состоит из трёх блоков, которые должны сливаться воедино. В Мозиле и Опере отображается как надо, а в Експлорере почему-то есть маленькие промежутки между каждым блоком. Что делать? Применял CSS-хаки - не помогло. Спасибо.
Ответить
Тут много с чем может быть проблема. IE любит лишние пробелы в коде воспринимать как отдельные блоки текста и оставлять промежутки. И попробуйте ещё все эти блоки поместить в один внешний, может так сработает.
Ответить
Была у меня такая проблема в свое время, решил ее просто, Margin: 0px и padding:0px.
Ответить
Здравствуйте Михаил скажите пожалуйста, не допущенно ли у вас случайно ошибки что header footer не находятся в одом div блоке вместе с content?
Ответить
Структура может быть разная. Но в данном случае в content должны быть только боковые блоки div.
Ответить
Михаил, подскажите, а играет ли роль слой div, в котором обычно и располагают header, footer, content-блоки? Т.е. общий блок (иногда и так верстают ведь)
Ответить
Самый верхний div используют для того, чтобы задать определённую ширину всей страницы сразу. Это бывает очень удобно, поэтому вполне можно весь код поместить внутрь другого div.
Ответить
Спасибо за комментарий :) Михаил, у вас замечательный "проект". По мне так- единичный случай того, как можно просто и понятно объяснить о самом главном и важном в верстке, и прочем. Спасибо!
Ответить
Здравствуйте Михаил скажите пожалуйста, куда сливать файлы для скачивания на хостинге джино и как написать ссылку на скачивание?
Ответить
В папку www или public_html, а ссылку надо прописывать по пути в ту директорию, в которую загружен файл.
Ответить
ссылку надо давать прямую, например так, у меня файлы для скачивания лежат в папке "uzerfile" , а прописываю ссылку так <a href="http://webblogphp.ru/uzerfile/blog_10.rar">Скачать архив</a>
Ответить
Здравствуйте Михаил. Подскажите пожалуйста, куда именно необходимо вставить css-код по тексту? и что ещё для этого необходимо?
Ответить
http://myrusakov.ru/kak-zadat-css-stil.html
Ответить
Михаил, я всегда испытывал проблемы с пониманием, как работает подвал. Пожалуйста, осветите этот вопрос пошире. Приведенный пример волшебно прост и понятен... Однако общее непонимание остается.
Ответить
вопрос ваш не очень понятен, что знчит как работает подвал? Прижать его к низу или что?
Ответить
А если див "контент" сделать в виде таблицы с тремя столбцами??? разве так не удобнее? если нет, то скажи, пожалуйста, ПОЧЕМУ?
Ответить
http://myrusakov.ru/html-table-block-verstka.html
Ответить
да, это именно то, что я имел ввиду!!! допускал, что делать табличный каркас для контента имеет какие-то большие минусы, о которых не знал. теперь понятно, что вполне можно это делать. Михаил, а вот использование большого количества тегов <br> для увеличения высоты дива, наверно, уже является "плохим тоном" и знающие люди с этого скорее всего смеются? :)) Просто у меня дизайн сайта такой, что левый и правый контенты должны быть одного цвета (темноватого), а центральный белым. И бывает так, что контента в центре мало, и тогда приходится этот "контент" <br>ами дополнять. :) Так можно?
Ответить
Можно.
Ответить
Спасибо огромное за внимание и помощь!!!
Ответить
А где задаются высоты шапки центра и подвала ?
Ответить
Через CSS.
Ответить
Здравствуйте Михаил, скажите пожалуйста зачем нужно clear: both; // Отменяем позиционирование (влияние float)?
Ответить
Попробуйте без него сделать, затем с ним, и увидите разницу.
Ответить
А почему нельзя его применять сразу к footer, а обязательно создавать отдельный блок? Потому как я сейчас попробовал поэксперементировать с этим кодом, и у меня все работает...
Ответить
Хе-хе, картинка то со zvirec.com))) Сразу скажу, что на мой взгляд, здесь больше инфы.
Ответить
Здраствуйте, Михаил! Я делаю верстку двухколоночного сайта, у меня проблемы кроссбраузерностью в IE7 и IE6, размеры блоков стали крупные.
Ответить
Я делаю блочную верстку, ширина сайта- 1024px, в больших экранах внизу горизонтальная прокрутки появились.Мне нужно уменьшить ширину, в каких размерах максимально должно быть ширина сайта.
Ответить
Ширина сайта должна быть 990px, либо он должен быть резиновый.
Ответить
Спасибо большое.
Ответить
Если блоки покрасить background-color в цвета, то они некорректно отображаются, когда одна из трёх колонок длиннее других. У колонок выходит несовпадающая высота. Как это исправить?
Ответить
Сделайте блок который другой высоты отдельным и задайте ему нужный цвет. Например: <body> <div class="block">Текст в блоке.</div> </body> <style type="text/css"> .block { background: #FFE446; } </style>
Ответить
Я не об этом. Вот картинка, что получается: http://i.imgur.com/ZygyS1d.png Как сделать, чтобы эти белые прямоугольники, которые я пометил поверх скриншота были соответствующего цвета. При этом не задавая им фиксированную высоту, чтобы они подстраивались под контент.
Ответить
Задайте Вашему div'у width=100% height=100%.
Ответить
Как сделать чтобы шапка имела фиксированный размер и колонки. На этом сайте стоит просто width=100% но у меня при таком коде шапка вообще исчезает
Ответить
Указать height и width в px
Ответить
по чему мне браузер выдает мне вот это ����� ����� ����� ����� ������ ����� ����������� ����� ���������� �������:
Ответить
Кодировка нарушена
Ответить
Огромное спасибо за шаблон)) Буду использовать на своём первом сайте)))
Ответить
Структура блочной вёрстки - это замечательно, но ещё возникает вопрос, как верстать при резиновой вёрстке? Что нужно прописывать в %, а что в пикселях? Было бы не плохо, что бы вы написали структуру резиновой вёрстки и фиксированной вёрстки. Что бы можно было бы уловить разницу между ними. Спасибо.
Ответить
Здравствуйте, Михаил! У меня центральный блок не ограничивается справа в 200 px от края экрана. Так должно быть или ошибка? Я думал, что "margin-right: 200px; // Отступ справа 200 пикселей" должен формировать правую границу для текста автоматически. Просветите, плз. дилетанта.
Ответить
margin-right,отступ от правой стороны до внешней границы блока
Ответить
Это я понимаю, но когда вставляю текст в центральный блок, он сдвигает границу и залазит на правый блок. Это нормально? А как сделать, что еще добавить, чтобы блоки сохраняли свои рамки?
Ответить
Уважаемый.отступ внутри блока,задаётся как padding,отступ снаружи,от блока,как margin. в плане,сохраняли рамки? верстать адаптивно.Посмотрите статьи на сайте про адаптивную блочную вёрстку
Ответить
Благодарю! Бум смотреть дальше.
Ответить
А как background сделать?
Ответить
Здравствуйте, уважаемый Михаил! Я недавно познакомился с вашим сайтом ) Вопрос: почему вы сделали отдельный блок перед футером и присвоили ему clear:both;, а не присвоили это св-во самому футеру? Знаю, что этот вопрос уже задавали, но он, к сожалению, остался без ответа. Разъясните пожалуйста, а то не ясно)
Ответить
Доброе время суток. Не получается. Все в браузере выводится слева. Может не получилось подключить CSS
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.