Список, появляются отступы

YanaSt · September 21, 2009

Здравствуйте!

Хочу сделать список. Между элементами списка хочу вставить полоски. Но не границами, а именно отдельными элементами. Пробую несколько вариантов, но в IE7 ни один корректно не отображается ((( HELP! HELP! HELP! В FF и Опере работают 2 варианта. Но в них, если задана картинка в списке, он слетает. Как это сделать нормально??

<!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="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
  <title></title>

 <style type="text/css">

 *{
 margin:0;
 padding:0;
 }

ul {
margin:10px 0 0 10px;
background-color:gray;
width:238px;
list-style-type:none;
}

li  {
height:22px;
}

 .red {
 background-color:red;
 }

 .green {
 background-color:green;
 }

.line_bg {
width:238px;
height:1px;
background-color:#d7d7de;
} 



.img {
width:238px;
height:1px;
}

.bg {
width:238px;
height:1px;
background-image:url(images/line2.gif);
background-pocition:top;
}   





 </style>
 </head>

 <body>

 <ul>
  <li class="red">11111</li>
  <li class="line_bg"></li>         <!--Линия задается пустым элементом списка с фоном-цветом-->
  <li class="green">11111</li>
  <li class="red">11111</li>
  <li class="green">11111</li>  
  <li class="red">11111</li>
  <li class="green">11111</li>
  <li class="img"><img src="images/line2.gif" alt="" /></li>   <!--Линия задается элементом списка с картинкой, стиль задан у li-->
  <li class="red">11111</li>
  <li class="green">11111</li> 
  <li class="bg"></li>                <!--Линия задается пустым элементом списка с фоном-картинкой-->
  <li class="red">11111</li>
  <li class="green">11111</li>
  <li class="red">11111</li>
  <li class="green">11111</li>  
 </ul>


  </body>
</html>

Justnewone · September 21, 2009

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

Сделайте бордерами, мой Вам совет. Пустой элемент списка - это просто антипрофессионализм.

YanaSt · September 21, 2009

а как бордерами? у меня нижний накладывается на верхний и тогда цвет получается темнее (((

я не могу разобраться, почему картинка не встает на место? если img вcтавляю в список? элемент не пустой, все нормально, профессионально. но в браузере коряво выглядит

rome.ro · September 21, 2009

Насколько я правильно понял, то код ниже должен Вам подойти:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <style type="text/css">
   ul{
	margin:0px;
	padding:0px;
   }

   li{
	border-bottom: solid gray 1px;
	background: #00ff00;
   }
 </style>
</head>
<body>

 <ul>
  <li>Элемент списка</li>
  <li>[url="http://www.study.ua/"]Study.UA[/url]</li>
  <li>Бла-бла-бла</li>
 </ul>

</body>
</html>

Исправьте под свой вкус и будет Вам счастье.

Flare · September 21, 2009

YanaSt, вы нигде не указываете padding. В разных браузерах ul отображается посвоему, поэтому, кроме margin нужно еще конкретизировать значение padding.

Ваш пустой <li class="bg"></li> на самом деле не пустой, а с пробелом. Хоть вы и задали ему высоту в 1px, осел делает высоту больше как раз из-за пробела. Он устанавливает высоту li в высоту текущего шрифта.

Я тоже считаю, что пустых li быть не должно, но всё же, если оставлять всё как есть, добавьте в стили к "bg"

font-size:1px;

YanaSt · September 22, 2009

YanaSt, вы нигде не указываете padding. В разных браузерах ul отображается посвоему, поэтому, кроме margin нужно еще конкретизировать значение padding.
Ваш пустой <li class="bg"></li> на самом деле не пустой, а с пробелом. Хоть вы и задали ему высоту в 1px, осел делает высоту больше как раз из-за пробела. Он устанавливает высоту li в высоту текущего шрифта.
Я тоже считаю, что пустых li быть не должно, но всё же, если оставлять всё как есть, добавьте в стили к "bg"
font-size:1px;

padding у меня указан

*{

margin:0;

padding:0;

}

<!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="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
  <title></title>

 <style type="text/css">

 *{
 margin:0;
 padding:0;
 }

ul {
margin:10px 0 0 10px;
background-color:gray;
width:238px;
list-style-type:none;
}

li  {
height:42px;
}

 .red {
 background-color:red;
 }

 .green {
 background-color:green;
 }

 .px {
width:238px;
height:1px; 
font-size:1px;
 } 

 </style>
 </head>

 <body>

 <ul>
  <li class="green">11111</li>
  <li class="px"><img id="img" src="images/line2.gif" alt="" /></li>   <!--Линия задается элементом списка с картинкой-->
  <li class="red">11111</li>
 </ul>


  </body>
</html>

сделала так, убрала напрочь все пустые элементы списка, надо же учиться правильному. но font-size:1px; в IE так и не помог. голова дымиться, а ведь такой пустяк казалось бы - вставить полоску картинкой ((((

YanaSt · September 22, 2009

все, сделала

бордером, конечно же )))))

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

вот такая заноза жить мешала :blink:

всем спасибо за участие!

Sign In

Список, появляются отступы

Question

YanaSt

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Justnewone

Link to comment

Share on other sites

YanaSt

Link to comment

Share on other sites

rome.ro

Link to comment

Share on other sites

Flare

Link to comment

Share on other sites

YanaSt

Link to comment

Share on other sites

YanaSt

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information