Создание динамического трёхколоночного макета

Опубликовано Yurii в Пнд, 22.03.2010 - 17:45

В этой публикации я продолжу цикл статей о создании HTML-макетов.
Рассмотрим трёхколоночный макет.
Достоинства этого макета те же. Его одинаковое отображение во многих браузерах, причём не только основных, абсолютно валидный код, позиционирование подвала внизу окна браузера при малом контенте, отсутствие javascript, расположение блока с основным контентом в начале разметки, равная высота колонок при разном объёме содержимого.

В этой публикации я продолжу цикл статеё о создании HTML-макетов.
Рассмотрим трёхколоночный макет.
Достоинства этого макета те же. Его одинаковое отображение во многих браузерах, причём не только основных, абсолютно валидный код, позиционирование подвала внизу окна браузера при малом контенте, отсутствие javascript, расположение блока с основным контентом в начале разметки, равная высота колонок при разном объёме содержимого.
Сначала HTML и CSS в целом.

HTML:

<body>
<div id="wrap_main">
	<div id="main">
	 <div id="header">
		<h1><a href="/">Заголовок 1 уровня</a></h1>
	 </div><!--header-->
	   <div class="colmask">
		<div class="colmid">
			<div class="colleft">
				<div class="col1wrap">
					<div class="col1wraper">
						<div class="col1">
					<!-- Column 1 start -->
		      <h2><a href="#">Заголовок 21 уровня</a></h2>
					<!-- Column 1 end -->
				</div></div></div>
				<div class="col2">
					<!-- Column 2 start -->
		      <h2><a href="#">Заголовок 2 уровня</a></h2>
					<!-- Column 2 end -->
				</div>
				<div class="col3">
					<!-- Column 3 start -->
		      <h2><a href="#">Заголовок 23 уровня</a></h2>
					<!-- Column 3 end -->
				</div></div></div></div></div></div>
      
           <div id="container_footer">  
	         <div id="footer"></div>
           </div><!--footer-->
           </body>

CSS:

html, body  		{height:100%;      text-align:center}
#wrap_main  		{min-height:100%;  														overflow:hidden;}
#main       		{height:100%;  text-align:left; position:relative;					overflow:hidden;}
#header     		{width: 100%}
.colmask    		{width:100%;	   float:left;		position:relative;	clear:both;		overflow:hidden;}
.colmid     		{width:200%;       float:left;		position:relative;	right:100%;}
.colleft    		{width:100%;       float:left;		position:relative;	margin-left:-50%;}
.col1wrap   		{width:50%;        float:left;		position:relative;}
.col1wraper 		{ 									position:relative;	left:200%;		overflow:hidden; }
.col1       		{									position:relative}
.col2       		{float:right;		                position:relative;}
.col3       		{float:right;		                position:relative;	left:50%;}
#container_footer   {width:100%;       float:left;}
#footer     		{				   text-align:left;	position:relative}

*{}


