Помогите с CSS

ervin · October 27, 2010

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

Помогите с CSS, не получается избавиться от лишней черты под пунктом "Задание 3", а так же пункт между пунктом "АСТРОЛОГИЯ" и "Урок 4" увеличить отступ.

Заранее спасибо!

<html>
<head>
  <title></title>
 <style type="text/css">
#category  ul {
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-left: 0px;
    text-transform: uppercase;
	list-style: none;
}

#category #cat1 ul {
	margin-top: 10px;
	margin-bottom: 0px;
	margin-left: 8px;
	padding-left: 11px;
    text-transform: none;
    list-style: square;
}

#category #cat1 ul li{
    	margin-bottom: 7px;
        border-bottom: 1px solid #dadada;
}

#category #cat1 ul li.first{
    	margin-bottom: 7px;
}

#category #cat1 a{
    font-size: 12px;
    text-decoration: none;
    display: block;
}

#category #cat1 ul li a:hover{ /*hover state CSS*/
background-color: #F3F3F3;
}

/*start cat2************************************************/

#category #cat2 ul {
	margin-top: 7px;
	padding-bottom: 0px;
	margin-left: 8px;
	padding-left: 12px;
	list-style: circle;
}

#category #cat2 ul li{
     margin-bottom: 7px;
     border-bottom: 1px solid #dadada;
     font-size: 12px;
}

#category #cat2 ul li.first{
	margin-bottom: 7px;
}

#category #cat2 a{
    font-size: 12px;
    text-decoration: none;
    display: block;
}

#category #cat2 ul li a:hover{ /*hover state CSS*/
background-color: #F3F3F3;
}

/*start cat3************************************************/
#category #cat3 ul {
	margin-top: 7px;
	margin-bottom: 0px;
	margin-left: 8px;
	padding-left: 12px;
	list-style: disc;

}

#category #cat3 ul li{
	margin-bottom: 7px;
}

#category #cat3 a{
    font-size: 12px;
    text-decoration: none;
    display: block;
}

#category #cat3 ul li a:hover{ /*hover state CSS*/
background-color: #F3F3F3;
}



/*end category*********************************/

  </style>
</head>

<body>

 <div id="category" class="middle">
 	<ul id="cat1">
 		<li><a href="">Астрономия</a>
 			<ul id="cat2">
 				<li  class="first"><a href="">Урок 1</a>
 					<ul id="cat3">
 						<li><a href="">Задание 1</a></li>
 						<li><a href="">Задание 2</a></li>
 						<li><a href="">Задание 3</a></li>
 					</ul>
 				</li>
 				<li><a href="">Урок 2</a></li>
 				<li><a href="">Урок 3</a></li>
 				<li><a href="">Урок 4</a></li>
 			</ul>
 			</li>
 			<li class=""><a href="">Астрология</a>
	 			<ul id="cat2">
	 				<li class="first"><a href="">Урок 1</a>
	 					<ul id="cat3">
	 						<li><a href="">Задание 1</a></li>
	 						<li><a href="">Задание 2</a></li>
	 						<li><a href="">Задание 3</a></li>
	 					</ul>
	 				</li>
	 				<li><a href="">Урок 2</a></li>
	 				<li><a href="">Урок 3</a></li>
	 				<li><a href="">Урок 4</a></li>
	 			</ul>
 			</li>
 </ul>
 </div>


</body>

</html>

tt48 · October 27, 2010

Здравствуйте!
Помогите с CSS, не получается избавиться от лишней черты под пунктом "Задание 3", а так же пункт между пунктом "АСТРОЛОГИЯ" и "Урок 4" увеличить отступ.
Заранее спасибо!

А как Вы её, черту эту, пытались удалить?

можно прописывать последнему пункту стиль style='border-bottom:none;' через классы

или чего хотите.

Можно сделать в конце охватывающей ячейки релативный блок небольшой высоты,

который просто будет закрывать собой подчЁрк.

Отступ - приблизительно также. Наиболее разумным, как мне кажется,

будет назначение padding-top для списка.

Можно и через margin для вложенного блока-ссылки.

ervin · October 27, 2010

А как Вы её, черту эту, пытались удалить?
можно прописывать последнему пункту стиль style='border-bottom:none;' через классы
или чего хотите.
Можно сделать в конце охватывающей ячейки релативный блок небольшой высоты,
который просто будет закрывать собой подчЁрк.
Отступ - приблизительно также. Наиболее разумным, как мне кажется,
будет назначение padding-top для списка.
Можно и через margin для вложенного блока-ссылки.

Спасибо, что откликнулись.

Пытаюсь через классы убрать черту, при class="first".

Отступ пробовал и через padding-top и margin-top, работает , но при этом и во внутренних категориях "Астрология" тоже появляются отступы.

d0ublezer0 · October 28, 2010

#category #cat1 ul li.first {
border-bottom:0 none;
margin-bottom:7px;
}

Edited October 28, 2010 by d0ublezer0

ervin · October 29, 2010

#category #cat1 ul li.first {
border-bottom:0 none;
margin-bottom:7px;
}

Спасибо большое!

d0ublezer0 · October 30, 2010

Хм, это будет работать только для #cat1

сделайте просто

li.first {
border-bottom:0 none;
margin-bottom:7px;
}

Только про наследование чето у меня сомнения.

Sign In

Помогите с CSS

Question

ervin

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

tt48

Link to comment

Share on other sites

ervin

Link to comment

Share on other sites

d0ublezer0

Link to comment

Share on other sites

ervin

Link to comment

Share on other sites

d0ublezer0

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information