Задачка на тему верстки (CSS)

123 4
Ткач
На сайте с 29.04.2007
Offline
95
#11

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

Разработка и создание сайтов. Красиво, функционально, недорого. (http://time-online.ru/) ICQ 388-474-890)
psylosss
На сайте с 23.12.2005
Offline
126
#12

Ткач, покажите код пожалуйста. Не понимаю вашего предложения. Если это <div><div>врезка</div><div>статья</div></div>, то это неверное решение. Подтверждайте репутацию ;)

Веб-разработка. Сложные проекты. Проектирование. Проект-менеджмент. Стартапы.
Ткач
На сайте с 29.04.2007
Offline
95
#13

psylosss, сделайте проще. задайте флоат только для картинки, а не выравнивание.


<div style="width:500px;">


<div id="vrezka" style="float:right;width:200px;padding:10px;background:#FF9999;">
Вакансии
<br>
Разработчики<br>
* J2ME приложения<br>
* Яндекс.Почта<br>
* Windows Mobile приложения
<br>
</div>
<div>
<img src="http://www.picamatic.com/show/2008/07/04/09/556746_101x80.gif" style="float: left; margin-right: 5px;">
Яндекс — крупнейший российский портал.
</div>
<h3>Подзаголовок</h3>
Яндекс — крупнейший российский портал, предлагающий пользователям ключевые веб-сервисы. Ежедневная аудитория Яндекса — восемь миллионов человек. В компании «Яндекс» работает более тысячи сотрудников в шести российских и украинских офисах.
</div>
psylosss
На сайте с 23.12.2005
Offline
126
#14

Ткач, приведенный код не соответствует условию задачи. Подзаголовок продолжает обтекать картинку, а он должен начинаться под картинкой. Но не под врезкой.

Ткач
На сайте с 29.04.2007
Offline
95
#15
psylosss:
Ткач, приведенный код не соответствует условию задачи. Подзаголовок продолжает обтекать картинку, а он должен начинаться под картинкой. Но не под врезкой.

тогда


<div style="width:500px;">


<div id="vrezka" style="float:right;width:200px;padding:10px;background:#FF9999;">
Вакансии
<br>
Разработчики<br>
* J2ME приложения<br>
* Яндекс.Почта<br>
* Windows Mobile приложения
<br>
</div>
<div>
<img src="http://www.picamatic.com/show/2008/07/04/09/556746_101x80.gif" style="float: left; margin-right: 5px;">
Яндекс — крупнейший российский портал.
<div style="clear: left;"></div>
</div>
<h3>Подзаголовок</h3>
Яндекс — крупнейший российский портал, предлагающий пользователям ключевые веб-сервисы. Ежедневная аудитория Яндекса — восемь миллионов человек. В компании «Яндекс» работает более тысячи сотрудников в шести российских и украинских офисах.
</div>

или я не понимаю каким должен быть дизайн

Ткач добавил 05.07.2008 в 14:15

<div style="clear: left;"></div>

вот так под картинкой

psylosss
На сайте с 23.12.2005
Offline
126
#16

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

Еще раз (важно!):

1. статья - это произвольный текст с картинками, выровненными по правому или левому краю (или вообще не выровненными), а также с заголовками. Заголовки не должны обтекать картинки. Мы не можем заранее знать сколько будет картинок, где они будут и как они будут выравниваться. Сама статья, включая заголовки, должны обтекать врезку, плавающую float:right.

2. статья должна обтекать врезку.

Ткач
На сайте с 29.04.2007
Offline
95
#17

попробуйте последний вариант предложенный. всё соответствует условию

psylosss
На сайте с 23.12.2005
Offline
126
#18
попробуйте последний вариант предложенный. всё соответствует условию

Не соответствует: если картинок в одном абзаце несколько и они выровнены как по левому, так и по правому краю?

Ткач:
или я не понимаю каким должен быть дизайн

см. п.1

Сейчас смастерю более наглядный пример.

Ткач
На сайте с 29.04.2007
Offline
95
#19

psylosss, что там не так?

там где вставляется картинка, она с текстом будет идти в отдльном блоке, врезка одна или их тоже много будет?

картинка может выравниваться как по правому так и полевому краю, не понятно в чем проблема остается

psylosss
На сайте с 23.12.2005
Offline
126
#20
Ткач:
psylosss, что там не так?
там где вставляется картинка, она с текстом будет идти в отдльном блоке, врезка одна или их тоже много будет?
картинка может выравниваться как по правому так и полевому краю, не понятно в чем проблема остается

Вот контрпример. Ошибка: заголовок обтекает вторую картинку, выровненную по правому краю, а не должен.

123 4

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