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

16

Від автора: напевно, всі початківці верстальники рано чи пізно стикаються з двома відомими проблемами – це проблема колонок однакової висоти і проблема притиснення футера до низу.

Актуальність зазначених проблем підтверджується неодноразовими зверненнями на нашому форумі з проханням допомогти вирішити їх. Отже, давайте спробуємо для початку сформулювати суть обох проблем.

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

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

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

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

Проблема 1. Як зверстати колонки однакової висоти?

Коли ми верстаємо блоковий макет, наприклад, з двох колонок (сайдбар і контент), і при цьому маємо різний колір тла для кожної колонки, то можемо спостерігати приблизно наступну картину

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

Як бачимо, тут сайдбар має менше вмісту, ніж блок контенту. Ну а з урахуванням різного фону, ми якраз і бачимо всю неприємність проблеми колонок різної висоти. Вирішується проблема кількома способами, один з яких ми розглянемо в наступному уроці, в якому зверстаємо той же макет, але вже блочно. Тут відразу варто відзначити, що якщо ми будемо верстати каркас сайту на таблицях, то ця проблема не постане перед нами в принципі, оскільки колонки рядка завжди мають однакову висоту.

Проблема 2. Як притиснути футер до низу?

Ця проблема зустрічається, напевно, частіше, ніж попередня. Суть проблеми Ви можете бачити на все тому ж малюнку

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

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

Ось коротко сформульовані нами проблеми, які ми і спробуємо вирішити двома способами – у цьому уроці ми зверстаємо макет за допомогою табличної верстки, а в наступному – скористаємося блокової версткою.

В результаті обох уроків ми отримаємо цілком робочий шаблон сайту, який Ви можете використовувати у своїй роботі.

У відео версії уроку Ви можете побачити верстку шаблону крок за кроком. Тут же просто дамо лістинг коду.

HTML:

Табличний каркас

HEADER

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!

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!

FOOTER

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, венеції,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, назва, 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;
}

На цьому наш урок закінчено. Чекаю Вас у продовженні. Удачі!