Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Еще один вопрос по блочной верстке

Автор: Nikol 21.12.2008, 19:18

Мне нужно выставить 3 блока в ряд так, чтобы средний, с фиксированным размером и фоном, располагался посередине, а те, которые справа и слева от него, растягивались на всю оставшуюся ширину.

Собственно, это мой первый опыт блочной верстки, поэтому опишу задачу в целом. Хедер и футер сайта растянуты на 100%. В правой и левой части - лежат разные бекграунды, которые и должны растягиваться, а средняя часть фиксированного размера.

Мне удалось сделать хедер таким образом: правый и левый див абсолютно позиционированы, прижаты к верху и растянуты каждый на 50%. А средний див выводится как обычно и просто накладывается на них.

Код


#topsection {
    height: 186px;
}

#headerLeft {
    background: transparent url(images/header_bg_left.png) top right repeat-x;
    position: absolute;
    top: 0px;
    left: 0;
    width: 50%;
    height: 186px;
}

#headerRight {
    background: transparent url(images/header_bg_right.png) top left repeat-x;
    position: absolute;
    top: 0px;
    right: 0;
    width: 50%;
    height: 186px;
}

#header {
    margin: 0 auto;
    padding: 0;
    height: 186px;
    width: 924px;
    vertical-align: top;
    position: relative;
    background: #f3f3f3 url(images/header_bg.png) no-repeat top center;
}

Код


  <div id="topsection">

    <div id="headerLeft"></div>

    <div id="headerRight"></div>

    <div id="header">
     <div id="headerimg">
         <h1><a href="#"><img src="images/logo.png" alt="" /></a></h1>
     </div>
     <div id="description">
        Quality development service team<br />
        <a href="http://www.qds-team.com"><img src="images/en.png" alt="" class="languages" /></a>
        <a href="http://ru.qds-team.com"><img src="images/ru.png" alt="" class="languages" /></a>
      </div>
    </div>

  </div>

Для футера я попыталась проделать следующее: крайние блоки растягиваются 50% каждый, а центральный выводится как relative и перекрывает их.

Код


#footersection {
    clear: left;
    height: 112px;
    width: 100%;
    text-align: center;
    padding: 0;
}
#footerLeft {
    background: transparent url(images/footer_bg_left.png) bottom right repeat-x; 
    float: left;
    width: 50%; 
    height: 112px;    
    }
#footerRight {
    background: transparent url(images/footer_bg_right.png) bottom left repeat-x; 
    float: left;    
       width: 50%; 
    height: 112px;    
    }
#footer {
    background: url(images/footer_bg.png) no-repeat bottom center;
    margin: 0 auto;
       width: 924px;
    height: 112px;
        position: relative;    
}

Код


  <div id="footersection">

    <div id="footerLeft"></div>

    <div id="footerRight"></div>

    <div id="footer">
    </div>

  </div>

Но! В IE этот центральный див не накрывает крайние, как я хочу, а переносится под них. Получается, в случае IE нужно добавлять top: -112px. Вот как это пофиксить? Ну не подключать же дополнительный css для IE из-за одной строки? Можно ли прямо в css файле проверить браузер? Или что посоветуете, может пример есть?

Вот http://www.qds-team.com/, который я пытаюсь реализовать. Сейчас сам шаблон сверстан дивами, но все эти дивы заключены в таблицу 3х3. Я понимаю, что это изврат, но нужно было сайт запускать, так что вот такое временное решение.

Автор: blah 21.12.2008, 22:58

Код


* html #footer{top:-112px;}
* +html #footer{top:-112px;}

А по хорошему, почему бы не сделать так же как и для хедера?

Автор: Nikol 22.12.2008, 00:53

blah, спасибо, помогло немного. Див сдвинулся вверх в IE6 и остался на месте в остальных браузерах. Однако при этом этом в IE6 внизу окна появляется пустота высотой с мой див, как-будто сам див поднялся, но место для него все равно резервируется. Это можно как-то решить? Кроме того, я решила еще в IE7 посмотреть - там вообще весь футер непонятно как сдвинулся - центральный див съехал вниз, а правый - вниз и влево (а я-то думала, если в 6 будет работать, значит и в 7 тоже). smile

Кстати, можете объяснить как читать предложенную вами конструкцию?

Цитата(blah @ 21.12.2008, 22:58

)

А по хорошему, почему бы не сделать так же как и для хедера?

Обязательно сделаю, как только все получится. Просто изначально я планировала прижимать футер к нижнему краю окна и везде использовала абсолютное позиционирование. Но потом я на это забила, и без этого сложностей хватает.

Кстати, не знаю, важно ли в этом случае, доктайп - xhtml:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Автор: blah 22.12.2008, 01:48

1. Ну в этом собственно и есть фишка относительного позиционирования. Элемент с position:relative; сдвигается относительно места, где бы он находился без него. Чтоб не резервировать место можно использовать #footer { margin:-112px auto 0;} с той же припиской впереди.
2. 6 и 7 ИЕ очень разные. Лучше использовать ширину в 49% и флоатить в разные стороны.
3.

Код


#footersection{
    height:112px;
    width:100%;
    position:relative;
}
#footerLeft{
    position:absolute;
    width:49%;
    height:112px;
    left:0;
    top:0;
}
#footerRight{
    position:absolute;
    right:0;
    top:0;
    width:49%;
    height:112px;
}

С доктайпом все в порядке.

Автор: Nikol 22.12.2008, 02:25

Работает!

Но все-таки скажите, для чего нужна приписка * +html? Что этот код работал только в IE, я так понимаю?
Кстати, когда я пыталась прижимать футер к нижнему краю, как раз дивы располагались, как мне нужно. Вот только если текста много, весь футер оставался на месте, а текс проходил под ним дальше. Ну это уже не такая проблема - у меня врядли будут такие пустые страницы.

И еще, как на ваш взгляд мое решение в целом? Я другого просто не нашла.