Растяжка блока

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

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

    VeNorm Постоялец

    Регистр.:
    22 дек 2008
    Сообщения:
    91
    Симпатии:
    3
    Здравствуйте. Вот пытаюсь растянуть блок, а не получается.
    Подскажите, как сделать данное. Блок делится на 3 картинки.
    [​IMG]
     
  2. fima32

    fima32

    Регистр.:
    25 дек 2007
    Сообщения:
    201
    Симпатии:
    13
    А поподробнее можно? Где и что? Непонятно
     
  3. VeNorm

    VeNorm Постоялец

    Регистр.:
    22 дек 2008
    Сообщения:
    91
    Симпатии:
    3
    Я хотел узнать сам способ вёрстки данного блока.
     
  4. Kub

    Kub

    Регистр.:
    5 июн 2009
    Сообщения:
    613
    Симпатии:
    477
  5. VeNorm

    VeNorm Постоялец

    Регистр.:
    22 дек 2008
    Сообщения:
    91
    Симпатии:
    3
    Тут не то подразумевается...
    Используется 3 картинки. Необходимо чтобы текст начинался с верхней картинки, при растяжке использовалась картинка самой растяжки и при окончании текст заходил на футер.
    У меня получается только так:
    [​IMG]
     
  6. EviLive

    EviLive Создатель

    Регистр.:
    10 янв 2011
    Сообщения:
    18
    Симпатии:
    6
    Если надо сверстать так как Вы хотите, если я Вас правильно понял то.

    Код:
    <div class="content_top"><!-- content -->
                  <div class="content_bottom">
                                	
    TXT
    
    </div>
    </div>


    И CSS к нему...

    Код:
    .content_top {
    	background: url(../images/top-bg.png) no-repeat 1px -21px;
    	padding-top: 30px;
    }
    .content_bottom {
    	background: url(../images/bg-bottom.jpg) no-repeat 6px bottom;
    	padding-bottom: 1px;
    	min-height:270px;
      height:auto !important;
      height:270px;
    }
    Сверху и снизу изображения top и bottom, по середине молоко тянется. Прописать только пути к изображениям и настроить под себя величины.
     
    VeNorm нравится это.
  7. VeNorm

    VeNorm Постоялец

    Регистр.:
    22 дек 2008
    Сообщения:
    91
    Симпатии:
    3
    Спасибо, это я понял... Нужно просто чтобы это "молоко" тоже картинкой задавалось:confused:
     
  8. aVitaliy

    aVitaliy Писатель

    Регистр.:
    4 май 2009
    Сообщения:
    4
    Симпатии:
    0
    Очень интересно.
     
  9. EviLive

    EviLive Создатель

    Регистр.:
    10 янв 2011
    Сообщения:
    18
    Симпатии:
    6
    Вместо <!-- content --> вставте еще один <div class="ваш_класс">

    и в CSS добавте
    .название_вашего_класса {
    background: url(../images/moloko.jpg) <!--тут значения repeat(повторы) и т.д -->;
    }

    инфу по repeat и позиционированию найдете тут, там есть все что нужно:
    http://htmlbook.ru/css/background-repeat

    удачи Вам!;)
     
    VeNorm нравится это.
  10. VeNorm

    VeNorm Постоялец

    Регистр.:
    22 дек 2008
    Сообщения:
    91
    Симпатии:
    3
    Опять же див молока между топом и боттомом. Нужно чтобы текст начинался от блока топа и при растяжке блока начиналась картинка резинки, и заканчивался текст на картинке боттома.:)