список лезет на рисунок

NWN · December 11, 2008

есть конструкция типа

<ul>

<li>blabla</li>

</ul>

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

как избавиться от этого чуда?

в принципе наверно "list-style:none; background: blabla" поможет решить, но хотелось бы более грамотного решения.

на форуме пробовал искать - не нашел, если что, извините =)

EGORR · December 11, 2008

в принципе наверно "list-style:none; background: blabla" поможет решить, ...

Вот с этого места поподробней.

background: blabla  поможет решить...

Очень интересно!

Vlad · December 11, 2008

Используй padding и margin.

EGORR · December 11, 2008

Чтобы получить подробный ответ нужен подробный вопрос.

Покажи кусок кода, CSS...

SelenIT · December 11, 2008

Как вариант, list-style-position: inside (при разумном допущении, что пункты списка не превысят одной строки).

Вот с этого места поподробней.

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

s0rr0w · December 11, 2008

Маркеры и будут лезть на картинку. Это правильное поведение. Как избежать? Перенос маркеров в зону padding'а

NWN · December 11, 2008

вот подробнее

http://dancepodcast.ru/ul/

По коду думаю все поймете.

Последний вариант с "list-style-position:inside" не подходит.

Во втором варианте надо прописывать "margin" под размер картинки, то есть для динамики не подойдет.

Нужно что-то универсальное.

ps эту страничку делал под safari если что, в примере думаю не обязательна кроссбраузерность.

Edited December 11, 2008 by NWN

Anami · December 11, 2008

Я наверно опять че-то не понимаю) У меня чудесно работает такая не шибко мудреная

конструкция:

.list img
{
	float:left;
	margin:0 30px 5px 0;
}

</style>

	<div class="list">
		<img src="spa.jpg" />
		<ul>
			<li>Пессимизма не существует. Если что-то не складывается — нужно не унывать,
				а просто идти вперед. Если будете бояться дождя, он пойдет.</li>
			<li>Я сторонник строгого контроля за оружием. Если где-то поблизости есть оружие,
				оно должно быть у меня.</li>
			<li>Я пробовал быть рассудительным. Мне не понравилось.</li>
			<li>Есть лишь один способ построить счастливый брак. Я женюсь снова, как только
				узнаю, в чем он заключается.</li>
			<li>Занятное наблюдение: чем менее человек благополучен, тем больше у него предрассудков.</li>
			<li>Ни разу не встречал гения. Гений — это тот, кто блестяще делает то, что
				ненавидит. Делать хорошо, что ты и так любишь, может каждый. Надо только
				найти такое любимое дело.</li>
			<li>Хотите гарантию — купите тостер.</li>
			<li>Нужно отдавать себе отчет в том, что твои возможности не безграничны.</li>
			<li>Мой старый преподаватель говорил: «Не делай ничего, просто стой». Гэри Купер
				не боялся ничегонеделания.</li>
			<li>Уважай свой труд и себя самого. Из самоуважения вырастает дисциплинированность,
				а обладание и тем, и другим рождает настоящую силу.</li>
			<li>Часто так бывает, что если хочешь перемен к лучшему, нужно брать дело в свои
				руки.</li>
			<li>Многие отличные фильмы получили «Оскара», а многие — нет. Нужно просто
				стараться изо всех сил.</li>
			<li>Фильм стоил 31 миллион долларов?! Да с такими деньгами я мог бы
				целую страну завоевать.</li>
		</ul>
	</div>

Или вам нужно чтобы список не обтекал картинку?

NWN · December 11, 2008

мне нужно чтобы смотрелось как во втором случае в моем примере НО! чтобы работало с картинками любого размера (а у меня в примере прописывается margin именно для этой картинки)

а в Вашем (Anami) примере я полагаю прописывается margin под картинку (под размер картинки)

Edited December 11, 2008 by NWN

Whatsup · December 11, 2008

И это всяко лучше, чем задавать обтекание картинки устаревшим атрибутом align

А какой новый такой способ появился ?

вот подробнее
http://dancepodcast.ru/ul/
По коду думаю все поймете.
Последний вариант с "list-style-position:inside" не подходит.
Во втором варианте надо прописывать "margin" под размер картинки, то есть для динамики не подойдет.
Нужно что-то универсальное.
ps эту страничку делал под safari если что, в примере думаю не обязательна кроссбраузерность.

Что значит описывать маргин под размеры картинки ?Ты может не понимаешь смысла этого свойства?

Оно лишь делает отступ от края блока в котором оно находится.

NWN · December 11, 2008

Whatsup, вот смотрите..

во втором случае я отключаю стандартные маркеры и пользуюсь бэкграундом и паддингом. но чтобы увидеть этот бэкграунд - я двигаю (maring-left) li на 160 пикселей. почему 160? не знаю, при том что рисунок по ширине = 200..

если убрать этот маржин, то маркеров не будет видно..

Anami · December 11, 2008

а в Вашем (Anami) примере я полагаю прописывается margin под картинку (под размер картинки)

А у себя потестить лень? У меня маргин не под картинку а от картинки. На ширину картинки плевать

NWN · December 11, 2008

нет, я сразу полез вопросы задавать. тестил конечно.

а Ваш пример можно в виде страницы увидеть? вместе с рисунком

Anami · December 11, 2008

Пришлось вспомнить народ.ру)

http://anami.narod.ru/fortest.htm

фаербагом можешь попробовать менять ширину высоту картинки

NWN · December 11, 2008

посмотрел.. этот маржин отодвигает все правее.. и обычный текст тоже.. а нужно чтобы текст начинался наравне в маркерами (см.2 в моем примере)

Whatsup · December 12, 2008

я понял о чем ты.Ты обтекание задал только у одного элемента из горизонтальной строки.Сделай по другому.Задай своему списку обтекание слева.И все будет так как ты хочешь.Если дальность текста не нравится,задай ее отрицательным значением.Либо обнули стандартное.

Вот код

<style>
img, ul {padding:0px;margin:0px;}
</style>

<img src="http://dancepodcast.ru/ul/dp.png" style="float:left">
	Dance Podcast - все клубные новинки одним кликом:
	<ul style="float:left;list-style:none;margin-left:10px;">
		<li style="background:url(http://dancepodcast.ru/ul/dot.png) left center no-repeat;padding-left:10px;">
			Pete Tong - Essential Selection и Essential Mix
		</li>

		<li style="background:url(http://dancepodcast.ru/ul/dot.png) left center no-repeat;padding-left:10px;">
			Armin Van Buuren - A State Of Trance
		</li>
		<li style="background:url(http://dancepodcast.ru/ul/dot.png) left center no-repeat;padding-left:10px;">
			Tiesto - CLub Life
		</li>
		<li style="background:url(http://dancepodcast.ru/ul/dot.png) left center no-repeat;padding-left:10px;">
			Roger Shah - Music for Balearic People
		</li>
	</ul>

Вот в принципе то что тебе нужно

NWN · December 12, 2008

в принципе то)) но.. "Dance Podcast - все клубные новинки одним кликом:" уходит и становится справа (после) "Pete Tong - Essential Selection и Essential Mix" изза float:left; новые теги добавлять нельзя..

s0rr0w · December 12, 2008

новые теги добавлять нельзя..

Тогда решения нет.

NWN · December 12, 2008

всем огромное спасибо!

решили использовать "list-style-position:inside"

Whatsup · December 16, 2008

Доктайп меняй.У меня все работает в моем варианте.

Sign In

список лезет на рисунок

Question

Link to comment

Share on other sites

19 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

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