Foros del Web » Creando para Internet » CSS »

poner imagen de fondo en menu desplegable

Estas en el tema de poner imagen de fondo en menu desplegable en el foro de CSS en Foros del Web. Hola, tengo este script de un menu deplegable pero quisiera que en las cabeceras principales donde se despliega el menu apareciera una imagen de fondo. ...
  #1 (permalink)  
Antiguo 29/06/2011, 11:52
 
Fecha de Ingreso: octubre-2010
Ubicación: Guayaquil
Mensajes: 195
Antigüedad: 6 años, 5 meses
Puntos: 3
poner imagen de fondo en menu desplegable

Hola, tengo este script de un menu deplegable pero quisiera que en las cabeceras principales donde se despliega el menu apareciera una imagen de fondo. gracias por la ayuda.

Código HTML:
<!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="es-es"> 
<head> 
  <title>Menu desplegable CSS</title> 
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 
<link rel="stylesheet" href="css/menu.css" type="text/css" /> 
</head> 
<body> 
<ul id="menu">
<li><a href="url...">HOME</a></li>
<li><a href="url...">THEESPECTROMANIA</a></li>
<li><a href="url...">HTML</a>
<ul> 
<li><a href="url...">CENTER</a></li>
<li><a href="url...">FONT</a></li>
</ul></li>
<li><a href="url...">CSS</a>
<ul>
<li><a href="url...">GRADIENT</a></li>
<li><a href="url...">BORDES</a></li>
</ul></li>

<style type = "text/css">
#menu{padding-left:25px; margin-top:15px;}
#menu li{list-style:none; float:left;}
#menu li a{display:block; width:200px;
height:20px; background:#99cccc;
border:1px solid; padding:2px;
text-decoration:none;
text-align:center; color:#000;
font-family:arial; font-size:15px;
font-weight:bold;}
#menu li a:hover{background:navy;
border-color:transparent;
color:#ffcc00;}
#menu li ul{display:none; position:absolute;}
#menu li ul li {display:block; float:none; 
position:relative; padding:0px;}
#menu li:hover ul{display:block; padding-left:0px;}

</style>
</body> 
</html> 
  #2 (permalink)  
Antiguo 29/06/2011, 13:29
 
Fecha de Ingreso: enero-2008
Mensajes: 214
Antigüedad: 9 años, 1 mes
Puntos: 3
Respuesta: poner imagen de fondo en menu desplegable

no se si a esto te refieras esque no te entendi muy bien, si querias la imagen a lo largo de todo el menu o asi. bueno ahi me dices

