Урок блочной верстки 2-й

Aug 29

И снова здравствуйте! Продолжаем изучение блочной верстки. Усложняем задание… попробуем разобраться с построением двух-колоночного макета. Используем только дивы и ничего кроме дивов

Урок 2 – создание двух-колоночного макета фиксированной ширины с использованием тега div.
2-х колоночный макет фиксированной ширины

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

Ниже представлен HTML-код 2-x колоночного макета:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Layout 007 - Fixed Width CSS Layouts</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
	<!-- Начало основного блока, благодаря ему страница располагается в центре экрана-->
	<div id="wrapper">
		<!-- Начало шапки сайта -->
		<div id="header"> Header </div>
		<!-- Конец шапки сайта -->
		<!-- Начало блока навигационная панель -->
		<div id="navigation"> Navigation </div>
		<!-- Конец блока навигационная панель -->
		<!-- Начало левой колонки -->
		<div id="content"> Content </div>
		<!-- Конец левой колонки -->
		<!-- Начало правой колонки-->
		<div id="rightcolumn"> Right Column </div>
		<!-- Конец правой колонки -->
		<!-- Начало футера -->
		<div id="footer"> Footer </div>
		<!-- Конец футера -->
	</div>
	<!-- Конец основного блока -->
</body>
</html>

А с помощью CSS-кода придаем шаблону желаемый вид. Кстати, цветовую гамму контейнеров можно легко изменить, изменив свойство background.
Удачных экспериментов!

body{ 
	padding:0; /*обнуляем внутренние отступы*/
	margin:0; /*обнуляем внешние отступы*/
	font:bold 13px Verdana, Arial, Helvetica, sans-serif; /*свойства шрифта*/
	color:#666; /*цвет текста*/
	text-align:center; /*текст по центру блока*/
}
#wrapper { 
	margin:0 auto; /*центрирование страницы*/
	width:920px; /*ширина страницы, обязательный параметр, без него margin:0 auto; не работает*/
}
#header {
	width:898px; /*ширина хедера, учитываем padding и border, т.е. отнимаем от 920px*/
	padding:10px; /*внутренние отступы*/
	border:1px solid #a4ce60; /*граница блока*/
	height:100px; /*высота блока*/
	margin:10px 0 5px 0; /*внешний отступ*/
	background:#bdda7e; /*фон блока*/
	line-height:100px; /*расстояние между строк*/
}
/*задаем аналогичные параметры*/
#navigation{ 
	width:898px; 
	border:1px solid #bed63a;
	background:#e1edbf;
	margin:0 0 5px 0;
	padding:10px;
}
/*в данном случае добавляем float:left для того, чтобы
 колонка примыкала к левой стороне*/
#content { 	
	border:1px solid #d9d9d9;
	background:#e6e6e6;
	margin:0 5px 5px 0;
	padding:10px;
	height:350px;
	width:676px;
	float:left;
	line-height:350px;
}
/*в данном случае добавляем float:right для того, чтобы
 колонка примыкала к правой стороне*/
#rightcolumn { 
	float:right;
	border:1px solid #bed63a;
	background:#e1edbf;
	margin:0 0 5px 0;
 	padding:10px;
	height:350px;
	width:195px;
	display:inline;
	line-height:350px;
}
/*в данном случае добавляем clear:both; - запрещаем
 обтекание с двух сторон*/
#footer { 
	width:898px;
	clear:both;
	border:1px solid #bed63a;
	background:#e1edbf;
	margin:0 0 10px 0;
 	padding:10px;
}

Готовый пример CSS-шаблона можно увидеть здесь. А разделе CSS-шаблонов вы можете бесплатно скачать статичные и резиновые (тянущиеся по всей ширине экрана) макеты.

Antarik.com