Верстка макета (табличная верстка)

Верстка макета (табличная верстка)

От автора: наверное, все начинающие верстальщики рано или поздно сталкиваются с двумя известными проблемами – это проблема колонок одинаковой высоты и проблема прижатия футера к низу.

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

автор

Автор: Андрей Кудлай

Зовут меня Андрей Кудлай. Родом я из Украины, живу в Днепропетровске. Веб-программированию учился сам. Неплохо знаю HTML, CSS, PHP, JavaScript.

скачать исходникискачать урок

Проблема 1. Как сверстать колонки одинаковой высоты?

Когда мы верстаем блочный макет, к примеру, из двух колонок (сайдбар и контент), и при этом имеем различный фоновый цвет для каждой колонки, то можем наблюдать примерно следующую картину

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Проблема 2. Как прижать футер к низу?

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

Видно, что после футера идет пустое место с фоном body. Когда текста на странице совсем мало, то сайт смотрится довольно нелепо, кажется, что он повис в воздухе. Хотелось бы, чтобы футер всегда был прижат к низу страницы, если контента немного, ну а фон самого контента, соответственно, тянулся до футера.

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

В итоге обоих уроков мы получим вполне рабочий шаблон сайта, который Вы можете использовать в своей работе.

В видео версии урока Вы можете увидеть верстку шаблона шаг за шагом. Здесь же просто дадим листинг кода.

HTML:

CSS:

На этом наш урок завершен. Жду Вас в продолжении. Удачи!

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Верстка. Быстрый старт

Практический курс по верстке адаптивного сайта с нуля!

Смотреть

Метки: ,

Похожие статьи:

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

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