Foros del Web » Creando para Internet » CSS »

Cambiar el background de un <li>

Estas en el tema de Cambiar el background de un <li> en el foro de CSS en Foros del Web. Hola a todos, yo tengo el siguiente codigo: Código HTML: <div id= "listamenu" > <ul> <li> <a href= "#" > <samp class= "textomenu" > Lenguajes ...
  #1 (permalink)  
Antiguo 01/03/2009, 04:52
Avatar de manumaf  
Fecha de Ingreso: mayo-2007
Ubicación: Argentina
Mensajes: 853
Antigüedad: 10 años, 7 meses
Puntos: 6
Cambiar el background de un <li>

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.
  #2 (permalink)  
Antiguo 01/03/2009, 05:18
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Cambiar el background de un <li>

Hola:

Cambia lo siguiente:

Cita:
<div id="listamenu">
<ul>
<li><a href="#"><samp class="textomenu1">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>
y en el CSS crea una class con las propiedades que quieras para textomenu1.

Saludos.

  #3 (permalink)  
Antiguo 01/03/2009, 05:29
Avatar de manumaf  
Fecha de Ingreso: mayo-2007
Ubicación: Argentina
Mensajes: 853
Antigüedad: 10 años, 7 meses
Puntos: 6
Respuesta: Cambiar el background de un <li>

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
  #4 (permalink)  
Antiguo 01/03/2009, 11:02
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Cambiar el background de un <li>

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> <!-- este esc el que quiero cambiar el color de fondo -->
<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.

  #5 (permalink)  
Antiguo 01/03/2009, 15:16
Avatar de manumaf  
Fecha de Ingreso: mayo-2007
Ubicación: Argentina
Mensajes: 853
Antigüedad: 10 años, 7 meses
Puntos: 6
Respuesta: Cambiar el background de un <li>

Ya intente de esa manera pero las <li> no obedecen a las clases siguen las reglas del id de la div.. Tiene alguna solucion?
  #6 (permalink)  
Antiguo 01/03/2009, 15:53
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Cambiar el background de un <li>

Hola:

¿Estás seguro? Prueba esto:

Cita:
#listamenu li1 {...};
#listamenu li0 {...};
Saludos.

  #7 (permalink)  
Antiguo 01/03/2009, 16:47
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Cambiar el background de un <li>

manumaf, dime una cosa: ¿qué es la etiqueta samp?
<samp class="textomenu">Lenguajes</samp>
__________________
Visita mi nueva web idplus.org
  #8 (permalink)  
Antiguo 01/03/2009, 16:53
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Cambiar el background de un <li>

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.
__________________
Visita mi nueva web idplus.org
  #9 (permalink)  
Antiguo 01/03/2009, 16:56
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Cambiar el background de un <li>

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>
__________________
Visita mi nueva web idplus.org
  #10 (permalink)  
Antiguo 01/03/2009, 17:22
Avatar de manumaf  
Fecha de Ingreso: mayo-2007
Ubicación: Argentina
Mensajes: 853
Antigüedad: 10 años, 7 meses
Puntos: 6
Respuesta: Cambiar el background de un <li>

Muchísimas gracias Mikmoro sos un grande .
  #11 (permalink)  
Antiguo 01/03/2009, 17:24
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Cambiar el background de un <li>

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

De nada, es un placer.

Saludos.
__________________
Visita mi nueva web idplus.org
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:22.