Как опустить h3 блок ниже <img>?

Тема в разделе "Веб-дизайн", создана пользователем toxass, 13 ноя 2010.

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

    toxass Постоялец

    Регистр.:
    24 июл 2007
    Сообщения:
    114
    Симпатии:
    15
    Нужно опустить заголовок (через css) как показано на картинке, т.е. он должен располагаться возле картинки, а не над ней.

    Имею такую структуру:

    Код:
          <div id="стиль1">
            <div class="стиль2">        <h3><a href="#">Название</a></h3>
            <br /><img src="пусть к картинке" width="141" height="200" /> Текст<br />
              <span style="color:#71C12D">просмотров: 22332</span> </div>
            <div style="clear:both"></div>
          </div>
    И стиль для него:

    Код:
    h3 {
    	margin:0px;
    	float:right
    }
    h3 a {
    	font-weight:bold;
    	color:#858585;
    	font-size:14px;
    	text-decoration:underline
    }
    h3 a:hover {
    	color:#71C12D
    }
    
    #стиль1 {
    	background:url(../images/content-bg.png) repeat-x;
    	width:362px;
    	height:253px;
    	border:1px solid #EBEBEB;
    	padding:10px;
    	float: left;
    	margin: 0px 5px 5px 0px;
    }
    #стиль1 img {
    	float: left;
    	margin-right: 10px
    }
    .стиль2 {
    	font-size:11px
    }
    P.S.: опустить, поменяв местами заголовок и картинку нельзя, так как сайт уже существует.
     

    Вложения:

  2. bork75

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

    Регистр.:
    21 июн 2008
    Сообщения:
    1.449
    Симпатии:
    716
    Только через внутреннее позиционирование, если ширина картинка примерно одинаковая всегда, то проблем не будет.

    Код:
    
          <div id="стиль1"   [B]style="position:relative;"[/B]>
            <div class="стиль2">        <h3 [B]style="position:absolute; top: 25px; left:167px;"[/B]><a href="#">Название</a></h3>
            <br /><img src="пусть к картинке" width="141" height="200" /> Текст<br />
              <span style="color:#71C12D">просмотров: 22332</span> </div>
            <div style="clear:both"></div>
          </div>
    
     
  3. DenisK

    DenisK

    Регистр.:
    8 фев 2007
    Сообщения:
    205
    Симпатии:
    13
    Ну и что, что существует
    У вас нет доступа к исходникам?
     
  4. zzzkabanzzz

    zzzkabanzzz Создатель

    Регистр.:
    15 июн 2011
    Сообщения:
    56
    Симпатии:
    4
    В любом случае придеться изменять исходники! И какая разница работает сайт или нет?