Problema con imagenes de menu horizontal

Cecilia_Cristina · #1 (**permalink**) 21/10/2009, 21:10

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#barra {float:left; width:100%; padding: 0; margin: 0; border:none; font-size:0; letter-spacing:-1px}
#barra li{ list-style:none; float:left;}
.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
}
.inicio a:hover {background-position:bottom; background-image:url(images/inicio_over.jpg);border: 0;}
.galerias a{background:url(images/galerias.jpg) no-repeat; text-decoration:none; display:block; width:150px; height:40px; border: 0; }
.galerias a:hover {background-position:bottom; background-image:url(images/galerias_over.jpg); border: 0; }
.servicios a{background:url(images/servicios.jpg) no-repeat; text-decoration:none; display:block; width:159px; height:40px; border: 0; }
.servicios a:hover {background-position:bottom; background-image:url(images/servicios_over.jpg); border: 0; }
.mapa a{background:url(images/mapa.jpg) no-repeat; text-decoration:none; display:block; width:142px; height:40px; border: 0; }
.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

willyfc · #2 (**permalink**) 21/10/2009, 21:18

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<!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</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
*{margin:0; padding:0; border:0; outline:0;}
#barra {float:left; width:100%;}
#barra li{ list-style:none; float:left;}
.inicio a{background:url(images/inicio.jpg) no-repeat; text-decoration:none; display:block; width:116px; height:40px;}
.inicio a:hover {background-position:bottom; background-image:url(images/inicio_over.jpg);}
.galerias a{background:url(images/galerias.jpg) no-repeat; text-decoration:none; display:block; width:150px; height:40px;}
.galerias a:hover {background-position:bottom; background-image:url(images/galerias_over.jpg);}
.servicios a{background:url(images/servicios.jpg) no-repeat; text-decoration:none; display:block; width:159px; height:40px;}
.servicios a:hover {background-position:bottom; background-image:url(images/servicios_over.jpg); border: 0; }
.mapa a{background:url(images/mapa.jpg) no-repeat; text-decoration:none; display:block; width:142px; height:40px;}
.mapa a:hover {background-position:bottom; background-image:url(images/mapa_over.jpg);}
</style>
</head>
<body>
<ul id="barra">
   <li><img src="images/relleno.jpg" /></li>
  <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>
</ul>
</body>
</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

Cecilia_Cristina · #3 (**permalink**) 22/10/2009, 03:02

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