Подкинули задачу. Макет страницы в 4 блока: хедер/футер, сайд/контент. Сайд с контентом должны быть оформлены в скругленные рамки одинаковой высоты. Под современные браузеры (допустимы прямоугольные рамки в IE8).
Изюминка в колонках одинаковой высоты, не таблица:)
Рамка рисунком
Сначала придумал вариант завернуть пару сайд/контент как <div style="display:inline-block;"> и оформить рамки колонок рисунком, залитым в подложку.
подложка с рисунком
- - сложная подложка, рамка рисунком
- + будет работать и в старых IE (через <div style="display:inline;zoom:1;">)
Таблица на CSS
А можно с помощью стилей превратить блоки в таблицу со свойственными плюшками: выравнивание колонок, заполнение окна, центрирование текста и т.д. При этом разметка останется семантической и браузеру для отрисовки не надо ждать пока закачается вся таблица. Весь макет:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/xml; charset=UTF-8" />
<title></title>
<style type="text/css">
html,body {
margin : 0;
padding : 0;
height : 100%;
border : none;
}
div[class|="tpl"] {
box-sizing : border-box;
-moz-box-sizing : border-box;
-webkit-box-sizing : border-box;
}
div.tpl-header, div.tpl-footer {
background : #faa;
height : 80px;
position : relative;
z-index : 1;
}
div.tpl-footer {
height : 70px;
margin-top : -150px;
}
div.tpl-page {
background : #aaf;
border-spacing : 15px;
display : table;
height : 100%;
padding : 80px 0 70px 0;
position : relative;
top : -80px;
width : 100%;
}
div.tpl-side, div.tpl-content {
background : #afa;
border : solid 1px #444;
border-radius : 5px;
border-spacing : 15px;
display : table-cell;
padding : 10px;
}
div.tpl-side {
width : 200px;
}
</style>
<!--[if lte IE 7]>
<style>
div.tpl-page, div.tpl-header, div.tpl-footer {
display : block;
}
div.tpl-side, div.tpl-content {
display : inline;
margin : 15px;
vertical-align : top;
zoom : 1;
}
</style>
<![endif]-->
</head>
<body>
<div class="tpl-header"> .tpl-header </div>
<div class="tpl-page">
<div class="tpl-side"> .tpl-side </div>
<div class="tpl-content"> .tpl-content </div>
</div>
<div class="tpl-footer"> .tpl-footer </div>
</body>
</html>
Итак, .tpl-page - блок растянут на всё окно, разделен на 2 колонки .tpl-side и .tpl-content (сколько угодно), сверху и снизу отступы, в которые задвигаются .tpl-header и .tpl-footer.
Пробовал развить идею - хедер и футер представить частями таблицы, но тогда придётся вводить в разметку дополнительные элементы с display:table-column-group - вся семантика насмарку. Оставил как есть.
курим маны:
2012-01
Обнаружился любопытный дефект. В FF(3.6.25, 9.0.) при доктайпе html5, задвиганиe блоков .tpl-header, .tpl-footer с помощью отрицательного значения top растягивает контейнер html и после блока body появляется пустой отступ, размером соответствующим смещениям блоков .tpl-header, .tpl-footer. Лечится просто: вместо отрицательного значения top используем отрицательное значение margin-top. В данном случае, достаточно это сделать для .tpl-footer. Эффект редкий и при тесте в обновлённом FF(3.6.26, 10.0) не проявился.
Комментариев нет:
Отправить комментарий