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

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.: опустить, поменяв местами заголовок и картинку нельзя, так как сайт уже существует.
 

Вложения

  • help-verstka.jpg
    help-verstka.jpg
    27,3 KB · Просмотры: 15
Только через внутреннее позиционирование, если ширина картинка примерно одинаковая всегда, то проблем не будет.

Код:
      <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
В любом случае придеться изменять исходники! И какая разница работает сайт или нет?
 
Назад
Сверху