Помогите растянуть сайт в длину (верстка на DIV)

Тема в разделе "Веб-дизайн", создана пользователем zaqwsx_, 28 дек 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. zaqwsx_

    zaqwsx_

    Регистр.:
    29 авг 2006
    Сообщения:
    227
    Симпатии:
    14
    Помогите пожалуйста, сделал сайт клиенту, я еще начинающий:

    http://denden.odessalife.com/


    левая тень состоит из одного дива, центральная колонка из еще одного, и правая тень из еще одного дива.
    Как мне заставить левую и правую тень растягиваться вместе со средней колонкой ?
    Все заключил в контейнер.
    если надо, вот исходник сайта :

    HTML:
    <body>
    <div class="container0">  - общий конетйнер
    <div class="boka_l">  - левая тень
    </div>
    <div class="container"> - средняя колонка
    тут все содерживое сайта
    </div>
    <div class="boka_r"> - правая тень
    </div>
    </div>
    </body>
    вот CSS :

    Код:
    html{height:100%;}
    
    body{                                                       -----> общие настройки для всего тела странички
    margin:0px;
    height:auto;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 0.8em;
    color: #FFF;
    padding:0px;
    background-image:url(../images/boka2.png);
    background-color:#666261;
    }
    
    .container0 {         ------> общий контейнер, объединяет в себе вес сайт
    width:1048px;
    height: 1000px;
    margin:0 auto;
    overflow:hidden;
    }
    
    .boka_l {                                              --------->  левая тень
    background-image:url(../images/boka_left.png);
    width:49px;
    height:100%;
    float:left;
    margin:0px;
    padding:0px;
    }
    .boka_r {                                  ----------------> правая тень
    background-image:url(../images/boka_right.png);
    width:49px;
    height:100%;
    float:left;
    }
    .container {                                       ---------------------> средний контейнер
    margin:0 auto;
    width:950px;
    height:100%;
    background-image:url(../images/bg.jpg);
    background-repeat: no-repeat;
    z-index:0;
    background-color:#666261;
    float:left;
    }
    
     
  2. bork75

    bork75 Д☼брая собака )

    Регистр.:
    21 июн 2008
    Сообщения:
    1.449
    Симпатии:
    716
    У тебя в примере классы одни, а в стилях другие...
    вот простой пример, используй width в процентах
    HTML:
    
    <div style="background:#333; width:100%; height:100px;"> <!-- центральная часть -->
       <div style="background:#008000; width:20%; height:100px; float:left;"></div> <!-- левая часть зелёный -->
       <div style="background:#FF0000; width:20%; height:100px; float:right;"></div> <!-- правая часть  красный -->
    </div>
    
    Если нужно сжимать или расширять до определённого значения, то используй min-width и max-width
     
  3. zaqwsx_

    zaqwsx_

    Регистр.:
    29 авг 2006
    Сообщения:
    227
    Симпатии:
    14
    мне растянуть не в ширину, а в длину

    я уже пробовал и min-height использовать

    но не получается.

    а, извините, указал не ту часть сайта , уже поправил в исходном сообщении.
     
  4. bork75

    bork75 Д☼брая собака )

    Регистр.:
    21 июн 2008
    Сообщения:
    1.449
    Симпатии:
    716
    И в примере написал бы полный путь до изображений, непонятно где чего смотреть... Нормально бы написал задачу, давно бы уже ответ получил )

    нужно растягивать по горизонтали или по вертикали?
     
  5. Andy_ham

    Andy_ham Джедай на пенсии

    Регистр.:
    3 сен 2007
    Сообщения:
    450
    Симпатии:
    264
    Когда-то нашел в инете рецепт - как 3 колонки делать одинаковые по высоте. Сохранил у себя на компе, выкладываю "как есть".

    Хочу рассказать про самый простой и логичный, на мой взгляд, способ сделать колонки одинаковой высоты.
    Кто придумал этот способ не знаю. Но судя по комментариям к этому посту знают о нем немногие, в результате пошло мнение что таблицы в данном случае логичнее и лучше.
    И так. Из html-кода:

    <div class="cols">
    <div class="col1">Текст1</div>
    <div class="col2">Текст2</div>
    <div class="col3">Текст3</div>
    </div>





    Сделаем колонки одинаковой высоты.

    .cols{
    overflow:hidden;
    _zoom:1;
    }
    .cols .col1,.cols .col2,.cols .col3{
    padding-bottom:10000px;
    margin-bottom:-10000px;
    }


    Осталось только задать фон для колонок и сделать их плавающими. Работает везде.
    Все по стандарту. Делаем большой паддинг снизу, это дает бэкграунд вниз. Ровно таким маргином компенсируем отступ. Родительский див отрезает лишнее.
    Пример
    UPD. _zoom:1 можно заменить на width:100%, эффект для IE6 тот же.
     
  6. TavlaD

    TavlaD Создатель

    Регистр.:
    26 дек 2009
    Сообщения:
    26
    Симпатии:
    1
    А если попробовать сделать вложенные дивы?
    Надо будет поправить CSS
    Код:
    .boka_l 
    {
    background:url(../images/boka_left.png) repeat-y 0 0;
    width:1048px;
    }
    .boka_r 
    {
    background:url(../images/boka_right.png) repeat-y 999px 0;
    width:1048px;
    }
    
    и изменить HTML
    HTML:
    
    <body>
    <div class="container0">
    
    <div class="boka_l">
    <div class="boka_r">
    
    <div class="container">
    тут все содерживое сайта
    </div>
    
    </div>
    </div>
    
    </div>
    </body>
    
     
  7. draugmot

    draugmot Прохожие

    А так принципиально делать эту тень дивом? Возможно, проще будет положить ее фоном в эту или в соседнюю колонку?
     
  8. G.Vad!k

    G.Vad!k Постоялец

    Регистр.:
    14 окт 2007
    Сообщения:
    61
    Симпатии:
    13
    не принципиально. можно и так.
     
Статус темы:
Закрыта.