Картинка в UL списке

[kak2z]

В общем с css я пока не дружу)) пытаюсь сделать вот что:

Код Выделить Развернуть


<ul class="instructions">
       <li class="instruction">Текст 1<img class="photo" src="КАРТИНКА1" /></li>
       <li class="instruction">Текст 2 <img  class="photo result-photo" src="КАРТИНКА1" /> </li>
</ul>



надо что бы в случае большого количества текста картинка не была на одной строке с текстом.. а картинка была отдельно слева или справа.. а текст писался в несколько строк на уровне картинки..
Спасибо))

[Фисташка]

Подружитесь с CSS

http://www.stylizerapp.com/

[kak2z]

stylizerapp.com

знаете но не скажете.. или не знаете но хотите что бы я узнал?

[GeorG]

А что в классах - instruction, photo и result-photo?
Может вам тоже сгодится мод обтекания текстом? - http://custom.simplemachines.org/mods/index.php?mod=2305

Ну или юзать style="float: left" и style="float: right".

[kak2z]

А что в классах - instruction, photo и result-photo?
Может вам тоже сгодится мод обтекания текстом? - http://custom.simplemachines.org/mods/index.php?mod=2305

Ну или юзать style="float: left" и style="float: right".

по умолчанию в класах ничего.... это классы необходимые для видимости рецепта поисковой системой..
я назначаю

Код Выделить Развернуть


instruction li {
float: left
}

.instruction li img{
float: right
}

ничего не получается...

назначаю по отдельности

Код Выделить Развернуть


instruction li {
float: left
}

photo {
float: right
}


тоже нет желаемого результата, картинка все время становиться в последнюю строчку текста..  пытался включать align для картинки...  вчера пол дня на это угробил.. никаких результатов... в таблицу впихнуть все это нельзя... код становиться невалидным... помогайте!!))) кто чем может)!!

[GeorG]

Как-то так, но в списке делать картинку, это та ещё задачка... Нужно следить за размером изображения, и объёмом текста.

Код Выделить Развернуть

<ul style="float: left;" class="instructions">
<li class="instruction"><div style="float: left; margin: 0.5ex;"><img class="photo" alt="" src="КАРТИНКА1"> </div>Текст 1</li>
<li class="instruction"><div style="float: right; margin: 0.5ex;"><img class="photo result-photo" alt="" src="КАРТИНКА1"> </div>Текст 2</li>
</ul>

З.ы. Стили можно в классы запихать...

[kak2z]

вот так получается хоть убей.. .

а хочется так



П.С. тут фотки не открываются в новом окне при увеличении)) если надо будет глянуть фотку в полный размер то правой клавишей и открыть в новом окне))

[GeorG]

А высоту не пробовали добавить... Например так - style="height:150px".
Зачем тогда это через список делать, и почему таблицей не получается? Можно и на дивах:

Код Выделить Развернуть


<div style="height:160px"><div style="float: right; margin: 0.5ex; width: 160px"><img width="150" height="150" src="картинка"></div><p>Тут текст описания</p></div>
<div style="height:160px"><div style="float: right; margin: 0.5ex; width: 160px"><img width="150" height="150" src="картинка"></div><p>Тут текст описания</p></div>
<div style="height:160px"><div style="float: right; margin: 0.5ex; width: 160px"><img width="150" height="150" src="картинка"></div><p>Тут текст описания</p></div>

[kak2z]

ну я пока вот так решил проблему

Код Выделить Развернуть


.instructions {
    display: table;
}
.instruction {
    display: table-row;
}

.instruction  span{
    display: table-cell;
    vertical-align: middle;
}

.photo {
    display: table-cell;
    vertical-align: middle;
}


нет кроссбраузерности.. но на старых ишаков думаю можно и забить..

[digger®]

ну я пока вот так решил проблему

Код Выделить Развернуть


.instructions {
    display: table;
}
.instruction {
    display: table-row;
}

.instruction  span{
    display: table-cell;
    vertical-align: middle;
}

.photo {
    display: table-cell;
    vertical-align: middle;
}


нет кроссбраузерности.. но на старых ишаков думаю можно и забить..

Почему просто таблицей не сделать вместо этих извращений?

[kak2z]

Почему просто таблицей не сделать вместо этих извращений?

потому что цель всего этого что я делал была поддержка микроформатов рецептов..
если бы не эти микроформаты я бы давно уже в таблицу бы зафигачил (я их люблю таблицы)))

П.С. А так как я решил проблему это не правильно?

[maestrosite.ru]

высота строки рецепта (<li>) и высота+ширина фото - если величины:
- фиксированные, то абсолютное позиционирование
- неизвестные, то всплытие с overflow:hidden,