За последние 24 часа нас посетили 16560 программистов и 1553 робота. Сейчас ищут 2122 программиста ...

2 DIVa рядом.

Тема в разделе "HTML и CSS", создана пользователем zlatman, 2 окт 2010.

  1. zlatman

    zlatman Активный пользователь

    С нами с:
    22 дек 2009
    Сообщения:
    11
    Симпатии:
    0
    Есть 2 дива:
    HTML:
    1.                                    
    2.  
    3. <div id="img_post"> </div>
    4. <div id="text_post"><p>Текст Текст Текст Текст Текст Текст Текст </p></div>
    5.  
    [css]#img_post {
    position:relative;
    background:url(img/walik.jpg) no-repeat center;
    width:90px;
    height:84px;
    float:left;

    }

    #text_post {
    position:relative;
    width:160px;
    }
    [/css]

    В первом диве фоновая картинка высотой в 84px, во втором текст. Текст не должен заходить на див с фоновой картинкой. В IE все нормально, а вот в Опере текст обтекает картинку
     
  2. Gromo

    Gromo Активный пользователь

    С нами с:
    24 май 2010
    Сообщения:
    2.786
    Симпатии:
    2
    Адрес:
    Ташкент
    во-первых - где изображение, где мы можем это увидеть?!

    во-вторых - способов решения данной проблемы - море! и ещё чуть-чуть.

    самый простой - сделать в виде фоновой картинки и использовать padding.

    а если для первого дива воспользоваться float:left, то для div с текстом - margin-left: ширина левого дива.

    ещё можно... и ещё... и ещё...
     
  3. greenzlat

    greenzlat Активный пользователь

    С нами с:
    27 апр 2008
    Сообщения:
    255
    Симпатии:
    0
    Спасибо. Сделал margin-left все заработало). Почему в IE не отображает нижний бордер? Вот код
    [css]#gg {
    position:relative;
    border-bottom:2px dashed #b2c8df;
    }[/css]

    HTML:
    1.  <div class="textpost">
    2.                                 <div id="title"><h3>Заголовок</h3></div>
    3.                                 <div class="date">02-08-2010 </div>
    4.                                    
    5.                                   <div id="gg">
    6.                                     <div id="img_post"> </div>
    7.                                     <div id="text_post"><p>Текст текст</p></div>
    8.                                   </div>  
    9.                                    
    10.                             </div>
     
  4. Gromo

    Gromo Активный пользователь

    С нами с:
    24 май 2010
    Сообщения:
    2.786
    Симпатии:
    2
    Адрес:
    Ташкент
    и снова здрасти.

    во-первых - где изображение, где мы можем это увидеть?!

    во-вторых...
     
  5. Mikola-BLR

    Mikola-BLR Активный пользователь

    С нами с:
    11 окт 2010
    Сообщения:
    1
    Симпатии:
    0
    height или width для gg задайте.