Cambiar el background de un <li>

manumaf · #1 (**permalink**) 01/03/2009, 04:52

Hola a todos, yo tengo el siguiente codigo:

Código HTML:

 <div id="listamenu">
           	  <ul>
                	<li><a href="#"><samp class="textomenu">Lenguajes</samp></a> </li> <!-- este esc el que quiero cambiar el color de fondo -->
                	<li><a href="#"><samp class="textomenu">PHP </samp></a> </li>
                	<li><a href="#"><samp class="textomenu">CSS </samp></a> </li>
                	<li><a href="#"><samp class="textomenu">Utilidades </samp></a> </li>
                	<li><a href="#"><samp class="textomenu"> hola </samp></a></li>
       		  </ul>
			</div>

CSS:

Código:

#listamenu li {
	list-style:none;
	margin:0px;
	padding:0px;
	border-bottom: 1px solid #333;}
#listamenu li a {
	display:block; 
	width:100%;
	padding: 3px 0px;
	color:#000;
	background-color:#DBEBF6;
	text-decoration:none;}
#listamenu li a:hover {
	display:block; 
	width:100%;
	padding: 3px 0px;
	color:#FFFFFF;
	background-color:#356AA0;
	text-decoration:none;}

Hasta hay todo bien, pero lo que quiero lograr es que el elemento de la lista "lenguajes" tenga otro color de fondo, ya intente dándole otro id y creando en el css otro color der fondo pero toma las propiedades de #listamenu, como devo hacer?

Muchas gracias.

jomaruro · #2 (**permalink**) 01/03/2009, 05:18

Hola:

Cambia lo siguiente:

Cita:

<div id="listamenu">
<ul>
<li><a href="#"><samp class="textomenu1">Lenguajes</samp></a> </li> 
<li><a href="#"><samp class="textomenu">PHP </samp></a> </li>
<li><a href="#"><samp class="textomenu">CSS </samp></a> </li>
<li><a href="#"><samp class="textomenu">Utilidades </samp></a> </li>
<li><a href="#"><samp class="textomenu"> hola </samp></a></li>
</ul>
</div>

y en el CSS crea una class con las propiedades que quieras para textomenu1.

Saludos.

manumaf · #3 (**permalink**) 01/03/2009, 05:29

Muchas gracias por responder, con esa solución puedo cambiar el color de fondo pero solo del texto yo quiero cambiar el color de fondo de todo el <li> me explico?

Muchas gracias

jomaruro · #4 (**permalink**) 01/03/2009, 11:02

Hola:

Entonces tendrás que cambiar lo siguiente:

Cita:

<div id="listamenu">
<ul>
<li class="li1"><a href="#"><samp class="textomenu">Lenguajes</samp></a> </li> 
<li class="li0"><a href="#"><samp class="textomenu">PHP </samp></a> </li>
<li class="li0"><a href="#"><samp class="textomenu">CSS </samp></a> </li>
<li class="li0"><a href="#"><samp class="textomenu">Utilidades </samp></a> </li>
<li class="li0"><a href="#"><samp class="textomenu"> hola </samp></a></li>
</ul>
</div>

y en el CSS definir las propiedades que necesites para los distintos <li>.

Saludos.

manumaf · #5 (**permalink**) 01/03/2009, 15:16

Ya intente de esa manera pero las <li> no obedecen a las clases siguen las reglas del id de la div.. Tiene alguna solucion?

jomaruro · #6 (**permalink**) 01/03/2009, 15:53

Hola:

¿Estás seguro? Prueba esto:

Cita:

#listamenu li1 {...};
#listamenu li0 {...};

Saludos.

Mikmoro · #7 (**permalink**) 01/03/2009, 16:47

manumaf, dime una cosa: ¿qué es la etiqueta samp?
<samp class="textomenu">Lenguajes</samp>

Mikmoro · #8 (**permalink**) 01/03/2009, 16:53

Por otro lado, si pones una clase a un enlace cualquiera:

<li><a href="#" class="distinto"><samp class="textomenu">CSS </samp></a> </li>

y añades esto a la CSS:

#listamenu li a.distinto {background-color: #00f;}

el fondo de ese enlace se verá azul marino.

Mikmoro · #9 (**permalink**) 01/03/2009, 16:56

Por último, no sé qué querías hacer con esa etiqueta "samp", pero yo lo haría así:

Cita:

<!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" xml:lang="es" lang="es-es">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#listamenu li {
list-style:none;
margin:0px;
padding:0px;
border-bottom: 1px solid #333;
}
#listamenu li a {
display:block;
width:100%;
padding: 3px;
color:#000;
background-color:#DBEBF6;
text-decoration:none;
}
#listamenu li a:hover {
display:block;
width:100%;
padding: 3px;
color:#FFFFFF;
background-color:#356AA0;
text-decoration:none;
}
#listamenu li a.distinto {background-color: #00f;}
</style>
</head>
<body>
<div id="listamenu">
<ul>
<li><a href="#" class="distinto">Lenguajes</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Utilidades</a></li>
<li><a href="#">hola</a></li>
</ul>
</div>
</body>
</html>

manumaf · #10 (**permalink**) 01/03/2009, 17:22

Muchísimas gracias Mikmoro sos un grande

.

Mikmoro · #11 (**permalink**) 01/03/2009, 17:24

1,81cm (un metro ochenta y un centímetros, casi grande)

De nada, es un placer.

Saludos.