Легко изменяемый макет фиксированной ширины
Ещё один способ вёрстки макетов фиксированной ширины
Прогуливаясь по Internet в поисках неизвестно чего, я набрёл на статью годичной давности, в которой приводится рецепт по созданию легко изменяемого макета фиксированной ширины.
Смысл был таков (авторская орфография и пунктуация сохранены):
Создадим простейший трехколоночный шаблон, с блоками, фиксированной ширины. Блок контента расположим слева, а два колоночных блока помещаем справа от контента, один за другим. Идея заключается в следующем, если мы расположим три блока, с float:left друг за другом, то при уменьшении размера экрана, они сместятся вниз, один под другой. При этом блок с контентом всегда будет вверху, что есть несомненно важным моментом в структурировании информации.
Пока всё хорошо. В принципе, задача очень простая, вполне по силам студенту-первокурснику. Я не ожидал найти для себя что-либо новое, так как делал подобные вещи сотни раз. Но одна вещь меня поразила: разметка.
<div id="mainContentWrapper">
<div id="mainContent"></div>
</div>
<div id="firstNavColumn"></div>
<div id="secondNavColumn"></div>
</div>
На мой взгляд, как минимум один <div> здесь явно лишний. Автор оправдывает это тем, что это необходимость, благодаря которой мы сможем более гибко и легко позиционировать блоки, для дальнейшего их смещения при изменении ширины экрана
.
Естественно, мне стало интересно, возможно ли избавиться от лишних элементов, не несущих семантической нагрузки?
Начнем с разметки:
<div id="content" class="column"></div>
<div id="nav1" class="column"></div>
<div id="nav2" class="column"></div>
</body>
В реальной жизни имеет смысл использовать семантически значимые идентификаторы и имена классов.
Теперь таблица стилей:
margin: 0;
padding: 0;
border: 0;
}
html {
overflow: auto;
height: 100%;
}
body {
font: 1.1em/1.6em Verdana, Tahoma, Arial, Helvetica, sans-serif;
background: #EEE;
color: #000;
height: auto;
min-height: 100%;
min-width: 760px;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
html>body .clearfix {
display: block;
}
.clearfix {
display: inline-block;
}
.column {
float: left;
}
#content {
width: 456px;
float: left;
min-height: 100%;
margin: 10px 21px 10px 10px;
padding: 10px;
border: 2px solid #BBB;
background: #FFF;
}
#nav1 {
width: 200px;
margin: 0 11px;
padding: 0;
}
#nav2 {
width: 200px;
margin: 0 11px;
padding: 0 0 20px;
}
Стили для IE:
height: 100%;
width: 955px;
}
* html #content, * html #nav1, * html #nav2 {
display: inline;
}
/*\*/
* html .clearfix {
height: 1%;
}
/**/
Несколько замечаний:
- на самом деле далеко не все CSS-правила нужны, многие декларации ориентированы на презентацию, нежели на разметку
- если необходимо разместить нижний колонтитул в нижней части экрана, то все колонки нужно завернуть еще в один <div>. Детальнее это описано здесь. Если же нужен нижний колонтитул (сразу под колонками), то ему нужно будет задать
clear: left. - метод центрирования колнок внутри контейнера описан здесь.
Вложения:
Автор: Vladimir; опубликовано в: CSS, HTML; метки: CSS, HTML, XHTML, жесткий макет, макет, семантикаМар
2008
Комментарии к статье «Легко изменяемый макет фиксированной ширины» (3) »
Пожалуйста, не используйте эту форму для комментирования! Данная форма предназначена исключительно для ботов.
Оставить комментарий к записи «Легко изменяемый макет фиксированной ширины»
गते गते पारगते पारसंगते बोधि स्वाहा
Меня зовут Владимир, я программист-фрилансер, специализирующийся на Web-программировании и програмировании под Linux.
По совместительству занимаюсь администрированием LAMP/LNMP-серверов и техническим переводом.
(если необходимо разместить нижний колонтитул в нижней части экрана, то все колонки нужно завернуть еще в один . )(с)
Товарищи, Читайте книги Ростислава Чебыкина, и никогда у вас не будет проблем с закрепелнием подвала сайта, без всяких дополнительных «Дивов»
Видите ли, Анатолий, в теории оно всё хорошо. Но когда дело доходит до практики и когда требуется поддержка Internet Explorer 6, в реальности всё намного хуже.
Если Вы обратите внимание, то высота у макета составляет 100%, при этом ни одна из колонок не завернута в контейнер (роль контейнера выполняет <body>). Проблема в том, что когда высота контента каждой из колонок заранее неизвестна (то есть нельзя определить, какая из колонок будет длиннее), а также неизвестна высота окна (viewport), без лишнего <div> будет очень трудно. Если задать
padding-bottomу контейнера с колонками, чтобы разместить в нем подвал (как оно обычно и делается), то возникает проблема с W3C box model, ибо вheight: 100%padding-bottomуже не входит. То есть при стопроцентной высоте и таким решением всегда будем получать вертикальную прокрутку (иoverflow: hiddenздесь не выход).В любом случае, если Вы предоставите решение, которое:
то мне будет очень интересно на него посмотреть, ибо учиться никогда не поздно
А пока это бездоказательно 
overflow: autoу элементаhtmlнужен только для IE (по-моему, только для IE6, но седьмому вроде не вредит — нет под рукой, чтобы проверить). А в Konqueror 3.5.9 этотoverflow: autoсоздает очень неприятные эффекты. Так что лучше подправить правила так, чтобы они были видны только IE.