Xpoint
   [напомнить пароль]

При обтекании картинки сдвигаются буллеты

Метки: [без меток]
2007-03-01 15:11:53 [обр] Андрей Дроздов(6/49)[досье]

Нужно чтобы текст обтекал картинку справа. С обычным текстом проблем нет, а если в тексте присутствует список, буллету почему-то сдвигаются и налезают на картинку. Вот код:

<p><img src="img.jpg" style="float:left; margin-right:7px" width="240" height="200">bla-bla-bla</p>
<ul>
<li>bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla
bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla-bla bla-bla-bla-bla</li>
<li>bla-bla-bla-bla-bla-bla-bla-bla-bla</li>
</ul>

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

спустя 9 часов [обр] baltazar(0/3)[досье]
может несовсем то, но вариант: <ul style="list-style-position:inside">
спустя 10 часов [обр] Андрей Дроздов(6/49)[досье]
baltazar[досье] - это не совсем то. Пока я просто увеличил margin-right, но это и обычный текст отодвигает.
спустя 3 часа 26 минут [обр] Игорь "tigerman" Бекренёв[досье]
Андрей Дроздов[досье], может Вам поможет вот это?
<style type="text/css">
li {
    list-style-position: outside; margin-left: 20px;
}
</style>
спустя 4 минуты [обр] Игорь "tigerman" Бекренёв[досье]
Хотя тут просто можно обойтись margin-left применяя его к тэгу LI.
спустя 2 дня 10 часов [обр] Андрей Дроздов(6/49)[досье]
Игорь "tigerman" Бекренёв[досье]
Вы пробовали загрузить приведенный код в ослика и посмотреть, что получится? Никакие стилевые атрибуты не оказывают влияние на тег LI, когда текст находится левее картинки, но зато влияют на положение текста, когда справа нет изображения, а мне нужно с точностью до наоборот. При резиновом дизайне я не знаю как будет располагаться список относительно обтекаемого изображения при разной ширине окна.
спустя 8 часов [обр] Игорь "tigerman" Бекренёв[досье]
Андрей Дроздов[досье] Извините, забыл дописать, что для корректного отображение в IE6 нужно прописать width: 100% для тэга UL :)
спустя 5 часов [обр] baltazar(0/3)[досье]
заинтерисовало.. ul{width:100%}li{margin-left:20px} /в IE6 и FF(1.5) нормалёк, а в опере не пойдёт.
спустя 21 минуту [обр] Игорь "tigerman" Бекренёв[досье]
да.. действительно с Opera 8.5/9.1 пока спраиться не могу :(
спустя 7 часов [обр] Marat Tanalin(6/78)[досье]
Браузер ведёт себя правильно.
спустя 14 часов [обр] Игорь "tigerman" Бекренёв[досье]
Marat Tanalin[досье], какой именно из браузеров ведет себя правильно? И в чем выражается эта правильность? Где описана правильность поведения браузера?
спустя 2 дня 2 часа [обр] baltazar(0/3)[досье]
Получилось, если при фиксированном размере картинки в 200px
поместить ul в div с margin-left:190px , и это снова не универсальное решение.
спустя 1 час 58 минут [обр] Игорь "tigerman" Бекренёв[досье]
сообщение промодерировано

baltazar[досье]. Если

поместить ul в div с margin-left:190px,

то мы не получим нужный нам эффект, так как список не будет обтекать картинку, а просто будет находиться на фиксированном расстоянии от нее. Что наглядно можно увидеть, добавив много обычного текста в начало или же сильно увеличить шрифт в ФФ.

спустя 1 час 19 минут [обр] baltazar(0/3)[досье]
Игорь "tigerman" Бекренёв[досье], это да, надо думать.
спустя 22 часа [обр] Marat Tanalin(6/78)[досье]

Игорь "tigerman" Бекренёв[досье]
какой именно из браузеров ведет себя правильно? И в чем выражается эта правильность? Где описана правильность поведения браузера?

The most interesting characteristic of a float (or "floated" or "floating" box) is that content may flow along its side (or be prohibited from doing so by the 'clear' property).
(http://www.w3.org/TR/CSS21/visuren.html#floats)

float-блок обтекается собственно контентом (текст, картинки и проч.), а не блоком, его содержащим (если только у последнего не задана в явном виде ширина), в то время как маркеры при list-style-position: outside, принятом по умолчанию, генерируются за пределами области контента.

спустя 6 часов [обр] Игорь "tigerman" Бекренёв[досье]

Marat Tanalin[досье] :) Как и предполагал. Ссылка в ман, как документ, содержащий в себе стандарты, описывающие правильность поведения браузеров. Вот что остается для меня загадкой, так почему до сих пор ни один браузер этот стандарт полностью не поддерживает.
P.S. Спасибо Вам за потраченное время и усилия на нахождение ответа на мои скороспешные вопросы. Впредь буду аккуратнее задавая вопросы.

Андрей Дроздов[досье], Вам остается либо использовать list-style-position: inside (правильное и кроссбраузерное решение, хоть и не такое, как Вам хотелось бы), либо использовать приёмы описанные выше (решение хоть и не кроссбраузерное, а действующее только в IE 6 и FF, но более подходит для Вашей задачи).

спустя 3 дня [обр] Андрей Дроздов(6/49)[досье]
Как я понял, данная проблема решения не имеет. Всем спасибо за предложенные варианты, тему можно закрыть.
спустя 4 года 4 месяца [обр] kashlakov[досье]
сообщение промодерировано

Я решил сей вопрос - можете посмотреть на сайте http://kashlakov.com.ua/yalta/otdyx-v-yalte/
Для сравнения вот другая страничка со списком http://kashlakov.com.ua/yalta/dlya-chego-sushhestvuet-arenda-zhilya/ (чтобы вы не подумали, что я сделал маргин=320рх и всё!

Решение:
.entry ul {
   float: left;
}

.entry ul li{
   margin: 0 0 0 20px;

}

Одна поправка: следующий за списком текст полезет справа от списка - просто добавьте сколько у вас пунктов в списке столько раз и <p>&nbsp;</p> и будет вам счастье!

Powered by POEM™ Engine Copyright © 2002-2005