Форум Сайтостроение Веб-строительство

Как сверстать что бы картинка была выше того момента, где она в находится коде?

12
-YuRoK-
На сайте с 20.05.2006
Offline
94
-YuRoK-
1151

Приветствую всех форумчан. Столкнулся с такой проблемой, надо сверстать шаблон короткой новости под ДЛЕ. Но на сайте, для которого я делаю дизайн уже полно новостей с картинками, мне надо сделать редизайн. Дело в том, что в ДЛЕ шаблон краткой новости строится так: {заголовок}, {дата}, {текст} и картинки в новостях находятся в блоке {текст}, мне нужно стилями или еще как сделать так, что бы они были выше {заголовка} в браузере. Сделал картинки, что бы было нагляднее:

Как сейчас:

Как надо:

И код, который имею на данный момент: 

<p><span class="newstitle"><a href="#">Заголовок</a></span><br>

                    <span class="date">Дата</span><br>

                    <span class="txt"><img src="images/image.jpg" style="float:left; margin-right:10px;">Текст новости<br>

                    <a href="#">&gt; Подробнее</a></span></p>

Заранее спасибо за помощь.:)

[Удален]
#1

Прямой ответ на вопрос в сабже: display:block :)

Хотел предложить флоат, а уже используете и видимо не дало результатов

А картинку в заголовок никак не запихнуть?

-YuRoK-
На сайте с 20.05.2006
Offline
94
-YuRoK-
#2
display:block

Это к картинке? Без изменений. :(

А картинку в заголовок никак не запихнуть?

К сожалению, никак.

Может как-то на дивах можно? Только я не умею((

[Удален]
#3
-YuRoK-:
Это к картинке? Без изменений. :(

Имел ввиду абсолютное позиционирование position:absolute;top:...px;left:...px. Просто оно для дива без display:block не работает.

-YuRoK-
На сайте с 20.05.2006
Offline
94
-YuRoK-
#4

Что-то все рано безрезультатно. Просто текст уходит под картинку. Я правильно понял, что нужно делать? 

<div><span class="newstitle"><a href="#">Mercedes C-класса 4Matic</a></span><br>

                    <span class="date">26 ноября 2007</span><br>

                    <span class="txt"><img src="images/image.jpg" style="float:left; display:block; position:absolute; top: 10px; margin-right:10px;">Mercedes на автомобилях с полным приводом всеми силами пытается сберечь породу и во что бы то ни стало сохранить заднеприводные «повадки» своих автомобилей.<br>

                    <a href="#">&gt; Подробнее</a></span></div>
Prior
На сайте с 03.03.2008
Offline
194
Prior
#5

Тут рабочий пример.

Ответы на вопрос - https://answers.net.pl
-YuRoK-
На сайте с 20.05.2006
Offline
94
-YuRoK-
#6

Там картинка в коде стоит перед заголовком, а мне надо что бы она была в блоке с текстом новости, а в браузере - как вы показали.

Prior
На сайте с 03.03.2008
Offline
194
Prior
#7

Пардон, не правильно понял. В таком случае пробуйте что-то в этом духе: 

  <div class="newstitle" style="position:relative;left:110px;top:40px;width:100px"><a href="#">Заголовок</a></div>

  <div class="date" style="position:relative;left:110px;top:40px;width:100px">Дата</div>

  <div class="txt">

    <img src="image.png" style="float:left; margin-right:10px;">

    <div style="padding-top:50px">

    Текст новости<br>

    <a href="#">&gt; Подробнее</a>

    </div>

  </div>
-YuRoK-
На сайте с 20.05.2006
Offline
94
-YuRoK-
#8

Вот так получилось, спасибо. Только нельзя ли как-нибудь убрать то расстояние, которое сверху образуется на месте заголовка и даты?

Prior
На сайте с 03.03.2008
Offline
194
Prior
#9
-YuRoK-:
Вот так получилось, спасибо. Только нельзя ли как-нибудь убрать то расстояние, которое сверху образуется на месте заголовка и даты?

попробуйте блокам заголовка и даты установить height:1px (на счет кроссбраузерности только проблемы могут быть)

-YuRoK-
На сайте с 20.05.2006
Offline
94
-YuRoK-
#10

Ок, попробую. В разный браузерах проверял - вроде все ок. И еще кое-что заметил, если заголовок очень длинный, то он сдвигается не вниз, а вверх почему-то. Может как-то можно избавиться от этого?

Яндекс кобласит Адсенс Сербия Запрет индексации части страницы?
12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий