Список приипает к картинке

mongoose · October 30, 2007

В ФФ у маркеров списка отступ слева, в ИЕ и Опере маркеры списка прилипают к картинке. Нужно сделать так, чтобы маркеры списка шли на одном уровне с абзацем, т.е. так, как отображается в ФФ. Кто-нибудь может помочь советом, как это сделать?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
</head>
<style>
*{
 padding:0;
 margin: 0;
}
img{
 float: left;
 margin-right: 20px;
 width: 185px;
 }
li{
 margin: 0 0 0 20px;
 }
</style>
<body>

<img src="img.gif" />
<p>ля-ля-ля ля-ля-ля ля-ля-ля ля-ля-ля ля-ля-ля ля-ля-ля ля-ля-ля ля-ля-ля ля-ля-ля ля-ля-ля ля-ля-ля ля-ля-ля </p>
<ul>
<li>тра-та-та
<li>тра-та-та
<li>тра-та-та
<li>тра-та-та
<li>тра-та-та
<li>тра-та-та
<li>тра-та-та
<li>тра-та-та
<li>тра-та-та
<li>тра-та-та
<li>тра-та-та
</ul>
</body>
</html>

Scrum · October 30, 2007

напишите так и поймете почему.

ul, li {
 margin: 0 0 0 20px;
 border: 1px solid red;
 }

mongoose · October 30, 2007

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

klierik · October 30, 2007

что-то я не очень понял суть проблемы =

mongoose · October 30, 2007

что-то я не очень понял суть проблемы =

между картинкой и маркерами должен быть отступ 20px. В ФФ он есть, а в Опере и ИЕ его нет

Scrum · October 30, 2007

для img {padding-right: 20px;}

maddogrts · October 30, 2007

<!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" lang="ru" xml:lang="ru">
<title>Untitled Document</title>
</head>
<style>
*{
 padding:0;
 margin: 0;
}
img{
 float: left;
 width: 185px;
 border: 1px solid blue
 }
li {}
</style>
<body>

<img src="img.gif" width="185" height="200" />
<p>ля-ля-ля ля-ля-ля ля-ля-ля ля-ля-ля ля-ля-ля ля-ля-ля ля-ля-ля ля-ля-ля ля-ля-ля ля-ля-ля ля-ля-ля ля-ля-ля</p>
<ul>
<li>тра-та-та
<li>тра-та-та
<li>тра-та-та
<li>тра-та-та
<li>тра-та-та
<li>тра-та-та
<li>тра-та-та
<li>тра-та-та
<li>тра-та-та
<li>тра-та-та
<li>тра-та-та
</ul>
</body>
</html>

Где то я видел этот глюк сейчас посмотрю, а для тех кто не понял в чем проблема, margin для li работает только в FF.

задай отступ для ul а не для li (margin-left: 205px) будет везде ок.

mongoose · October 30, 2007

если задать для UL, получится не то, что нужно, а нужно так:

imgimgimg li

li

klierik · October 30, 2007

<!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" lang="ru" xml:lang="ru">
<title>Untitled Document</title>
</head><style>
* {
 padding:0;
 margin: 0;
}
img {
 float: left;
 width: 185px;
 border: 1px solid #aaa;
}
ul {
 /*margin-left:20px;*/
 display:block;
 border:1px solid red;
 float:left;
}
li {margin-left:20px;}
</style>
<body>
<img src="img.gif" width="185" height="200" />
<p>ля-ля-ля ля-ля-ля ля-ля-ля ля-ля-ля ля-ля-ля ля-ля-ля ля-ля-ля ля-ля-ля ля-ля-ля ля-ля-ля ля-ля-ля ля-ля-ля</p>
<ul>
 <li>тра-та-та
 <li>тра-та-та
 <li>тра-та-та
 <li>тра-та-та
 <li>тра-та-та
 <li>тра-та-та
 <li>тра-та-та
 <li>тра-та-та
 <li>тра-та-та
 <li>тра-та-та
 <li>тра-та-та
</ul>
</body>
</html>

может так?

Dimitry Wolotko · October 30, 2007

В проблемы с версткой.

Sign In

Список приипает к картинке

Question

mongoose

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

Scrum

Link to comment

Share on other sites

mongoose

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

mongoose

Link to comment

Share on other sites

Scrum

Link to comment

Share on other sites

maddogrts

Link to comment

Share on other sites

mongoose

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

Dimitry Wolotko

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information