Здравствуйте Гость!


Запомнить.
Авто. вход.
Забыли пароль?
Регистрация

ПОДПИСКА Подписавшись по E-mail, Вы будете получать уведомления о новых статьях к себе на почту.
Подписатся на почтовую рассылку на сайте astranar.ru
Подписаться



ДОБАВЛЯЙТЕСЬ В ДРУЗЬЯ Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте на стене моего аккаунта.
Мой аккаунт Вконтакте
Мой аккаунт
Главная - HTML - Трехколоночная верстка


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


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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Трехколоночная верстка с плавающей шириной содержания, высотой на весь экран и прибитым книзу футером</title>
<style type="text/css">
html, body {
padding:0;
margin:0;
background:red;
height:100%; /* Высота 100% для экрана */
}
.wrapper {
background:white;
min-height: 100%; /* Высота для современных браузеров */
height: auto !important; /* Для современных браузеров, чтобы не игнорировалась высота содержания */
height:100%; /* Высота для IE5 и IE6 */
margin:0 0 -100px 0; /* Поле снизу, по высоте футтера */
}
.header {
height:150px;
background:#9966CC;
}
.left {
width:180px;
background:#CC66FF;
float:left;
}
.right {
width:180px;
background:#CC3366;
float:right;
}
.content {
margin: 0 200px 0 200px;
background:#00FF99;
}
p {
margin:0;
padding:0 0 1.2em 0;
font-size:14px;
}
.clearer {
clear:both;
height:100px;
}
.footer {
height:100px;
background:#FFCC33;
}
</style>
</head>
<body>
<!-- Фон тело документа Начало -->
<div class="wrapper">
<!-- Шапка начало -->
<div class="header">
<p>header</p>
</div><!-- Шапка конец -->
<!-- Начало левой колонки -->
<div class="left">
<p>левая колонка</p>
<p>левая колонка</p>
<p>левая колонка</p>
<p>левая колонка</p>
<p>левая колонка</p>
<p>левая колонка</p>
<p>левая колонка</p>
</div><!-- конец левой колонки -->
<!-- Начало правой колонки -->
<div class="right">
<p>правая колонка</p>
<p>правая колонка</p>
<p>правая колонка</p>
<p>правая колонка</p>
<p>правая колонка</p>
<p>правая колонка</p>
<p>правая колонка</p>
</div><!-- Конец правой колонки --><
<!-- Начло блока контента -->
<div class="content">
<p>содержание</p>
<p>содержание</p>
<p>содержание</p>
<p>содержание</p>
<p>содержание</p>
<p>содержание</p>
</div><!-- Конец блока контента -->
<div class="clearer"></div>
</div><!-- Фон тело документа конец -->
<!-- Начало футера -->
<div class="footer">
</div><!-- Конец футера -->
</body>
</html>


Думаю в этой статье у вас не возникнет вопросов, но если что, я отвечу в комментариях.
Удачи=)



Просмотров страницы: 4104
Урок добавлен: 13 Июля 2012

<<<Предыдущая статьяСледущая статья >>>

Копирование материалов разрешается только с указанием автора (Пальгов Олег) и индексируемой прямой ссылкой на сайт (https://astranar.ru/)!

Добавляйтесь ко мне в друзья ВКонтакте: https://vk.com/palgov_oleg. Если Вы хотите оценить меня и мою работу, то напишите на стене моего аккаунта ВКонтакте.

Если Вы не хотите пропустить новые материалы на сайте, то Вы можете подписаться на обновления:
Подписаться на обновления


Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Ещё статьи по html:
Коды html цветов
Начало работы с HTML
Стандартная табличная верстка
Установка Favicon на сайт


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

Владислав Малиничев 25 Августа 2012 в 17:49
Вообще-то это не табличная вёрстка - а блочная если ты не заметил...



Олег Пальгов 25 Августа 2012 в 18:45
Не важно какая, главное структура как у табличной.




Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Трехколоночная верстка
Моя мама в детстве не читала мне сказки на ночь, она читала мне PHP для начинающих=)))

Олег Пальгов


Вступайте в группу!