ul и img float

mailmoney · November 19, 2009

В общем CSS вот такой для крыжиков и картинок:

#content ul li {
line-height:130%;
padding-left:20px;
background:url(../i/li.gif) no-repeat 0em 0.6em;
}
.article_intro img {
  display: block;
  position: relative;
  border: 1px solid #a9a9a9;
  margin: 0px 0px 5px 10px;
  padding: 3px;
}

Когда ситуация с флоат, то "крыжыки" съезжают на начало строки.

<p><img style="float: left;" src=".." width="150" height="100" />asdasdasd</p>
<ul>
<li>asdasd</li>
<li>asdasd</li>
</ul>

Вот фотка:

Как правильно делать крыжыки и рамочки? Помогите..

Edited November 19, 2009 by mailmoney

Searcher · November 19, 2009

не совсем понял проблему, но может поможет list-style-position: inside;

Justnewone · November 19, 2009

А еще можно UL сказать overflow:hidden но лучше тогда не указывать ни ширины ни высоты.

Great Rash · November 19, 2009

Что такое "крыжики"?

Searcher · November 19, 2009

Что такое "крыжики"?

наверно маркеры списка...

mailmoney · November 19, 2009

Крыжыки - это списки UL (маркеры списка - подсказали спасибо)

Вот ещё раз на фото:

Картиночка в рамке (описывается .article_intro img). Ей присвоено float:left;

В тексте присутствует список UL. Там вместо стандартного крыжыка/бублика стоит картиночка (длиное тире).

Вот при таком раскалде - эти длиные тире "съехали" в начало картинки (под рамочкой виднеются 2 палочки.

Edited November 19, 2009 by mailmoney

Great Rash · November 19, 2009

Терминология полиграфиста что-ли? По человечески "крыжик" называется "буллит (bullit - •)"...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" /> 

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font: normal 14px Arial, Tahoma, Verdana, sans-serif;
		}

		body {
			margin: 10px;
		}

		div {
			overflow: hidden;
			border: red 1px solid;
		}

		img {
			float: left;
			width: 150px;
			height: 100px;
			border: lightgreen 1px solid;
			background: lime;
		}

		ul {
			margin-left: 152px;
			padding-left: 20px;
			border: cyan 1px solid;
		}
	</style>
</head>

<body>

	<div>
		<img src="rouble.png" alt="" />
		<ul>
			<li>text text text</li>
			<li>text text text</li>
			<li>text text text</li>
		</ul>
	</div>

</body>
</html>

mailmoney · November 19, 2009

В общем такой метод наверное не годится.

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

Или не существует такого способа?

Great Rash · November 19, 2009

Покажите код фрагмента. Желательно на тестовой странице как у меня. Просто не понятно с какой целью вы запихнули <img> в <p> если и так назначили картинке display: block;

mailmoney · November 19, 2009

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" /> 

	<style type="text/css">   
	ul {list-style: none;}

	ul li {
	line-height:130%;
	padding-left:20px;
	background:url(li.gif) no-repeat 0em 0.6em;
	}

	img {
	display: block;
	position: relative;
	border: 1px solid #a9a9a9;
	margin: 0px 0px 5px 10px;
	padding: 3px;
	}
	</style>
</head>

<body>

<p><img style="float: left;" src="asd.jpg" width="150" height="100" />Заголовок</p>
<ul>
<li>Список 1</li>
<li>Список 2</li>
<li>Список 3</li>

</ul>

</body>
</html>

Justnewone · November 19, 2009

Блин, ТС, да дай же ты списку overflow:hidden

s0rr0w · November 19, 2009

В общем такой метод наверное не годится.
UL описаны для всего сайта. А вот уже сейчас разделять на слои UL и картинку то, что сделано тяжеловато.
Или не существует такого способа?

Заменить булеты на свои, сделанные картинкой.

mailmoney · November 19, 2009

overflow:hidden

Спасибо. Помогло... Извините, если были тупые вопросы.

Sign In

ul и img float

Question

Link to comment

Share on other sites

12 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

Join the conversation

Обсуждения

Important Information