Вёрстка c «Ушами» дополнение, работающее в IE7, с подвалом «прибитым» к низу

Добрый день

Этот пост написан по мотивам поста «Вёрстка 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).

Similar posts

AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 26

    0
    Отлично! Все пашет
      0
      а если набить текстом то начинается беда в Opera win…
        0
        в чем именно беда?
        только что набил текстом и все нормально…
          0
          текст вылезает за пределы центрального блока
            0
            это тестовый макет, в нем стоит .content_row {height: 300px;}, что бы можно было не набивать текстом

            с реальной ситуации высоту для content_row ставить не нужно
              0
              прошу прощения (в реальной)
                –2
                но лучше было бы набить текстом) что я и попытался сделать, не вникая в подробности) спасибо вам за ещё один способ…
          –3
          Вот решение с гораздо меньшим кол-вом кода

          www.cssstickyfooter.com/
            +2
            в этом примере показывается как сделать «ушки», а реализация футера это второстепенный вопрос
              0
              ах, да… простите
            0
            Подозреваю, что решение, которое сейчас используется для IE < 8 кроссбраузерное. Зачем тогда использовать
            .header:before, .header:after {...
            и т.п.?
              +1
              Что бы b_left, b_right можно было вставить через тот же Jquery только для IE < 7, а для новых браузеров отдавать код без оформительских тегов.

              А когда наступит долгожданный момент, когда IE < 7 отойдут в мир иной, можно было отключить стили не меняя HTML.
              +1
              Если я правильно понял суть проблемы по min-width:
              width: expression((documentElement.offsetWidth || document.body.offsetWidth) < 1200? '1200px': '');
                +1
                >просто я так и не смог найти стабильно работающий экспрешен для исправления min-width+max-width

                как то так пробовали?

                * html .wrapper {
                width: expression(
                (document.compatMode && document.compatMode == 'CSS1Compat')?
                (document.documentElement.clientWidth < 600? «600px»:
                (document.documentElement.clientWidth > 1000? «1000px»: «auto»)):
                (document.body.clientWidth > 1000? «600px»:
                (document.body.clientWidth < 1000? «1000px»: «auto»)));
                }

                  0
                  тут проблема в том что минимальное и максимальное значение нужно задавать не только к одному блоку, а к нескольким вложенным, и видимо из-за этого все проблемы…

                  –1
                  Опять с хаками :).
                  Вы без хаков сделайте.
                    0
                    прошу прощения, а где вы тут хаки увидели?
                      0
                      Вот:
                        0
                        [if gt IE 7]
                          0
                          вы наверное что то путаете, это [if gt IE 7] условные комментарии, а хаки это "* html..."
                            0
                            Эти те же я только в профиль
                              +2
                              ну право на свое мнение у вас никто не отбирал, даже если оно ошибочное:)

                              все зависит от точки зрения…
                                –1
                                Не зависит, хак — он и в Африке хак
                    0
                    Спасибо за статью. Пришлась очень кстати.
                    Не могу сказать, что считаю обсуждаемый вопрос проблемой, но все-таки использовал из примера «position: relative;», что собственно и решило мою задачу.
                      0
                      А почему нельзя наложить «уши» бэкграундом на body и выровнять по центру?
                        0
                        макет же резиновый…

                      Only users with full accounts can post comments. Log in, please.