Блочная Верстка(5 div в одну строку)

[SunMaria]

Добрый день, помогите мне разобраться.

Нужно выстроить 5 дивов в одну строку.

Расположение. 1 2 3 4 5 соотвественно, высота строки 134px.

1 и 5 заданной ширина в 277px.

3 центральный блок, 450px и должен находится всегда по центру страницы.

2 и 4 резиновые блоки, который должны равномерно менять размер в зависимости от того как мы сужаем или растягиваем окно браузера, если окно браузера 1003 px то этих блоков не видно а остается только 1 3 и 5ый.

Самое главное чтоб блоки никак друг на друга не нализали и не переходили на новую строку даже если ужать браузер до минимальной, т.е чтоб скрол появился горизонтальный и все. Пример не приложу, потому что исписала уже уйму кода и ничего не получается((( может кто скинет ссылку на инфу как это делается? или просто поможет. Я буду очень признательно) Заранее спасибо)

[sasha^]

сделаю через часок, наверно

Edited July 15, 2012 by sasha^

[Vin]

Поздравляю, Вы только что изобрели... таблицу! Вообще, блоками тоже можно: вот, посмотрите эту вёрстку. Там три блока, боковые резина, центральный фикс, но принцип тот же: допобёрки решают всё А расписывать, да, лень

[SunMaria]

Таблицой я сделала на раз, использование каких либо таблиц в верстке исключенно. Исключительно блочная верстка, а ссылочку щас гляну

[SunMaria]

посмотрела ссылоку, когда 3 блока, вида 1 3 резинка 2 фиксированный, и наоборот 1 3 фиксированный а 2 резинка у меня получается. А вот решить задачу именно эту с 5блока никак не получается(( больше не будет предложений?

Ктото там обещался написать через час))

[Vin]

Да то же самое, только боковой резиновый блок будет выступать в роли дополнительной обёртки, в которую надо положить блок фиксированной ширины (крайний) и резиновый с соответствующим margin'ом (тот, что ближе к центру).

Edited July 15, 2012 by Vin

[sasha^]

извиняюсь, что не вовремя, я у бабушки вишни собирал

вот без твоих размеров: http://jsfiddle.net/AAVuF/

вот с твоими: http://jsfiddle.net/pRBYV/

код вот:

<div class="wrap">
    <span>
        <div id="left1"></div>
        <div id="left2"></div>
    </span>
    <span class="fix"></span>
    <span>
        <div id="right1"></div>
        <div id="right2"></div>
    </span>
</div>?

html,body{
margin:0;
padding:0;
height:134px;
}

.wrap{
display:table;
width:100%;
height:134px;
}

span{
display:table-cell;
height:134px;
}

span:nth-child(odd){
background:blue;
width:30%;
}
.fix {width:450px;min-width:450px;max-width:450px;background:red}

#left1 {float:left;background:yellow;width:277px;min-width:277px;max-width:277px;height:134px}

#right2 {float:right;width:277px;min-width:277px;max-width:277px;height:134px;background:yellow;}
?

надеюсь на плюсик

[SunMaria]

Спасибо большое, а плюсик почему то не дается(

Вставила к себе.. сделала как надо) но теперь возникло 3 вопроса)

1. Нельзя ли пояснений к участкам кода чтобы смогла сама разобратся?

2. А где классы left and right1?

3. 1 проблемка, у меня в блоках 1 и 5 картинки(фигурный орнамет) и получается в каких то местах он прозрачный, и цвет блоков 2 и 4 получается налазит на эти блоки, и не могу понять куда ставить марджин поставить чтобы не наезжало.

Edited July 15, 2012 by SunMaria

[Viper]

<div class="wrap">
    <span>
        <div id="left1"></div>
        <div id="left2"></div>
    </span>
    <span class="fix"></span>
    <span>
        <div id="right1"></div>
        <div id="right2"></div>
    </span>
</div>?

ну почему именно <span>??(

html,body{
margin:0;
padding:0;
height:134px;
}

зачем?(

display:table;

display:table-cell;

span:nth-child(odd)

не будут работать в IE<9 без тяжелых экспрешенов.

П.С. А контент не предвидится в даных блоках?

[sasha^]

<div class="wrap">
    <span>
        <div id="left1"></div>
        <div id="left2"></div>
    </span>
    <span class="fix"></span>
    <span>
        <div id="right1"></div>
        <div id="right2"></div>
    </span>
</div>?

ну почему именно <span>??(

какая разница? можно и дивы

html,body{
margin:0;
padding:0;
height:134px;
}

зачем?(

точно эт ненада

display:table;

display:table-cell;

span:nth-child(odd)

не будут работать в IE<9 без тяжелых экспрешенов.

мне не говорили что нада кроссбраузерность

П.С. А контент не предвидится в даных блоках?

низнаю

[SunMaria]

ну вот(((( кроссбраузерность нужна(((

Контент, там только картинки, это оформлении шапки сайта.( ну минимум еще телефоны поставить...вот.. что то я так и не разобралась куда маржин ставить чтобы небыло подложки 2 и 4 блока под 1 и 5 (((

Edited July 15, 2012 by SunMaria

[SunMaria]

ну вот пыталась сама все исправить, стала еще хуже(( не понимаю как это сделать(( и с оберточными дивами и без всякая фигня выходит((

[sasha^]

это я делал на скорую руку, как пример

если действительно надо, то можно сделать

З.Ы. Правда придется с oveflow мутить, тогда кроссбраузерно будет. А еще, если не сложно, то можно дать страницу и стили -- помогу

скайп -- alexander-skype5

Edited July 16, 2012 by sasha^

[SunMaria]

Так с overflow я писала так .. но это ничего не работает ((

<style>
 body 
 {
 margin:0;
 padding:0;
 border:0;
 background-image:url(images/bg.jpg);
 width:100%;
 height:134px;
 }
 #wrap
 {
 overflow:hidden;
 }
 .left {
 float:left;
 width:50%;
 margin-right:-275px;
 background-color:#FFFFFF;
 }
 .right {
 float:right;
 width:50%;
 margin-left:-275px;
 background-color:#FFFFFF
 }
 .center {
 float:left;
 position:relative;
 width:450px;
 height:134px;
 }
 .center_pic {
background-image:url(images/logo_bg_center.png);
 background-repeat:no-repeat;
 position:relative;
 width:450px;
 height:134px;
 }
 .left_pic{
 float: left;
 background:url(images/logo_bg_left3.png) no-repeat;
 width: 277px;
 height: 134px;
}
.right_pic {
 float: right;
background:url(images/logo_bg_right.png) no-repeat;
width: 277px;
height: 134px;
}

<body>
   <div id="wrap">
        <div class="left_pic"></div>
        <div class="right_pic"></div>
        <div>
             <div class="left"></div>
             <div class="right"></div>
                    <div class="center">
                          <div class="center_pic"></div>
                    </div>
        </div>
   </div>
</body>

А скайпом я к сожалению не пользуюсь(

Edited July 16, 2012 by SunMaria

[sasha^]

зарегся, а то на форуме долго обьяснять)

там моментальные сообщения

жду

мой -- alexander-skype5

[SunMaria]

Ну вот пропали все((