Выпуск №13. Блочная верстка сайта

блочная верстка

Всем доброго дня!

На связи Бернацкий Андрей!

В данном выпуске речь пойдет о создании сайта с помощью блоков, т.е. блочная верстка сайтов.

Кстати говоря, данный выпуск имеет видео версию, можете скачать по ссылке:

Видео версия 13 урока

Для этого, нам необходимо познакомиться с CSS-свойством float, которое является одним из наиболее частоиспользуемых, при блочной верстке страниц сайта.

Итак, свойство float предназначено для выравнивания элементов на странице. Это что-то похожее на параметр align в HTML тегах.

Свойство float:

Значения:

left – выравнивает элемент по левому краю.

right - выравнивает элемент по правому краю.

inherit – использует стиль выравнивания, как у родительского элемента.

none – без выравнивания.

Допустим нам нужно выровнять изображение по правому краю. Для него мы должны прописать:

<img src="myimg.jpg" style="float:right;" />

Это будет один к одному, как если бы мы указали:

<img src="myimg.jpg" align="right" />

Изображение выровняется по правому краю, а текст, который идет после изображения, будет обтекать его справа. Если нам нужно запретить обтекание текста, используем свойство clear.

Свойство clear:

Значения:

left – отменяет обтекание слева.

right — отменяет обтекание справа.

inherit – отменяет обтекание, которое было у родительского элемента.

none – без обтекания.

both – отменяет любое выравнивание.

Но, чаще, свойство float используется для расположения элементов на странице.

Посмотрите на рисунок:

float

Это каркас сайта. Казалось бы, обычная таблица, но нет! Для реализации такое разметки не использовалась ни одна таблица! Все элементы – это теги <div></div>.

Посмотрим, как это можно легко реализовать.

Для начала создаем четыре блока div.

<div class="main">
<div class="content">
</div>
<div class="righter">
</div>
<div class="foot">
</div>
</div>

div class="main" – основной блок. Он содержит все остальные блоки, которые только у нас будут использоваться.

div class="content" – блок, в котором будет основное содержимое страницы (зеленый слева).

div class="righter" – правый блок. В примере в нем находиться текст, но в реальной ситуации, там может быть навигация, рекламные баннеры, и т. д.

div class="foot" – желтый нижний блок. В нем, обычно, расположена контактная информация, различные ссылки и т.д.

Давайте теперь наполним наши блоки содержимым.

В общем, без задания стилей мы ничего особенного не увидим:

float

Теперь назначим стили для блоков:

.main{
background-color:#000099; width:600px; margin:0 auto;
}
.content{
background-color:#00CC00; width:400px;
}
.righter{
background-color:#660033; width:200px;
}
.foot{
background-color:#FFFF00;
}
color:#FFFF00;
}

Пока, думаю, все понятно. Все вышеизложенное описано в предыдущих выпусках рассылки.

Увидеть мы должны примерно следующее:

float

А теперь проанализируем код страницы.

Главному блоку у нас задана ширина в 600px, блоку с содержимым 400рх, а для левого блока 200рх. Но два последних блока не стали в один ряд, а расположились друг за другом.

Пришло время воспользоваться свойством float. В стилях дописываем следуюшее:

.content{
background-color:#00CC00; width:400px; float:left;
}
.righter{
background-color:#660033; width:200px; float: left;
}

Остальные стили пока не трогаем. Получили такую вещь:

float

Что-то получили, но не совсем то, что нужно. Но если разобраться в теории, то все свойства сработали корректно. Мы задали float:left для левого и правого блока, они выбились из потока следования элементов, и все, что было за ними, заняло свободное место вокруг этих блоков (аналогично как текст обтекает картинку, если ей задать это свойство).

Соответственно, чтобы нижний блок стал на свое, место пропишем следующее:

.foot{
background-color:#FFFF00; clear:both; float:left; width:100%;
}

clear:both – для отмены выравнивания от предыдущих блоков.

float:left – для собственного выравнивания блока.

width:100% — чтобы блок занял всю ширину основного блока.

Получили:

float

Почти то, что нужно, только блоки не равной высоты, и это видно, так как фон у них разный.

Одним из решений данной проблемы (самой простой и универсальной, на мой взгляд) является задание отступов снизу.

Делаем их следующим образом:

.main{
background-color:#000099; width:600px; margin:0 auto; overflow:hidden;
}
.content{
background-color:#00CC00; width:400px; float:left; padding-bottom:32000px; margin-bottom:-32000px;
}
.righter{
background-color:#660033; width:200px; float: left; padding-bottom:32000px; margin-bottom:-32000px;
}

После добавления этого кода получим:

float

Фон левого блока дотянулся до низа страницы. Теперь если мы будем менять содержимое блоков, то фон будет тянуться до низа, так как это и нужно. Собственно для этого и нужны отступы padding-bottom:32000px; margin-bottom:-32000px; для обоих блоков.

overflow:hidden; в классе main для того, чтобы скрыть большой отступ вниз без содержимого блоков.

В общем-то все, что нужно мы получили. Осталось только добавить отступов к блокам и выровнять текст в нижнем блоке по центру. Но это я оставлю вам на самостоятельную доработку.

На этом, выпуск посвящённый блочной верстке сайтов и страниц, завершим.

Просьба присылать с вопросом ваш код того, что вы делаете. Так будет проще и мне понять, что у вас не получилось и дать вам четкий ответ. И вам меньше объяснять в письме, что у вас не получается.

Данный урок имеет видео версию, которую Вы мо жете скачать по ссылке:

Видео версия 13 урока

киберсант-вебмастер

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (35)

  1. Григорий

    Большое Вам спасибо за понятное изложение материала! С Новым Годом! Радости,Любви, Творчества!!

  2. Александр

    Главному блоку у нас задана ширина в 600px,
    а почему не 100%

    нижнему-то мы задаем ширину 100%

    и еще вопрос- а на таблицах сайт будет надежнее?

    Александр.

    • PalPalych

      На таблицах будет медленнее, тяжелее да и вобще по спецификации HTML4.0 а того паче по xhtml все это надо делать на блоках, а таблицам оставить только табличные данные, ибо их фунциональность сильно уменьшили. Как то так. Поправьте, если в чем то не прав

  3. света

    кое что получается правда не все . но и за то спосибо.

  4. rootical

    padding-bottom:32000px; margin-bottom:-32000px;

    знал о таком решении, но забыл(

    и сейчас вот искал, как же это растянуть фон блока до низа! мне повезло) спасибо Вам большое

  5. Анна

    спасибо) отличной объяснение материала :)

  6. Сергей

    Спасибо вам, всё работает!

  7. Николай

    Доброго времени суток, Андрей.
    Благодарю Вас за чудесный учебный материал. После подписки при получении первого письма расстроился, было, не работали ссылки на скачивание – начиналась закачка на просмотр фильма онлайн. И при моем, ну очень медленном интернете , просмотр не представлялся возможным (во завернул). Но теперь скопировал весь материал и закачал дополнения к урокам, что дало мне возможность изучать его спокойно, без нервов. За исключением нескольких, несущественных моментов, могу сказать только одно – “Восхищён!” Только инструкции и никакой “воды” Спасибо и ещё раз спасибо. С удовольствием подписываюсь на “Мини-курс. Создание блога за 8 шагов”. И даю торжественное обещание, первый же виртуальный заработок, спустить на приобретение Вашего подвинутого Авторского курса. Теперь для меня никакой рекламы не требуется!
    С уважением Николай.

  8. marvey

    Огромное спасибо, Андрей.
    Всё очень класно и надеюсь, в скором времени приобрести ваш полный курс.

  9. DJWOMS

    Как шаблон на div верстке привязать к сайту php
    Т.е. есть шаблон, как сделать вывод его в php файлах, что бы не писать в каждом файле?

    • Andrey Bernacki

      Допустим у вас есть файл PHP в котором идет выборка из базы данных какой-то информации и отображение ее на сайте. Просто нужно брать результат запроса и отображать его в нужный div.

  10. Сергей

    Андрей! Спасибо за урок!
    У меня такой вопрос в отношении значений свойств
    padding-bottom:32000px; margin-bottom:-32000px;

    Почему 32000? Откуда такое число появилось, как его определить?

    С уважением,
    Сергей Калугин

    • Andrey Bernacki

      32000 — потому что браузер сафари раньше не мог отобразить контент, если его высота была больше этого значения. Сейчас может это и не принципиально. Может можно писать и 50000рх. Но я ни разу не встречал сайтов на 32000рх в высоту. Даже 10000 — это редкость.

  11. Лева

    Алё! Ответьте кто! Присоединяюсь к предыдущим двум вопросам.

  12. Татьяна

    Андрей, спасибо за урок. Наконец-то у меня в голове все встало по местам. Вечно расползающиеся блоки — моя головная боль. О некоторых вещах узнала впервые. Браво! С удовольствием изучаю ваши уроки, и хотя многое для меня не новость, но обязательно есть в каждом уроке какая-нибудь изюминка, с которой не сталкивалась ни в одном объяснении. Особенно нравятся видео-материалы, потому что часто не напишешь того, что скажешь словами. Спасибо еще раз.

  13. Владимир

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

  14. Сергей

    Спасибо за хорошие и понятные уроки!

  15. Станислав

    Андрей! Спасибо за урок.

  16. Слава

    Спасибо огромное тебе чувак. Очень выручил

  17. Роза

    Спасибо за урок. Всё понятно.

  18. Олег

    Отличный урок, теперь хоть разбираюсь с этим, но есть один вопросик. Вот у блока div есть два так сказать свойства id и class чем они отличаются и для чего необходимы? Если не сложно ответить на такой вопросик.

    • Андрей Кудлай

      Class и id — это атрибуты. Они присваиваются элементам страницы (это не обязательно блоки div, но и любые другие элементы документа) для того, чтобы придать этим элементам определенные стили при помощи CSS. Также указанные атрибуты используюся для облегчения поиска элементов на странице, например при использовании jQuery. Отличие этих атрибутов друг от друга заключается в том, что один и тот же класс можно присвоить различным элементам, к примеру — ссылке и параграфу. А вот идентификатор (id) можно использовать только один раз в документе… отсюда и его название — id, — т.е., этим атрибутом как бы идентифицируется уникальный элемент на странице.

  19. Иван

    Добрій день! Я новичок в сайтостроении и очень благодарен Андрею и всем кто ему помогает за подробные уроки. Но постоянно возникают вопросы например: почему когда я задаю отступ (padding:10px;) или рамку (border:solid #090 2px;) в блоке .content , то блок .righter постоянно перескакивает под низ и приходится уменьшать ширину блока .content чтобы .righter стал на место. Можно ли сделать так чтобы при задании свойства (padding или border) текст внутри сжимался, а ширина блока не изменялась. Ответьте пожалуйста кто нибудь. Заранее благодарен.

    • Andrey Bernacki

      Тут нужно понимать одну вещь — из чего формируется ширина. Итак, ширина блока складывается из ширины самого блока + отступы (padding) + рамка/граница (border). То есть, если у вас задана ширина блока в 200рх, назначен padding 10px и border 2рх, то общая ширина блока будет равна 224px (200 + 10 + 10 + 2 + 2). Соответственно нужно уменьшать либо соседний блок, либо изменить ширину для данного блока до 186рх. А так сделать как хотите вы — это уже несколько другая история…

      • Иван

        Огромное спасибо за ответ. Я думал что, уменьшая размеры блока, поступаю неверно и есть другой способ решения этой проблемы.
        А у Вас форум есть? Иногда возникают вопросы не в тему и я не знаю куда их задавать.

  20. Андрей

    Здравствуйте!
    Скажите, почему в ситуации 123 внутренний блок отображается как-то со сдвигом, в фаерфоксе вправо на пару пикселей, в ie влево??? Ширину внутреннего задаю в 100%, что это?

  21. Андрей

    Ой, я извиняюсь, в сообщении код убрался! Ситуация, когда один блок div с шириной 100% вложен в другой блок div, непонятно почему внутренний не стоит ровно посредине, а со сдвигом. Надеюсь, понятно, что хотел сказать, из двух сообщений.

    • Андрей Кудлай

      Скорее всего, причина в отступах (margin/padding) родительского и/или дочернего блоков. Точнее можно было бы сказать, посмотрев полный код. Для отладки кода могу посоветовать дополнение для Firefox — Firebug. С помощью него можно без проблем увидеть все отступы и откуда они берутся.

  22. Михаил

    Когда это было, во сне наяву!
    А теперь уже HTML5 и возымело смысл переписать всю статью исходя из реалий дня нынешнего. Отличное изложение темы и буду рад если перепишете статью по нынешние чаяния, мне понравился ваш стиль подачи материала. А начать, с переверстки, как на WP поменять доктайп, грамотно. Ну а если в верстку еще и сразу прописать разметку chema.org то цены вам не будет!
    _________________
    Михаил — megrib.ru

  23. я тут крутой

    совсем все просто

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree