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

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

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

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

автор

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

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

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

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

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

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

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

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

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

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

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

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

HTML:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Табличный каркас</title>
	<link rel="stylesheet" href="style.css" media="all">
</head>
<body>
	
	<table class="wrapper">
		<tr>
			<td class="header" colspan="2">HEADER</td>
		</tr>
		<tr>
			<td class="left">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At illo tempore ea minima quia commodi non alias vero inventore. Maxime amet corporis suscipit id tempora totam. Perspiciatis fugiat ratione odit!</p>
			</td>
			<td class="content">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae magnam velit molestiae nesciunt ad illum modi rem corporis perferendis accusantium provident tempora quae ut ipsum temporibus nam est ipsa error nulla soluta alias corrupti officia cum. Incidunt dolore officiis nulla eligendi qui libero doloremque odio maxime possimus doloribus quae architecto fugit at soluta blanditiis corporis quasi sunt reprehenderit tempore quam illo consequatur voluptatibus consequuntur aliquid deserunt rerum aperiam neque dignissimos porro a in minima iste ipsum ex pariatur consectetur amet repellendus ipsa deleniti sapiente rem excepturi iusto maiores impedit necessitatibus nihil. Autem quasi deserunt est expedita aliquid iste fugit quia!</p>
			</td>
		</tr>
		<tr>
			<td class="footer" colspan="2">FOOTER</td>
		</tr>
	</table>
	
</body>
</html>

CSS:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

html, body{
	height: 100%;
}

body{
	background: #00246a;
	color: #fff;
}

.wrapper{
	width: 900px;
	margin: auto;
	height: 100%;
}

.header{
	height: 100px;
	background: purple;
}

.footer{
	height: 40px;
	background: green;
}

.left{
	width: 250px;
	background: #22292f;
}

.content{
	width: 650px;
	background: #fff;
	color: #000;
}

p{
	padding: 10px;
}

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

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

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

Получить

Метки: ,

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

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

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

  1. Владимир

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

  2. Вячеслав

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

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

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

      • Вячеслав

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

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

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

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

Ваш 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