Прошу помочь с CSS для списков <ul>

Asar
На сайте с 23.08.2004
Offline
322
689

На скрине ниже:

Картинка — внутри абзаца с float:left.

Картинку с абзацем обтекает текст, состоящий из h3 (шрифт увеличенного размера) и ul li.

При этом:

Там, где обтекать нечего (ниже картинки) у списков есть отступ слева относительно h3 и левой границы контейнера вообще.

Там, где списки обтекают картинку, отступ относительно h3 получается какбэ отрицательный. Точнее, он таковым выглядит.

Вопрос: как это дело можно исправить, чтобы в обтекающей картинку части списков отступ был визуально таким же, как и в необтекающей? Т.е. чтобы Дополнительная информация и список под ней выглядели относительно друг друга так же, как Кормовые растения и Дополнительная информация о стадии гусеницы с их списками?

Asar добавил 28.09.2011 в 22:48

З.Ы. И как сделать, чтобы заголовок «Время жизни гусениц» отъезжал под картинку вместе со списком под ним, не используя clear (т.к. высота картинки и списков варьируется).

LovelAss
На сайте с 05.06.2009
Offline
96
#1

Дело, скорей всего, в margin'е - попробуйте убрать у тега списка margin-left и вместо него добавить padding-left - должно помочь.

P.S.: А вообще в таком случае нужно приводить код. Гадать на кофейной гуще, думаю, здесь мало кто умеет.

Asar
На сайте с 23.08.2004
Offline
322
#2

Вот, выложил пример: http://asar.su/astest.php

Margin/Padding у ul влияют на часть списка, которая не обтекает абзац как я пробовал...

gormarket
На сайте с 29.12.2010
Offline
47
#3

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

попробуйте поместить h3 и ul li (думаю что это в приведенном примере "Время жизни ..." + "С августа по май... " ) в общий контейнер (например div с float:left)

Заголовок под картинку в этом случае думаю не отъедет, но и ul li возможно не уедет влево от заголовка.

(и DOCTYPE у страницы обязательно должен быть указан для стабильности результатов)

Товары и цены в магазинах Вашего города: Городской рынок (http://gormarket.ru/)
Asar
На сайте с 23.08.2004
Offline
322
#4

С флоатом контейнер делать нельзя: его ширина заранее неизвестна, она вполне может быть мелкой. А в таком случае на него полезет следующий контейнер.

LovelAss
На сайте с 05.06.2009
Offline
96
#5


ul {
overflow: hidden;
}
[Удален]
#6

У абзаца попробуйте вот так прописывать оступы:

margin: 0 2% 0 0;

Вместо этого

margin-right: 2%;
Asar
На сайте с 23.08.2004
Offline
322
#7
Сашко:
У абзаца попробуйте вот так прописывать оступы:
margin: 0 2% 0 0;

Вместо этого
margin-right: 2%;

Не, это здесь ни при чем.

Asar добавил 29.09.2011 в 03:09

LovelAss:

ul {
overflow: hidden;
}

Отлично, работает. Большущее спасибо, сам бы до такого никогда не дотумкал.

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