Pasar CSS de encabezados a lista desordenada

[Juan Carlos]

Hola a todos.

Tengo un código representado por encabezamos H6 seguidos con enlaces en cada uno, con su código CSS determinado, pero he pensado que sería más correcto poner una lista desordenada en vez de encabezamos, lo que ocurre que a la hora de cambiar de nombre el CSS para que haga su mismo efecto que en los encabezados, no me funciona, no sé cuál es el error para que no haga su efecto.

Este es el código original CSS y encabezados que funciona actualmente:

Código:

#sidebars h6 {
	font: bold 1.0em Verdana, Arial, Helvetica, sans-serif;
	line-height: 16px;
	margin: 0 0 9px 0;
	padding: 5px 0 0 0;
}
#sidebars h6 a {
	color: #CC0000;
	text-decoration: none;
}
#sidebars h6 a:hover {
	color: #000000;
	text-decoration: underline;
}

Código HTML:

<h6><a href="#">xxxxxxxx</a></h6>
<h6><a href="#">xxxxxxxx</a></h6>
<h6><a href="#">xxxxxxxx</a></h6>
<h6><a href="#">xxxxxxxx</a></h6>
<h6><a href="#">xxxxxxxx</a></h6> 

Y así es como debería quedar el CSS y la lista desordenada:

Código:

#sidebars ul{
	font: bold 1.0em Verdana, Arial, Helvetica, sans-serif;
	line-height: 16px;
	margin: 0 0 9px 0;
	padding: 5px 0 0 0;
}
#sidebars li a {
	color: #CC0000;
	text-decoration: none;
}
#sidebars li a:hover {
	color: #000000;
	text-decoration: underline;
}

Código HTML:

<ul>
<li><a href="#">xxxxxxxx</a></li>
<li><a href="#">xxxxxxxx</a></li>
<li><a href="#">xxxxxxxx</a></li>
<li><a href="#">xxxxxxxx</a></li>
<li><a href="#">xxxxxxxx</a></li>
</ul> 

Desconozco si para que haga efecto debería meterle un "id" o algo parecido, pero vamos, lo meto tal cual y no tiene efecto CSS como lo tenía con los encabezados.

[rege]

Debes hacer los siguientes cambios: quitar padding i margin del ul, y aplicarlos en cada li. Además para que no te salgan los topos de la lista, debes poner list-style.none;

Código:

#sidebars ul{
	font: bold 1.0em Verdana, Arial, Helvetica, sans-serif;
	line-height: 16px;
	margin:0;
	padding:0;
}
#sidebars li { 
	list-style:none; 
	margin: 0 0 9px 0;
	padding: 5px 0 0 0;
}
#sidebars li a {
	color: #CC0000;
	text-decoration: none;
}
#sidebars li a:hover {
	color: #000000;
	text-decoration: underline;
}

[Juan Carlos]

Iniciado por rege

Debes hacer los siguientes cambios: quitar padding i margin del ul, y aplicarlos en cada li. Además para que no te salgan los topos de la lista, debes poner list-style.none;

Efectivamente, el error que tenía era que no había quitado el padding y margin del ul, en vez de ponerlos desde un principio en cada li. ¡Funcionó! ¡Muchas gracias!