Foros del Web » Creando para Internet » CSS »

Problema con imagenes de menu horizontal

Estas en el tema de Problema con imagenes de menu horizontal en el foro de CSS en Foros del Web. Hola, soy nueva en el foro y mi problema es que tengo un menu horizontal que esta formado por cinco imagenes, las cuales haga lo ...
  #1 (permalink)  
Antiguo 21/10/2009, 22:10
 
Fecha de Ingreso: octubre-2009
Mensajes: 8
Antigüedad: 8 años, 1 mes
Puntos: 1
Problema con imagenes de menu horizontal

Hola, soy nueva en el foro y mi problema es que tengo un menu horizontal que esta formado por cinco imagenes, las cuales haga lo que haga me quedan con un espacio entre cada una de ellas, intente cambiando varias veces el codigo, les pude padding: 0; border: 0; margin: 0 . Tambien probe con border:none; font-size:0; letter-spacing:-1p. Ya no se me ocurre con que mas probar el espacio me lo deja igual. Aqui les mando el codigo a ver si me pueden ayudar a descifrar cual es mi problema.

Código css:
Ver original
  1. #barra {float:left; width:100%; padding: 0; margin: 0; border:none; font-size:0; letter-spacing:-1px}
  2. #barra li{ list-style:none; float:left;}
  3. .inicio a{background:url(images/inicio.jpg) no-repeat; text-decoration:none; display:block; width:116px; height:40px; border:none; font-size:0; letter-spacing:-1px
  4. }
  5. .inicio a:hover {background-position:bottom; background-image:url(images/inicio_over.jpg);border: 0;}
  6. .galerias a{background:url(images/galerias.jpg) no-repeat; text-decoration:none; display:block; width:150px; height:40px; border: 0; }
  7. .galerias a:hover {background-position:bottom; background-image:url(images/galerias_over.jpg); border: 0; }
  8. .servicios a{background:url(images/servicios.jpg) no-repeat; text-decoration:none; display:block; width:159px; height:40px; border: 0; }
  9. .servicios a:hover {background-position:bottom; background-image:url(images/servicios_over.jpg); border: 0; }
  10. .mapa a{background:url(images/mapa.jpg) no-repeat; text-decoration:none; display:block; width:142px; height:40px; border: 0; }
  11. .mapa a:hover {background-position:bottom; background-image:url(images/mapa_over.jpg); border: 0; }

Código HTML:
<ul id="barra">
   <li><img src="images/relleno.jpg" />
  <li class="inicio"><a href="#" class="inicio"></a></li>
  <li class="galerias"><a href="#" class="galerias"></a></li>
  <li class="servicios"><a href="#" class="servicios"></a></li>
  <li class="mapa"><a href="#" class="mapa"></a></li> 
Gracias
  #2 (permalink)  
Antiguo 21/10/2009, 22:18
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Problema con imagenes de menu horizontal

Hola Cecilia_Cristina:

Podes ahorrarte un poco de código colocando un reset en el css que es el que va con el *:

Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
  3. <title>Menu</title>
  4. <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
  5. <style type="text/css">
  6. *{margin:0; padding:0; border:0; outline:0;}
  7. #barra {float:left; width:100%;}
  8. #barra li{ list-style:none; float:left;}
  9. .inicio a{background:url(images/inicio.jpg) no-repeat; text-decoration:none; display:block; width:116px; height:40px;}
  10. .inicio a:hover {background-position:bottom; background-image:url(images/inicio_over.jpg);}
  11. .galerias a{background:url(images/galerias.jpg) no-repeat; text-decoration:none; display:block; width:150px; height:40px;}
  12. .galerias a:hover {background-position:bottom; background-image:url(images/galerias_over.jpg);}
  13. .servicios a{background:url(images/servicios.jpg) no-repeat; text-decoration:none; display:block; width:159px; height:40px;}
  14. .servicios a:hover {background-position:bottom; background-image:url(images/servicios_over.jpg); border: 0; }
  15. .mapa a{background:url(images/mapa.jpg) no-repeat; text-decoration:none; display:block; width:142px; height:40px;}
  16. .mapa a:hover {background-position:bottom; background-image:url(images/mapa_over.jpg);}
  17. </head>
  18. <ul id="barra">
  19.    <li><img src="images/relleno.jpg" /></li>
  20.   <li class="inicio"><a href="#" class="inicio"></a></li>
  21.   <li class="galerias"><a href="#" class="galerias"></a></li>
  22.   <li class="servicios"><a href="#" class="servicios"></a></li>
  23.   <li class="mapa"><a href="#" class="mapa"></a></li>
  24. </ul>
  25. </body>
  26. </html>

en la li donde esta relleno.jpg no esta cerrado según el código que pones, y la ul tampoco, podrías colgar algo en la red para que veamos que es lo que quieres lograr y como es que te queda mal, ya que no se cuanto mide tu imagen o que forma tiene.

PD: Bienvenida al foro
__________________
WFC
codigo82
  #3 (permalink)  
Antiguo 22/10/2009, 04:02
 
Fecha de Ingreso: octubre-2009
Mensajes: 8
Antigüedad: 8 años, 1 mes
Puntos: 1
Respuesta: Problema con imagenes de menu horizontal

Hola muchas gracias, si me di cuenta que de tanto modificar los datos habia quitado muchas cosas y agregado otras que no iban. Ya solucione el problema agregandole
img {margin: 0; padding: 0}
Se que era un poco estupido mi problema pero bueno, todos tenemos dias en los que andamos un poco torpes
Muchas gracias nuevamente
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 04:08.