Делаем простой 2-х колоночный CSS шаблон

В данном уроке демонстрируется процесс создания простого 2-х колоночного шаблона.

Шаблон будет состоять из заголовка, горизонтальной панели навигации, боковой панели и нижнего колонтитула. Также он будет центрирован по горизонтали в окне браузера.

 

Шаг 1. Основная структура.

Сначала создадим основную структуру шаблона.

<div id="wrap">
    <div id="header"></div>
    <div id="nav"></div>
    <div id="main"></div>
    <div id="sidebar"></div>
    <div id="footer"></div>
</div>

А затем поместим какое-нибудь содержание в различные разделы:

<div id="wrap">
	<div id="header"><h1>Простой 2-х колоночный шаблон CSS. Шаг 1</h1></div>
	<div id="nav">
		<ul>
			<li><a href="http://ruseller.com">Опция 1</a></li>
			<li><a href="http://ruseller.com">Опция 2</a></li>
			. . .
		</ul>
	</div>
	<div id="main">
		<h2>Колонка 1</h2>
		. . . 
	</div>
	<div id="sidebar">
		<h2>Колонка 2</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna.</p>
		<ul>
			<li><a href="http://ruseller.com">Ссылка 1</a></li>
			<li><a href="http://ruseller.com">Ссылка 2</a></li>
			. . .
		</ul>
	</div>
	<div id="footer">
		<p>Нижний колонтитул</p>
	</div>
</div>

Теперь у нас есть документ HTML совершенно без стилей. Далее мы дуем использовать CSS для построения шаблона на основе данного документа.

Результат шага 1.

 

Шаг 2. Выравниваем элементы body и html.

Чтобы содержание касалось границ окна браузера, устанавливаем значения свойств margin и padding для элементов  body и html в 0. Также задаем  цвет текста и фона.

body,
html {
    margin:0;
    padding:0;
    color:#000;
    background:#a7a09a;
}

Результат шага 2.

 

Шаг 3. Основные контейнеры.

Теперь займемся заданием ширины и центрированием области содержания. Для этого зададим значения для свойств ширины и поле основного контейнера #wrap. Также установим для него фон, чтобы выделить на странице.

Метод центрирования содержания основывается на факте, что при установке для левого и правого полей элемента значений auto, они разделяют оставшееся пространство после вычитания ширины элемента из ширины контейнера. В данном случае ширина элемента #wrap будет вычитаться из ширины окна браузера.

Примечание: для того, чтобы данный метод работал в Internet Explorer (версии 6 и старше), документ должен использовать DOCTYPE, который будет указывать для IE на использование стандартного режима.

	#wrap {
		width:750px;
		margin:0 auto;
		background:#99c;
	}

Мы не используем элемент body для установки ширины и центрирования шаблона, так как  в некоторых версиях Internet Explorer это может вызвать нежелательные эффекты.

Затем задаем разным разделам разные фоновые цвета для выделения их на странице.

    #header {
		background:#ddd;
    }
    #nav {
		background:#c99;
    }
    #main {
		background:#9c9;
    }
    #sidebar {
		background:#c9c;
    }
    #footer {
		background:#cc9;
    }

Результат шага 3.

 

Шаг 4. Размещаем колонки рядом одна с другой

Для размещения рядом колонок (#main и #sidebar) делаем их плавающими и смещаем одну влево, а другую вправо. Также задаем ширину колонок.

    #main {
		float:left;
		width:500px;
		background:#9c9;
    }
    #sidebar {
		float:right;
		width:250px;
		background:#c9c;
    }

Обратите внимание, что сумма ширин колонок должна быть равна ширине элемента #wrap.

Теперь элемент #sidebar выводится справа от элемента #main, но нижний колонтитул находится не на своем месте.

Результат шага 4.

 

Шаг 5. Задвигаем нижний колонтитул вниз

Нижний колонтитул не становится на свое место потому, что продолжает действовать свойство float. Когда элемент делается плавающим, он удаляется из общего потока документа и не сдвигает вниз другие элементы, которые следуют за ним. Поэтому элемент #footer начинается сразу ниже элемента #sidebar.

Чтобы исправить положение, надо установить свойство clear для нижнего колонтитула, чтобы указать ему, что он не может иметь других элементов рядом.

	#footer {
		clear:both;
		background:#cc9;
	}

Результат шага 5.

 

Шаг 6. Устанавливаем фон для боковой колонки

Теперь видно, что более короткая колонка не продляется до нижнего колонтитула. Чтобы сделать внешний вид однообразным, установим одинаковые цвета фона для элементов #sidebar и #wrap.

    #sidebar {
		float:right;
		width:250px;
		background:#99с;
    }

Если вы не знаете, какая колонка будет длиннее, а какая короче, то придется воспользоваться одним из методов для установки цвета фона.

Результат шага 6.

 

Шаг 7. Делаем навигационную панель горизонтальной

Элемент #nav содержит обычный неупорядоченный список ссылок. Нам нужно изменить его внешний вид:

    #nav ul {
		margin:0;
		padding:0;
		list-style:none;
    }
    #nav li {
		display:inline;
		margin:0;
		padding:0;
    }

Результат шага 7.

 

Шаг 8. Выравниваем поля, отступы, и добавляем совместимости с IE 6

Почти готово. Нужно выровнять свойства margin и padding для некоторых элементов, чтобы сделать шаблон более приличным.

    #header {
		padding:5px 10px;
		background:#ddd;
    }
    h1 {
		margin:0;
    }
    #nav {
		padding:5px 10px;
		background:#c99;
    }
    #main {
		float:left;
		width:480px;
		padding:10px;
		background:#9c9;
    }
    h2 {
		margin:0 0 1em;
    }
    #sidebar {
		float:right;
		width:230px;
		padding:10px;
		background:#99c;
    }
    #footer {
		clear:both;
		padding:5px 10px;
		background:#cc9;
    }
    #footer p {
		margin:0;
    }

Когда добавляются отступы для элементов #main и #sidebar, нужно вычесть их размер справа и слева из ширины элементов. Так как нужно учесть действие модели прямоугольника CSS.

И теперь надо компенсировать ошибку с плавающими элементами в Internet Explorer 6. Если посмотреть на результат шага 6 в IE 6, то можно заметить, что нижний колонтитул сдвинут ниже #main. Попробуйте подвигать страницу вверх-вниз, если не заметили дефекта сразу.

Для устранения дефекта воспользуемся методом звезды HTML, чтобы задать для нижнего колонтитула высоту только для  IE 6:

    * html #footer {
		height:1px;
    }

Данный код может выглядеть несколько странно, но из-за другой ошибки в IE нижний колонтитул не может быть высотой в один пиксель и будет растягиваться на размер содержания.

Простой шаблон в готовом виде.

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/d3i9z7KBU9o/lessons.php

Читать комменты и комментировать

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



Защитный код
Обновить

Делаем простой 2-х колоночный CSS шаблон | | 2012-06-19 12:03:50 | | Статьи Web-мастеру | | В данном уроке демонстрируется процесс создания простого 2-х колоночного шаблона.Шаблон будет состоять из заголовка, горизонтальной панели навигации, боковой панели и нижнего колонтитула. Также он | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: