текст и картинка

[Iton]

имееться строка текста, например "Большая длинная строка текста1" . по умолчанию на экране браузера она в одну строку, если пользователь изменил рамеры окна, то строка автоматом разбиваеться на две, наприменр стало

Большая длинная

строка текста1

теперь предположим что справа от этого текста есть картинка.

Большая длинная строка текста1 КАРТИНКА

Задача:

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

было:

Большая длинная строка текста1 КАРТИНКА

пользователь сузил окно и стало

Большая длинная КАРТИНКА

строка текста1

но у меня никак так не получается сделать

[Shilgya]

что-то не понять, какая проблема. Картинке задать float: right;, а на оставшемся месте пусть текст располагается, как получится.

Может стоит показать пример, где это вс? можно увидеть?

[shkoda]

попробуй поместить картинку и текст в два разных div' а , и варьировать их параметры. Для того чтобы они были рядышком используй display:table-cell; или с помощью float играйся. У меня получилось

[Iton]

к сожелению прмер показать не могу все локально делаю)

дам скрин:http://iton.ho.com.ua/1.jpg

вот как сейчас реализовано

Секреты инвестирования в недвижимость

на первом рисунке (*верхний) видно как все выглядит, если окно раскрыто на всю ширину

на левом нижнем - видно что будет, если уменьшать ширину окна

на правом нижнем - что будет , если продолжать уменьшать ширину окна. надпись автоматически разбиваетс яна строки

вот я и хочу совместить 2-й и 3-й рисунки по принципу:

если баннер не влзаит в окно, то надпись разбивается на строки, что бы баннер влазил

[kiD]

Для того чтобы они были рядышком используй display:table-cell; или с помощью float играйся. У меня получилось

умничка!

position:absolute;left:160px;top:0px

развратник

автор, вам уже сказали как сделать два слоя "рядышком")

[Iton]

сдела вот так, но вышло что теперь сначала они стоят как надо (один за другим), но когда начинаеш уменьщать размер окна, то картинка сползает под текст,а когда еще уменьшить то уже тогда и текст начинает уменьшаться. а надо что бы одновременно

Секреты инвестирования в недвижимость

[podlom]

Iton, а если так:

<div id="Layer0" style="display:table;position:absolute;top:0;left:155px">
<div id="Layer1" style="display:table-cell;vertical-align:top"><h1 style="font:bold 13px Tahoma;display:inline;padding:5px;margin:0px;color:#900;font-style:italic;float:left">Секреты инвестирования
в недвижимость</h1></div>
<div id="Layer2" style="display:table-cell"><a href="http://tv1.com.ua/programs/nerukhomist.html" target="_blank"><img src="/img/ipbr.jpg" alt="Перший діловий телевізійний канал"></a></div>
</div>

[Iton]

спасибо, о великий гуру podlom

ты никогда не отказываеш страждущим

[podlom]

Iton,

совместными усилиями получим хороший результат!

[kiD]

в ИЕ не будет работать

[podlom]

а можно как-то для IE сделать, чтобы там тоже работало?

[podlom]

вышел из положения абсолютным позиционированием 2-х тегов div

<div style="position:absolute;top:0;left:147px;vertical-align:top"><h1 style="font:bold 13px Tahoma;display:inline;padding:5px;margin:0px;color:#900;font-style:italic;float:left">Секреты инвестирования
в недвижимость</h1></div>

<div style="position:absolute;top:1;left:335px"><a href="http://tv1.com.ua/programs/nerukhomist.html" target="_blank"><img src="/img/ipbr.jpg" alt="Перший діловий телевізійний канал"></a></div>