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

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

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

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

автор

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

HTML:

CSS:

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

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

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

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

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки: ,

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

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

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

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

  1. Владимир

    Андрей, подскажите, что это за синтаксис Вы используете при создании документа, добавлении таблиц, вставки 100 слов и т.д. Я имею ввиду, что вы пишите таблицу как-то в строчку, магическая комбинация или что-то такое и она уже развернутая). В чем секрет?

  2. Вячеслав

    Здравствуйте Андрей! Очень понравился Ваш урок. И то как вы доступно все объясняете. Я новичок в верстке, сейчас только постигаю самостоятельно азы HTML, то отметил что насколько все понятно. Скажите, вы индивидуально не даёте уроков по верстке? Хотелось бы у Вас поучиться.

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

      Здравствуйте, Вячеслав. К сожалению, для индивидуальных уроков просто не хватает времени…

      • Вячеслав

        Ну может, я что не досказал. Я естественно имел ввиду, что за оплату. Просто видя как Вы это делаете и объясняете…….Ну если нет, то нет, что ж поделаешь? В любом случае спасибо за ответ. :) )

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

          Спасибо за предложение, Вячеслав :) К сожалению, даже за оплату не смогу, времени действительно нет.

  3. Юрий

    Спасибо, Андрей! Мне , как новичку в верстке, очень полезны ваши уроки. Хотелось бы с вами заниматься дальше.

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

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

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

Я не робот.

Spam Protection by WP-SpamFree