Главная » Создание динамического одноколоночного макета.

Создание динамического одноколоночного макета.

Опубликовано Yurii в Вс, 07.03.2010 - 17:44

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

HTML:

<body>
<div id="main">
	<div id="header">
		<h1><a href="/">Заголовок 1 уровня</a></h1>
	</div><!--header-->
	<div class="col1">
		<p>qwert</p>
	</div>
</div>
    
<div id="wrap_footer">  
	<div id="footer">
		<p>qwerty</p>
	</div>
</div>
<!--footer-->
</body>

CSS:


html, body  {height:100%;}
#main       {min-height:100%;position:relative;margin: 0 auto;overflow: hidden;width:100%}
.col1       {position:relative;}
#wrap_footer{width:100%;      float:left;}
#footer     {position:relative; text-align:left;margin: 0 auto;}


#main      {background-color:#CCC;min-width: 1003px;max-width: 1400px;}
#header    {background-color:#060;height:100px; }
.col1      {padding-bottom:100px}
#footer    {background-color:#3CF;min-width: 1003px;max-width: 1400px;height:100px; margin-top:-100px; }

Теперь более детально. Основному блоку "main" задаём минимальную высоту, равной высоте окна браузера, задаём ему диапазон изменения ширины и выравниваем его по центру.


#main       {min-height:100%;position:relative;margin: 0 auto;overflow: hidden;min-width: 1003px;max-width: 1400px;}

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


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

И небольшие дополнения для самого умного браузера IE6. Это экспрешн, чтоб он корректно понимал min-width и max-width и height вместо min-height.


#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")))}
#main{height:100%; overflow:visible; }

Конечный результат можно увидеть здесь.
Читайте далее в статье "Принцип создания двухколоночного макета."