Рассмотрим двухколоночный макет.
Достоинствами этого макета является его одинаковое отображение во многих браузерах, причём не только основных, абсолютно валидный код, позиционирование подвала внизу окна браузера при малом контенте, отсутствие 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="colright">
<div class="col1wrap">
<div class="col1">
<h2><a href="#">Заголовок 2 уровня</a></h2>
</div>
</div>
<div class="col2">
<h2><a href="#">Заголовок 2 уровня</a></h2>
<p>Вторая колонка</p>
</div>
</div></div></div></div></div><!--main-->
<div id="wrap_footer">
<div id="footer">
<p>qwerty</p>
</div>
</div>
<!--footer-->
</body>
CSS:
html, body {height:100%;}
#wrap_main {min-height:100%; overflow:hidden; background-color:#0F0}
#main { overflow:hidden;position:relative}
#header {width: 100%; clear:both;float:left;}
.colmask {width:100%; position:relative;clear:both;float:left;overflow:hidden;}
.colright {width:200%; position:relative;float:left}
.col1wrap {width:50%; position:relative;float:right;}
.col1 {right:100%; position:relative;overflow:hidden;}
.col2 {float:left; position:relative;}
#wrap_footer{width:100%; float:left;}
#footer {position:relative; margin: 0 auto;}
#wrap_main {margin: 0 auto;min-width: 1003px;max-width: 1400px;}
#main {padding-bottom:100px; text-align:left;}
#header {height:100px; background-color:#F00}
.colmask {}
.colright {left:200px}
.col1wrap {right:200px}
.col1 {margin:0 15px 0 215px;}
.col2 {right:185px;width:170px;}
#footer {background-color:#3CF;min-width: 1003px;max-width: 1400px;height:100px; margin-top:-100px; }
Здесь я уже не буду рассматривать свойства, применяемые к блокам, рассмотренным в одноколоночном макете. Они идентичны и в этом макете. Единственное замечу, что свойства, применяемые к "main", теперь применим к блоку "wrap_main", в который и обернём блок "main".
Теперь более детально.
Первым шагом наделим все основные элементы (блоки), а именно main, colmask, colright, col1wrap, col1, col2, footer свойством position:relative.
#main, .colmask, .colright, .col1wrap, .col1, .col2, #footer {position:relative;}
Это делается для того, чтобы можно было перемещать эти блоки в любом направлении, в нашем случае в горизонтальном.
Вторым шагом создадим блок "wrap_main" и зададим ему минимальную высоту, диапазон изменения ширины и отцентруем его по середине окна браузера, как и в одноколоночном макете с блоком "main".
#wrap_main {background-color:#fc3305;min-height:100%;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:#FFD8B7;}
Высота блока в этом случае будет равна высоте его контента. Теперь рисунок в окне браузера будет выглядеть так:
Создадим следующий блок "colright", поместим его в "colmask" и наделим свойствами:
.colright {width:200%; float:left;background-color:#cc9;left:200px}
В результате блок "colright" прижмётся к левому краю своего родительского элемента "colmask" со смещением вправо на 200px. Длина его будет составлять 200% от длины своего родителя, то есть блока "colmask". Наглядно это будет выглядеть так:
Создадим следующий блок "col1wrap", поместим его в "colright" и наделим свойствами:
.col1wrap {width:50%;float:right;right:200px}
В результате блок "col1wrap" прижмётся к правому краю своего родительского элемента "colright" со смещением влево на 200px. Длина его будет составлять 50% от длины своего родителя, то есть блока "colright". Наглядно это будет выглядеть так:
Создадим следующий блок "col1", поместим его в "col1wrap" и наделим свойствами:
.col1 {right:100%;margin:0 15px 0 215px;}
В результате блок "col1" сместится влево на 100%, то есть на длину своего родителя "col1wrap", с отступами справа 15px и слева 215px. Наглядно это будет выглядеть так:
Создадим следующий блок "col2", поместим его в "colright" и наделим свойствами:
.col2 {float:left;right:185px;width:170px;}
В результате блок "col2" примет длину 170px и сместится влево на 185px, Наглядно это будет выглядеть так:
Теперь основные блоки наделим свойством overflow:hidden
#wrap_main, #main, .colmask, .col1{overflow:hidden}
Это свойство определяет, что происходит с содержимым, которое переполняет область содержимого элемента. В этом случае оно будет скрыто. Если говорить совсем примитивно, обрезаем всё лишнее. Наглядно это будет выглядеть так:
Почти во всех современных браузерах достаточно применить это свойство только "colmask", но наша цель- корректно отобразить макет в максимальном количестве браузером, тем более, что на этом этапе это уже совсем не сложно.
Последним этапом добавим в наш макет шапку и подвал. Шапку поместим в "main" и наделим его свойствами
#header {width: 100%; clear:both;float:left;background-color:#060;height:100px}
А подвал "footer", помещаем его в контейнер "wrap_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;}
Вот и всё, конечный результат будет выглядеть так.
Ну или в браузере.
Rss-подписка
Email
Re: Вместо книги! Супер =)
Вместо книги! Супер =)
Re: класссс
класссс
Re: Создание динамического двухколоночного макета.
посмотрите пожалуйста http://h24307.srv3.test-hf.ru/ie6/. здесь пролема в вашем макете или в моём коде? дело в том, что в ie6 не отображаются блоки, которые находятся в .col1 и .col2
их можно увидеть, если убрать overflow:hidden у .colmask, но они находятся за пределами экрана.