?

Log in

No account? Create an account
Main

CSS

Вот ведь дивен CSS. Ковырял минут 15:

Есть плавающий влево img, вслед за ним идет обычный буллетлист ul.

Независимо от margin у плавающей картинки буллеты упираются в край изображения.

При этом у параграфов отступ совершенно корректный.

И почему-то это лечится вот так:
ul {
overflow: auto;
}

Между тем данный параметр регулирует наличие полос прокрутки в блоках....
Tags:

Comments

Все правильно. Нужно было указать vspace и не учитывать margin.
А вот как overflow: auto отработает... тут нужно смотреть от вашей верстки.
Опс. Видимо, я слету не понял задачу. Список должен идти поверх изображения? В какой край упираются буллеты?
это уж hspace тогда...

а что моя верстка, случай совершенно простейший:

<img src='/data/school_ball/th2.jpg' style='float: left;margin: 3px 15px 15px 0;'>

<p>Этот текст будет с нормальным отступом</p>
<ul>
<li>а вот этот прилипнет буллетом к картинке</li>
</ul>
http://www.w3.org/TR/CSS21/images/float2p.png
http://www.w3.org/TR/CSS21/visuren.html#bfc-next-to-float
И у «p» и у «li» одинаковая модель блоков. В этом легко убедиться если задить им границы. Проблема в том, что буллет у списка позиционируется относительно блока, а не текста в нём.

В зависимости от содержания списка, иногда достаточно list-style-position: inside.

А overflow отличный от visible задаёт новый контекст http://www.w3.org/TR/CSS21/visuren.html#block-formatting
большое спасибо за комментарий. хорошо, когда в систему все укладывается все-таки.