Помогите с блочной вёрсткой

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

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

    buxtorus Постоялец

    Регистр.:
    14 апр 2009
    Сообщения:
    84
    Симпатии:
    34
    Привет. Верстаю блоками первый раз и столкнулся с проблемой. Может вы подскажете?
    Как сделать так, чтобы текст не вылезал за пределы блока, а автоматически переносился на следующую строку?
    Код Html
    HTML:
    <div id="lsidebar">
                    <div class="sticker">  
                      <div class="sb_top"></div>
                        <div class="sb_middle">
                          jghjghjghjghjghjghjghjghjhgjghjghjhgjghjhgj
                          ghjghjghj
                          ghjghjgh
                          jghjgh
                          jghjhgjhjghjghjghj
                          ghjhgjhjghj
                        </div>
                        <div class="sb_bottom"></div>  
                    </div></div> 
    код css
    HTML:
    .sb_top {background-image:url(sb_top.png); background-repeat:no-repeat; background-position:top; padding-left:10px; padding-right:10px; height:80px; }
    .sb_middle {background-image:url(sb_middle.png); background-repeat:repeat-y; padding-left:10px; padding-right:10px; width:179px;}
    .sb_bottom {background-image:url(sb_bottom.png); background-repeat:no-repeat; background-position:bottom; height:60px;}
    #lsidebar { float:left; width:179px; background-image:url(07.png); background-repeat:no-repeat; background-position:top left;} 
    Скрин:
     

    Вложения:

    • s1.png
      s1.png
      Размер файла:
      19,2 КБ
      Просмотров:
      5
  2. cheg2

    cheg2

    Регистр.:
    9 авг 2008
    Сообщения:
    176
    Симпатии:
    24
    Так сделай пробелы в этой длинной строчке - текст и перенесется :D
     
    buxtorus нравится это.
  3. ksido

    ksido Создатель

    Регистр.:
    8 авг 2007
    Сообщения:
    28
    Симпатии:
    5
    Как вариант, можешь поставить
    owerflow: auto;

    Тогда при появлении длинных строк будет появляться полоса прокрутки

    Добавлено через 1 минуту
    Так же поиграйся с
    white-space:
    и
    word-wrap:
     
    buxtorus нравится это.
  4. buxtorus

    buxtorus Постоялец

    Регистр.:
    14 апр 2009
    Сообщения:
    84
    Симпатии:
    34
    Помогло, спасибо!
    Полосу прокрутки никак нельзя. Это ведь меню будет.
     
  5. buxtorus

    buxtorus Постоялец

    Регистр.:
    14 апр 2009
    Сообщения:
    84
    Симпатии:
    34
    Ещё одна проблема

    Возникла ещё одна проблема. Контент должен быть в рамке как на картинке.

    Рамка состоит из девяти блоков:

    Левый верхний угол (высота 20, ширина 23)
    сама верхняя рамка (высота 20, ширина не ограничена)
    правый верхний угол (высота 20, ширина 23)
    левая рамка (ширина 23, по высоте должна тянуться, но не тянется, в этом и проблема)
    блок с контентом (находится в самом центре, размеры не заданы)
    Правая рамка (ширина 23, по высоте должна тянуться, но не тянется, в этом и проблема)
    нижний левый угол (высота 20, ширина 23)
    нижняя рамка (высота 20, ширина не ограничена)
    нижний правый угол (высота 20, ширина 23)

    Вот код с комментариями к каждому диву:
    HTML:
    
    <div class="t_l2"></div> <!--верхний левый угол -->
    <div class="t_r2"></div> <!--верхний правый угол -->
    <div class="t_m2"></div> <!--верхняя рамка -->
                            
    <div class="l_m"></div> <!--левая рамка -->
    <div class="r_m"></div> <!--правая рамка -->
    <div class="textblock">g hgh fg fgh fgh fgf hfghfgfgfg h fgh gg hfg hgf hfg h fgh gf h gfh g fh gf hfg h fgh gf hfg h gfh g hgf h gf h gfh g gfh fg hg f gfh gf hfg hg fh fgh gfh gf hgf hf hgf h fgh fg h fg hgf h gghfghfghgf h gfh fg h gfh gf hg fh gf hgf h gf hg fh g hfg h gf h gf h f g h fg h fg h fg h fghg fh f h fg h g fgh f g h f g h f g h gfhggh g hghg gh gh gh g ghhg gh ghh gh g hg fgh fghfghfh gf h fgh gf h fg hgf h gf h gf h fg hgfhfghfhfg hgf hf gh fg h fg hgfhg hfhfg h ggf h gffg h fghgh</div> <!--блок с контентом -->
                            
    <div class="b_l2"></div> <!--нижний левый уголок/ -->
    <div class="b_r2"></div> <!--нижний правый уголок -->
    <div class="b_m2"></div> <!--нижняя рамка --> 
    Css:
    HTML:
    
    .l_m {background-image:url(l_m.png); background-repeat:repeat-y; float:left; width:23px;}
    .r_m {background-image:url(r_m.png); background-repeat:repeat-y; float:right; width:23px;}
    .t_r2 {background-image:url(t_r2.png); background-repeat:no-repeat; height:20px; width:23px; float:right;}
    .t_l2 {background-image:url(t_l2.png); background-repeat:no-repeat; height:20px; width:23px; float:left;}
    .t_m2 {background-image:url(t_m2.png); background-repeat:repeat-x; height:20px; padding-left:23px;}
    .b_l2 {background-image:url(b_l2.png); background-repeat:no-repeat; height: 20px; width:23px; float:left;}
    .b_r2 {background-image:url(b_r2.png); background-repeat:no-repeat; height: 20px; width:23px; float:right;}
    .b_m2 {background-image:url(b_m2.png); background-repeat:repeat-x; height: 20px; }
    .textblock {padding-left:23px;}
    
    И теперь суть вопроса. Как сделать так, чтобы левая и правая рамки тянулись по высоте на столько, сколько контента в среднем блоке.

    Очень прошу, помогите:bc:
     

    Вложения:

    • 12.png
      12.png
      Размер файла:
      4,2 КБ
      Просмотров:
      17
  6. lifediz

    lifediz Yii Framework developer

    Регистр.:
    7 июн 2008
    Сообщения:
    385
    Симпатии:
    507
    или вместо авто 100%...
     
    buxtorus нравится это.
  7. buxtorus

    buxtorus Постоялец

    Регистр.:
    14 апр 2009
    Сообщения:
    84
    Симпатии:
    34
    Не помогает, к сожалению. Блок так и остаётся высотой в бэкграундовое изображение:confused:
     
  8. mydooms

    mydooms Постоялец

    Регистр.:
    22 фев 2008
    Сообщения:
    105
    Симпатии:
    26
    готовый рабочий пример:
    http://www.456bereastreet.com/lab/flexible_custom_corners_borders/
    PS: давал уже его в соседней теме: http://www.nulled.ws/showthread.php?t=133594
     
    buxtorus нравится это.
  9. Котяра

    Котяра Писатель

    Регистр.:
    24 авг 2007
    Сообщения:
    8
    Симпатии:
    0
  10. капрал

    капрал

    Регистр.:
    2 окт 2008
    Сообщения:
    336
    Симпатии:
    45
    та ну ты прогоняешь реально. если не надо что б тянулся по ширине то примерно так:

    HTML:
    
    div {width:100px; height:auto; background:url('block-bg.png') 0 0 repeat-y; position:relative}
    div i, div b {display:block; width:100px; height:10px; position:absolute; left:0;}
    div i {top:0; background:url('block-top.png') 0 0 no-repeat;}
    div b {bottom:0; background:url('block-bottom.png') 0 0 no-repeat;}
    
    
    <div>
    текст
    <i></i><b></b>
    </div>
    
     
Статус темы:
Закрыта.