Добрый день
Этот пост написан по мотивам поста «Вёрстка c «Ушами»». По комментариям в этом поста я понял, что у людей есть реальная проблема сделать такой вид макета для IE7. Вот Я и решил предложить решение, которым уже давно пользуюсь в работе, и которое полностью отвечает требованиям, озвученным в выше названном посте.
Резиновая версия работает в FF3.5+ (можно сделать что бы работал в FF3.11), IE7+, Opera 9.64+, Chrome, Safari.
Фиксированная версия работает в IE6+.
HTML имеет такую структуру:
Вот что из этого получается — dl.dropbox.com/u/585674/test/index.html
При необходимости макет можно переделать в фиксированный и он будет работать в IE6+ (просто я так и не смог найти стабильно работающий экспрешен для исправления min-width+max-width).
Этот пост написан по мотивам поста «Вёрстка c «Ушами»». По комментариям в этом поста я понял, что у людей есть реальная проблема сделать такой вид макета для IE7. Вот Я и решил предложить решение, которым уже давно пользуюсь в работе, и которое полностью отвечает требованиям, озвученным в выше названном посте.
Итак, макет позволяет удовлетворить такие требования:
- независимо от разрешения, информативная часть сайта должна находиться посередине;
- справа и слева должны остаться графические блоки (уши), причём эти уши должны быть видны только при увеличенном размере экрана браузера, а при уменьшенном не уместившаяся часть должна прятаться (в идеале, чтобы ещё горизонтальной полосы прокрутки не было);
- страница должна быть резиновой от 600px до 1000px;
- подвал всегда прижат к низу.
Резиновая версия работает в FF3.5+ (можно сделать что бы работал в FF3.11), IE7+, Opera 9.64+, Chrome, Safari.
Фиксированная версия работает в IE6+.
Собственно решение:
HTML имеет такую структуру:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<title>Вёрстка c «Ушами» дополнение работающее в ие7 с подвалом прибитым к низу</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<!--[if gt IE 7]><!-->
<link rel="stylesheet" media="screen" type="text/css" href="styles/main.css" />
<!--<![endif]-->
<!--[if lt IE 8]>
<link rel=stylesheet media="screen" type="text/css" href="styles/ie.css" />
<![endif]-->
</head>
<body>
<div class="wrapper">
<div class="base">
<div class="main_row">
<div class="content_row">
</div>
</div>
<div class="header">
<p>header</p>
<div class="b_left ie">left</div>
<div class="b_right ie">right</div>
</div>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
* This source code was highlighted with Source Code Highlighter.CSS
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100.01%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1.2;
}
/*---------------------------------------------------------------------------reset*/
html, body {
color: #968c79;
height: 100%;
font: normal 12px / 16px Tahoma,Geneva,sans-serif;
}
.wrapper{
position: relative;
max-width: 6000px; /*это для Chrome, Safari из-за проблем с позиционированием бекграунда размещенного 50% 0*/
width: 100%;
min-width: 600px;
height: 100%;
margin: 0 auto;
overflow: hidden;
}
.base {
min-width: 600px;
max-width:1000px;
padding: 200px 0 166px;
margin: 0 auto;
}
/*---------------------------------------------------------------------------global*/
.ie{
display: none;
}
/*---------------------------------------------------------------------------global*/
.header {
z-index: 5;
position: absolute;
min-width: 600px;
max-width:1000px;
width: 100%;
height: 200px;
top: 0;
text-align: center;
color: #000;
background: #fff;
margin: 0 auto;
}
.header:before, .header:after{
z-index: 5;
position: absolute;
width: 100px;
height: 200px;
top: 0;
text-align: center;
font-size: 20px;
color: #000;
}
.header:before{
left: -100px;
background:#ddd;
content: "left";
}
.header:after{
right: -100px;
background:#ddd;
content: "right";
}
.main_row {
z-index: 2;
position: relative;
width: 100%;
background: #ddd;
overflow: hidden;
}
.content_row {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
}
.footer {
z-index: 10;
position: absolute;
width: 100%;
height: 166px;
bottom: 0;
margin: 0 auto;
background: url(../i/footer.jpg) 0 0 repeat-x;
overflow: hidden;
}
CSS для IE
@import "main.css";
ie{
display: block;
}
.b_left, .b_right {
z-index: 5;
position: absolute;
display: block;
width: 100px;
height: 200px;
text-align: center;
font-size: 20px;
color: #000;
top: 0;
}
.b_left{
left: -100px;
background:#ddd;
}
.b_right{
right: -100px;
background:#ddd;
}
Вот что из этого получается — dl.dropbox.com/u/585674/test/index.html
При необходимости макет можно переделать в фиксированный и он будет работать в IE6+ (просто я так и не смог найти стабильно работающий экспрешен для исправления min-width+max-width).
