Легко изменяемый макет фиксированной ширины

18.03.2007 веб-стандарты, верстка, дизайн, css

Попробуем создать макет страницы, который в зависимости от размера экрана будет меняться. Причем попробуем для этих целей воспользоваться только средствами CSS, без использования Javascript для выбора стиля, соответственно обойдемся лишь одним стилем.

Создадим простейший трехколоночный шаблон, с блоками, фиксированной ширины. Блок контента расположим слева, а два колоночных блока помещаем справа от контента, один за другим. Идея заключается в следующем, если мы расположим три блока, с float:left друг за другом, то при уменьшении размера экрана, они сместятся вниз, один под другой. При этом блок с контентом всегда будет вверху, что есть несомненно важным моментом в структурировании информации.

Вообще не думаю, что уменьшение размера окна менее 800 будет иметь смыл, поскольку смена дизайна будет очень кардинальная в данном случае (не стоит забывать о различного рода графических элементах дизайна). Потому лучше ограничить размер окна, установив для всех браузеров min-width, а для IE наиболее простым выражением, типа _width:expression(document.documentElement. offsetWidth < 760 ? "760px" : "auto");, поместив в комментарии разбираемые только IE (например, <!--[if lte IE 6]><![endif]-->), либо любым другим способом. Но обо всем по порядку.

Структурная разметка нашего примера очень проста и выглядит следующим образом.

Пример XHTML кода:

<div id="wrapper">
 <div id="mainContentWrapper">
  <div id="mainContent">
  </div>
 </div>
 <div id="firstNavColumn">
 </div>
 <div id="secondNavColumn">
 </div>
</div>

Как можно заметить, в блок mainContentWrapper вложено еще два блока. Согласно хорошей практики не рекомендуется создавать множество лишних тэгов, однако в данной ситуации — это необходимость, благодаря которой мы сможем более гибко и легко позиционировать блоки, для дальнейшего их смещения при изменении ширины экрана.

Для наглядности вложим в колоночные блоки firstNavColumn и secondNavColumn заголовок, параграф и список.

Теперь перейдем к стилю и позиционированию элементов на странице.

Пример CSS кода:

html, body {
height: 100%;
}
body {
background: #eee;
margin:0;
padding:0;
font: 1.1em/1.6em Verdana, Arial, sans-serif;
}
#wrapper {
height: 100%;
}
#mainContentWrapper {
width: 500px;
min-height: 100%;
float: left;
margin-right: 11px;
}
#firstNavColumn {
float: left;
width: 200px;
margin:0 11px;
padding:0;
}
#secondNavColumn {
float: left;
width: 200px;
padding:0 0 20px 0;
margin:0 11px;
}
#mainContent {
background: #ffffff;
margin: 10px;
padding: 10px;
border: 2px solid #bbb;
}

Итак, блок с контентом имеет ширину 500px и «плавает» слева. Колоночные блоки имеют ширину по 200px и также «плывут слева». Высота дизайна wrapper имеет высоту 100%. Высота окна установлена в 100%. Установка различного рода границ, отступов и фона на данном этапе не слишком важна.

На последок откорректируем все это для правильного отображения в IE, добавив комментарии вида:

<!--[if lte IE 6]>
<style type="text/css" media="screen">
body {
_width:expression(document. »
documentElement.offsetWidth < 980 ?  »
"760px" : "auto");
}
#mainContentWrapper {
height: 100%;
}
</style>
<![endif]-->

Пример в действии. Можете откорректировать его для себя и под свои нужды.

Подобного результата можно достичь, используя технику Switchy McLayout, которая была применена на сайте andrewdesign.net для изменения макета сайта, в зависимости от ширины экрана.