#wrap_main  {background-color:#CCC;margin: 0 auto;min-width: 1003px;max-width: 1400px;}
#main       {padding-bottom:100px;}
#header     {background-color:#09F;height: 100px;}
.colmask    {background-color:#F00;}
.colmid     {background-color:#cff;margin-left:-200px}
.colleft    {background-color:#FFD8B7;left:400px;}
.col1wrap   {right:200px;}
.col1wraper {padding:0 215px;}
.col2       {right:15px;width:170px;}
.col3       {margin-right:45px;width:170px;}
#footer     {background-color:#3CF;height:100px;margin: 0 auto;min-width: 1003px;max-width: 1400px; margin-top:-100px;}

Теперь всё попорядку.
Первым шагом, как и в вдухколоночном шаблоне, наделим все основные элементы (блоки), а именно main, header, colmask, colmid, colright, col1wrap, col1wraper, col1, col2, col3, footer свойством position:relative.


#main, .colmask, .colmid, .сolright,.col1wrap,.col1wraper, .col1, .col2, .col3, #footer  {position:relative;}

Это делается для того, чтобы можно было перемещать эти блоки в любом направлении, в нашем случае в горизонтальном.
Вторым шагом создадим блок "wrap_main" и зададим ему минимальную высоту, диапазон изменения ширины и отцентруем его посередине окна браузера.


#wrap_main  {min-height:100%;background-color:#CCC;margin: 0 auto;min-width: 1003px;max-width: 1400px;}

Вот как это выглядит:

Создадим следующий блок "main", который будет вложен в блок "wrap_main". Пока наделим его одним свойством:


#main {height:100%;}

Согласно спецификации, он займёт всё выделенное пространство, то есть его размеры будут равны размерам "wrap_main".
Наглядно представим это так:

Создадим следующий блок "colmask", поместим его в "main" и наделим свойствами:


.colmask {width:100%;clear:both;float:left;background-color:#F00;}

Высота блока в этом случае будет равна высоте его контента. Теперь рисунок в окне браузера будет выглядеть так:

Создадим следующий блок "colmid", поместим его в "colmask" и наделим свойствами:


.colmid {width:200%;float:left; right:100%; background-color:#cff; margin-left:-200px}

В результате блок "colmid" примет длину в два раза больше родительского элемента "colmask", сместится вправо на свою длину или на две длины "colmask" и отрицательным отступом слева 200px. Наглядно это будет выглядеть так:

Создадим следующий блок "colleft", поместим его в "colmid" и наделим свойствами:


.colleft {width:100%; float:left; margin-left:-50%; background-color:#FFD8B7;left:400px;}

В результате блок "colleft" по длине будет равен "colmid", сместится влево на половину своей длины или на длину "colmask", с отступом справа 400px. Наглядно это будет выглядеть так:

Создадим следующий блок "col1wrap", поместим его в "colleft" и наделим свойствами:


.col1wrap {width:50%; float:left; right:200px;}

В результате "col1wrap" по длине будет равен половине "colleft" и сместится влево на 200px. Наглядноэто будет выглядть так:

Создадим следующий блок "col1wraper", поместим его в "col1wrap" и наделим свойствами:


.col1wraper {left:200%; padding:0 215px;}

В результате блок "col1wraper" по длине будет равен своему родителю "col1wrap" и, если вы внимательно отслеживали анологию длин, равен длине окна браузера. Он сместится вправо на две свои длины и встанет точно в окне браузера. padding:0 215px обеспечит поля слева и справа 215px. Наглядно это будет выглядеть так:

Далее всё просто. Создаём блок col1 и помещаем его в col1wraper. Наглядно представим это так:

Создадим блок col2, поместим его в "colleft" и наделим свойствами:



.col2 {float:right; right:15px; width:170px;}

В результате блок, благодаря float:right прижмётся кправому краю "colleft", с отступом влево 15px. Наглядно это будет выглядеть так:

Создадим блок "col3", поместим его в "colleft" и наделим свойствами:


.col3 {float:right; width:170px;}

Под действием этого свойства блок "col3" встанет слева от "col2", перекрыв его на 15px, поскольку "col2" смещён влево на 15px. Наглядно это будет выглядеть так:

Теперь наделим его следующими свойствами:


.col3 {left:50%; margin-right:45px;}

Блок "col3" встает следующим образом:

Теперь основные блоки наделим свойством overflow:hidden


#wrap_main, #main, .colmask, .col1, .col1wraper{overflow:hidden}

Это свойство определяет, что происходит с содержимым, которое переполняет область содержимого элемента. В этом случае оно будет скрыто. Если говорить совсем примитивно, обрезаем всё лишнее. Наглядно это будет выглядеть так:

Последним этапом добавим в наш макет шапку и подвал. Шапку поместим в "main" и наделим его свойствами


#header     {width: 100%; clear:both;float:left;background-color:#060;height:100px}

А подвал "footer", помещаем его в контейнер "container_footer" и выносим его за пределы основного блока. Так же задаём ему высоту и диапазон изменения ширины.
Сейчас "footer" расположен ниже зоны окна браузера, поскольку он вынесен за пределы "main", имеющего высоту 100%. Для того, чтобы это исправить, задаём ему отрицательный отступ на свою высоту, а у блока "main", задаём поле снизу, равное высоте подвала.


#footer    {margin-top:-100px; }
#main      {padding-bottom:100px}

И дополнения IE6:


#wrap_main, #footer   {min-width: 1003px;max-width: 1400px;width:expression((document.compatMode && document.compatMode == 'CSS1Compat') ? (document.documentElement.clientWidth < 1003 ? "1003px" : (document.documentElement.clientWidth > 1400 ? "1400px" : "auto")) : (document.body.clientWidth < 1003 ? "1003px" : (document.body.clientWidth > 1400 ? "1400px" : "auto")))}
#wrap_main{height:100%; overflow:visible; }
#main{position:static; height: auto;}
.colmask{ float:none;}
.colleft {float:none;}
.col1wraper {float:left}

Вот и всё, конечный результат будет выглядеть так.

Ну или в браузере.

Re: Создание динамического трёхколоночного макета

Опубликовано naikom (не проверено) в Сб, 26.06.2010 - 15:15.

хороший дневник
спасибо
подписался

Ну не знаю, имхо,

Опубликовано rulerofthe (не проверено) в Пт, 09.07.2010 - 21:21.

Ну не знаю, имхо, неоднозначный пост.

Не скажу, что со всем

Опубликовано Anonymous (не проверено) в Сб, 17.07.2010 - 16:05.

Не скажу, что со всем изложенным согласен, но кое-что нового даже для себя почерпнул. Спасибо

Re: Создание динамического трёхколоночного макета

Опубликовано Гость (не проверено) в Пнд, 23.08.2010 - 19:19.

Скопировал полностью код. Не ошибка где-то. Колонки одна над другой отобразились.

Re: Создание динамического трёхколоночного макета

Опубликовано Yurii в Ср, 01.09.2010 - 13:45.

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

Re: Создание динамического трёхколоночного макета

Опубликовано Anton (не проверено) в Ср, 24.11.2010 - 14:23.

"Теперь основные блоки наделим свойством overflow:hidden"
Из-за одной фразы весь интерес к этой замысловатой конструкции падает. Ибо overflow:hidden некорректно работает при попытке перехода по якорям внутри дива. Он попросту режет всё содержимое до якоря. Конечно в новых версиях этот баг устранят, но сейчас это головная боль для многих.

megafon4u.ru