Cita:
<ul id="menu">
<li><a class="back" href="http://www.forosdelweb.com/f53/poner-imagen-fondo-menu-desplegable-925317/url...">HOME</a></li>
<li><a class="back" href="http://www.forosdelweb.com/f53/poner-imagen-fondo-menu-desplegable-925317/url...">THEESPECTROMANIA</a></li>
<li><a class="back" href="http://www.forosdelweb.com/f53/poner-imagen-fondo-menu-desplegable-925317/url...">HTML</a>
<ul>
<li><a href="http://www.forosdelweb.com/f53/poner-imagen-fondo-menu-desplegable-925317/url...">CENTER</a></li>
<li><a href="http://www.forosdelweb.com/f53/poner-imagen-fondo-menu-desplegable-925317/url...">FONT</a></li>
</ul></li>
<li><a class="back" href="http://www.forosdelweb.com/f53/poner-imagen-fondo-menu-desplegable-925317/url...">CSS</a>
<ul>
<li><a href="http://www.forosdelweb.com/f53/poner-imagen-fondo-menu-desplegable-925317/url...">GRADIENT</a></li>
<li><a href="http://www.forosdelweb.com/f53/poner-imagen-fondo-menu-desplegable-925317/url...">BORDES</a></li>
</ul></li>
</div>
<style type = "text/css">
.back{
background-image:url('bg-image.png');
background-repeat:no-repeat;
background-color:#99cccc;}
#menu{padding-left:25px; margin-top:15px; }
#menu li{list-style:none; float:left;}
#menu li a{display:block; width:200px;height:20px; background-color:#99cccc;border:1px solid; padding:2px;text-decoration:none;
text-align:center; color:#000;font-family:arial; font-size:15px;font-weight:bold;}
#menu li a:hover{background:navy;border-color:transparent;color:#ffcc00;}
#menu li ul{display:none; position:absolute;}
#menu li ul li {display:block;float:none; position:relative; padding:0px}
#menu li:hover ul{display:block; padding-left:0px;}
  #3 (permalink)  
Antiguo 29/06/2011, 13:47
 
Fecha de Ingreso: octubre-2010
Ubicación: Guayaquil
Mensajes: 195
Antigüedad: 6 años, 5 meses
Puntos: 3
Respuesta: poner imagen de fondo en menu desplegable

Gracias por responder, pero no es asi , a lo que me referia es que por ejemplo en el boton desplegable HOME atras de este texto en vez de ese color especifico turqueza haya una imagen de fondo ¿como se haria?...
  #4 (permalink)  
Antiguo 29/06/2011, 14:04
 
Fecha de Ingreso: enero-2008
Mensajes: 214
Antigüedad: 9 años, 1 mes
Puntos: 3
Respuesta: poner imagen de fondo en menu desplegable

asi te lo puse no te sirvio? mira lo que hice fue agregar una clase
<a class="back" href="dfsdf.com">HOME</a></li>
se la pones a la que le quieras asignar una imagen
luego cree la clase
Cita:
.back{background-image:url('imagen.jpg'); <-aquii va laimagen
background-repeat:no-repeat;}
  #5 (permalink)  
Antiguo 29/06/2011, 14:41
 
Fecha de Ingreso: octubre-2010
Ubicación: Guayaquil
Mensajes: 195
Antigüedad: 6 años, 5 meses
Puntos: 3
Respuesta: poner imagen de fondo en menu desplegable

exacto eso era, no me habia fijado que usted le habia puesto una clase solo vi los links que agrego, pero ahora a ese background le pongo una imagen de mi computador y no sale nada, a menos que haya puesto mal el path o algo asi... ya lo revisare.

mi codigo:

Cita:
<body>
<ul id="menu">
<li><a class="back" href="http://www.forosdelweb.com/f53/poner-imagen-fondo-menu-desplegable-925317/f53/poner-imagen-fondo-menu-desplegable-925317/url...">HOME</a></li>
<li><a class="back" href="http://www.forosdelweb.com/f53/poner-imagen-fondo-menu-desplegable-925317/f53/poner-imagen-fondo-menu-desplegable-925317/url...">THEESPECTROMANIA</a></li>
<li><a class="back" href="http://www.forosdelweb.com/f53/poner-imagen-fondo-menu-desplegable-925317/f53/poner-imagen-fondo-menu-desplegable-925317/url...">HTML</a>
<ul>
<li><a href="http://www.forosdelweb.com/f53/poner-imagen-fondo-menu-desplegable-925317/f53/poner-imagen-fondo-menu-desplegable-925317/url...">CENTER</a></li>
<li><a href="http://www.forosdelweb.com/f53/poner-imagen-fondo-menu-desplegable-925317/f53/poner-imagen-fondo-menu-desplegable-925317/url...">FONT</a></li>
</ul></li>
<li><a class="back" href="http://www.forosdelweb.com/f53/poner-imagen-fondo-menu-desplegable-925317/f53/poner-imagen-fondo-menu-desplegable-925317/url...">CSS</a>
<ul>
<li><a href="http://www.forosdelweb.com/f53/poner-imagen-fondo-menu-desplegable-925317/f53/poner-imagen-fondo-menu-desplegable-925317/url...">GRADIENT</a></li>
<li><a href="http://www.forosdelweb.com/f53/poner-imagen-fondo-menu-desplegable-925317/f53/poner-imagen-fondo-menu-desplegable-925317/url...">BORDES</a></li>
</ul></li>
</div>
<style type = "text/css">
.back{
background-image:url('EasyPHP-5.3.6.0\www\prueba\lovemoon.jpg');
background-repeat:no-repeat;
background-color:#99cccc;}
#menu{padding-left:25px; margin-top:15px; }
#menu li{list-style:none; float:left;}
#menu li a{display:block; width:200px;height:20px; background-color:#99cccc;border:1px solid; padding:2px;text-decoration:none;
text-align:center; color:#000;font-family:arial; font-size:15px;font-weight:bold;}
#menu li a:hover{background:navy;border-color:transparent;color:#ffcc00;}
#menu li ul{display:none; position:absolute;}
#menu li ul li {display:block;float:none; position:relative; padding:0px}
#menu li:hover ul{display:block; padding-left:0px;}
</style>

Última edición por gabrielcorr4; 29/06/2011 a las 14:46

Etiquetas: desplegable, fondo
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 10:56.