помогите с версткой

Тема в разделе "Веб-дизайн", создана пользователем zero20, 16 май 2011.

Модераторы: zek24
  1. zero20

    zero20

    Регистр.:
    23 апр 2006
    Сообщения:
    232
    Симпатии:
    49
    Никак не могу разобраться в верстке
    Сделал шапку:
    HTML:
    <div id="wrap">
     <div id="img1"></div>
     <div id="img2"><a href="#"><img src="/logo.gif" alt=""></a></div>
     <div id="img3"></div>
     <div id="imgbg"></div>
     <div id="img4"></div>
    </div> 
    Стили для блоков:
    HTML:
    
    html{min-width: 1000px;}
    #wrap{
    max-width: 1500px;
     margin: 0 auto;
    }
    
    #img1{
    background:url('img1.jpg') no-repeat;
    width: 276px;
    height: 203px;
    float: left;
    }
    #img2{
    width: 155px;
    height: 203px;
    float: left;
    }
    #img3{
    background:url('header1.gif') no-repeat;
    width: 296px;
    height: 203px;
    float: left;
    }
    #imgbg{
    background:url('line-header.gif') repeat-x;
    
    height: 203px;
    float: left;
    }
    #img4{
    background:url('img.jpg') no-repeat;
    width: 291px;
    height: 203px;
    float: left;
    }
    Макет должен иметь ширину по умолчанию 1500px, а минимальную ширину 1000px. Картинки img1 и img2 имееют фиксированный размер, а вот селектор imgbg должен растягиваться по ширине в зависимости от маштаба.
    Вопрос как это сделать?
     
  2. _sokal_

    _sokal_

    Регистр.:
    25 дек 2009
    Сообщения:
    300
    Симпатии:
    139
    imgbg нужна указать в % отнашении.
     
  3. zero20

    zero20

    Регистр.:
    23 апр 2006
    Сообщения:
    232
    Симпатии:
    49
    указывал, при ширине 1500px все отлично, как начинаешь уменьшать где-то до 1200px поледняя img4 переходит на вторую строку, хотя указал min-width: 1000px.
     
  4. _sokal_

    _sokal_

    Регистр.:
    25 дек 2009
    Сообщения:
    300
    Симпатии:
    139
    я так понял imgbg монотонный,можно залить wrap,одним цветом или изображение(из imgbg),а img4 выравнять по правой стороне,imgbg можно будет убрать, а на его месте будет видна подложка кторая в wrap.
     
    zero20 нравится это.
  5. troop3r

    troop3r Постоялец

    Регистр.:
    14 ноя 2009
    Сообщения:
    138
    Симпатии:
    22
    попробуй:

    #img4{float:right;}
    #imgbg{overflow:hidden;}
     
    zero20 нравится это.
  6. zero20

    zero20

    Регистр.:
    23 апр 2006
    Сообщения:
    232
    Симпатии:
    49
    Все спасибо, разобрался как и было сказано, залил на 100% wrap бекраундом imgbg, img4 к праву, и все тип топ.