Отступ элементов списка (LI) при обтекании картинки (IMG)

Cervus · November 13, 2008

Список обтекает картинку. Смещаю элементы списка относительно заголовка:

img {
	width: 150px;
	height: 212px;
	float: left;
	margin: 0px 20px 20px 20px; }

strong {
	font-weight: bold;
	font-size: 100%; }

ul {
	margin-top: 0px; }

li {
	margin: 0px 0px 0px 20px;
	font-size: 75%; }

В Firefox всё выглядит отлично:

А вот в IE7 - нет:

В чём проблема?

XAOPT · November 13, 2008

ul {
	margin-top: 0px;
	float: left; 
}

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

Edited November 13, 2008 by XAOPT

Cervus · November 13, 2008

Спасибо за совет. Пришлось немного помучаться, зато теперь в IE7 всё выглядит идеально:

Однако теперь непорядок с Firefox:

Вот как выглядит обновлённый CSS:

img {
	width: 150px;
	height: 212px;
	float: left;
	margin: 0px 20px 0px 20px; }

strong {
	width: 210px;
	float: left;
	font-weight: bold;
	font-size: 100%; }

ul {
	width: 190px;
	float: left;
	margin: 0px 0px 10px 20px; }

li {
	font-size: 75%; }

XAOPT · November 13, 2008

Похоже на то, что глюки, которые видны на скринах, скорее всего вызваны окружающими dom-элементами вашего кода..

1. у меня в FF3 всё в порядке (разве что не понятно зачем убран margin у элемента li)

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

Cervus · November 13, 2008

<div class="...">

  <img src="..." />

  <strong>Issue #1</strong><br />

  <ul>
    <li>Manifesto on Pussy</li>
    <li><a href="...">Three Stories by Daniil Kharms</a></li>
    ...
  </ul>

  <strong>Interviews with</strong><br />
  <ul>
    ...
  <ul>
</div>

<div class="...">

  <img src="..." />

  <strong>Issue #1</strong><br />

  <ul>
    <li><a href="...">Fuck Hitler...</a></li>
    <li><a href="...">The 2012 Apocalypse</a></li>
    ...
  </ul>

  <strong>Interviews with</strong><br />
  <ul>
    ...
  <ul>

</div>

XAOPT · November 13, 2008

Вот быстрое решение. Будет перерыв на работе, подумаю ещё:

* внёс блок стронг внутрь списка. Это не обязательно, просто для теста.

<style> 

li {
	margin: 0px 0px 0px 40px;
	font-size: 75%; }

img {
	width: 150px;
	height: 212px;
	float: left;
	margin: 0px 20px 0px 20px; }

ul {
	width: 190px;
	float: left;
	margin: 0px 0px 10px 10px; }
div.oneitem {
  height: 220px;
}
</style>

<body>

<div class="oneitem">

  <img src="..." />

  <ul><strong>Issue #1</strong>
	<li>Manifesto on Pussy</li>
	<li><a href="...">Three Stories by Daniil Kharms</a></li>
	...
  </ul>

</div>

<div class="oneitem">

  <img src="..." />

  <ul>  <strong>Issue #1</strong>
	<li><a href="...">Fuck Hitler...</a></li>
	<li><a href="...">The 2012 Apocalypse</a></li>
	...
  </ul>


</div>


</body>

Edited November 13, 2008 by XAOPT

Cervus · November 13, 2008

Добавление margin y li просто сдвигает элементы вправо. Не годится.

Высота div уже задана (min-height: 212px; height: auto !important; height: 212px; margin-top: 20px;), её изменение на 220px ничего не даёт.

Что интересно, если убрать margin у ul, то в IE7 получается примерно то же, что и в Firefox (список уползает под картинку). Это наталкивает вас на какие-нибудь соображения?

* внёс блок стронг внутрь списка. Это не обязательно, просто для теста.

Этот блок просто присоединяется к списку (то есть, в случае с Firefox так же уползает под картинку).

XAOPT · November 13, 2008

Этот блок просто присоединяется к списку (то есть, в случае с Firefox так же уползает под картинку).

Вы меня обманываете :-D

XAOPT · November 13, 2008

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

div.oneitem

назначить "лошадиную ширину"

Cervus · November 13, 2008

Увеличил ширину div'а:

Как-то элементы списка чересчур сдвинуты вправо, не находите (должно-то быть всего 20px)? Может быть, именно в этом проблема?

Чрезмерное увеличение ширины div'а в IE7 вызывает расширение родительского div'а, и серый фон наползает на основной текст страницы. Надеюсь, понятно и без скриншота.

XAOPT · November 13, 2008

Как-то элементы списка чересчур сдвинуты вправо, не находите (должно-то быть всего 20px)? Может быть, именно в этом проблема?

Это решается заменйо строки

margin: 0px 0px 0px 40px;

на строку

margin-left: 20px

Edited November 13, 2008 by XAOPT

Cervus · November 14, 2008

У меня сейчас как раз отступ в 20px и указан:

ul {
	width: 190px;
	float: left;
	margin: 0px 0px 10px 20px; }

li {
	padding: 2px;
	font-size: 75%; }

XAOPT · November 14, 2008

ну значит ещё уменьшайте)

Cervus · November 14, 2008

Это тоже не решение, так как в таком случае портится расположение элементов в IE7.

В общем, надоело мне с этим возиться. Выкинул списки, оформив все элементы как div'ы. Обтекание картинок сделал, как описано в этой статье (самый последний рецепт: Рисунок на поле > Использование стилей).

Немного помучившись с шириной элементов (здесь Firefox и IE7 тоже по-разному работают), вроде, добился того, чтобы в обоих браузерах страница отображалась одинаково.

Боюсь запускать Оперу...

Большое спасибо за помощь.

Sign In

Отступ элементов списка (LI) при обтекании картинки (IMG)

Question

Link to comment

Share on other sites

13 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information