Jump to content
  • 0

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

NWN

Asked by NWN,

 Share

Question

NWN Explorer

NWN

Posted
Posted

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

<img align="left">

<ul>

<li>blabla</li>

<li>blabla</li>

</ul>

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

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

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

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

Link to comment
Share on other sites

19 answers to this question

Recommended Posts

  • 0
SelenIT Explorer

SelenIT

Posted
Posted

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

Вот с этого места поподробней.
Насколько я понимаю, идея была в полном отказе от стандартных маркеров, с заменой их на собственные картинки, подложенные как неразмножаемый фон. По-моему, это почти общепринятая практика, иначе никак не отрегулирвать ни вертикальное положение маркера, ни расстояние от него до текста (насколько мне известно). И это всяко лучше, чем задавать обтекание картинки устаревшим атрибутом align ;)
Link to comment
Share on other sites
  • 0
NWN Explorer

NWN

Posted
  • Author
Posted (edited)

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

http://dancepodcast.ru/ul/

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

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

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

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

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

Edited by NWN
Link to comment
Share on other sites
  • 0
Anami Explorer

Anami

Posted
Posted

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

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

.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>

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

Link to comment
Share on other sites
  • 0
NWN Explorer

NWN

Posted
  • Author
Posted (edited)

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

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

Edited by NWN
Link to comment
Share on other sites
  • 0
Whatsup Explorer

Whatsup

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

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

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

http://dancepodcast.ru/ul/

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

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

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

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

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

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

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

Link to comment
Share on other sites
  • 0
NWN Explorer

NWN

Posted
  • Author
Posted

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

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

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

Link to comment
Share on other sites
  • 0
Anami Explorer

Anami

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

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

Link to comment
Share on other sites
  • 0
Whatsup Explorer

Whatsup

Posted
Posted

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

Вот код

<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>

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept