Foros del Web » Creando para Internet » HTML »

espacio entre imagenes

Estas en el tema de espacio entre imagenes en el foro de HTML en Foros del Web. hola el problema q tengo es el siguiente, necesito poner una imagen debajo del menu, y por alguna razon me queda un espacio en blanco ...
  #1 (permalink)  
Antiguo 05/11/2008, 09:57
Avatar de sanchy  
Fecha de Ingreso: octubre-2008
Mensajes: 389
Antigüedad: 9 años, 1 mes
Puntos: 9
espacio entre imagenes

hola el problema q tengo es el siguiente, necesito poner una imagen debajo del menu, y por alguna razon me queda un espacio en blanco entre las imagenes. probe todo lo que pude y nada funciona.

no encuentr ningun margin o padding que este molestando ni nada... aca les dejo una foto, la franja negra es la imagen de la q hablo, y tendria q ir pegada al menu en ves de tener ese espacio en blanco



y aca les dejo el codigo
lo que esta marcado en rojo es la imagen que me queda mal posicionada
lo primero es el codigo del menu, y lo segundo es el css del menu

Código:
<div id="menu" align="center"><ul>
  <li><img src="images/menu-left.png" alt="" style="margin:0px; padding:0px" /></li>
  <li class="nivel1"><a href="index.html" onmouseover="act('one')" onmouseout="inact('one')" class="nivel1"><img src="images/home.jpg" name="one" border="0" alt="" /></a> 
	
  </li> 
  <li class="nivel1"><a href="#" class="nivel1" onmouseover="act('two');act2('two')" onmouseout="inact('two')"><img src="images/musica.jpg" name="two" border="0" alt=""/></a> 
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 2<table class="falsa"><tr><td><![endif]--> 
	<ul class="dos"> 
		<li><a href="#" class="nivel1" onmouseover="act('two')" onmouseout="inact('two')"><img src="images/musica-1.png" alt=""/></a></li> 
		<li><a href="#" class="nivel1" onmouseover="act('two')" onmouseout="inact('two')"><img src="images/musica-2.png" alt=""/></a></li> 
		<li><a href="#" class="nivel1" onmouseover="act('two')" onmouseout="inact('two')"><img src="images/musica-3.png" alt=""/></a></li> 
		<li><a href="#" class="nivel1" onmouseover="act('two')" onmouseout="inact('two')"><img src="images/musica-4.png" alt=""/></a></li> 
		<li><a href="#" class="nivel1" onmouseover="act('two')" onmouseout="inact('two')"><img src="images/musica-5.png" alt=""/></a></li> 
	</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
  <li class="nivel1"><a href="#" class="nivel1" onmouseover="act('three')" onmouseout="inact('three')"><img src="images/cine.jpg" name="three" border="0" alt=""/></a> 
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 3<table class="falsa"><tr><td><![endif]--> 
	<ul class="tres"> 
		<li><a href="#" class="nivel1" onmouseover="act('three')" onmouseout="inact('three')"><img src="images/cine-1.png" alt=""/></a></li> 
		<li><a href="#" class="nivel1" onmouseover="act('three')" onmouseout="inact('three')"><img src="images/cine-2.png" alt=""/></a></li> 
		<li><a href="#" class="nivel1" onmouseover="act('three')" onmouseout="inact('three')"><img src="images/cine-3.png" alt=""/></a></li>
        <li><a href="#" class="nivel1" onmouseover="act('three')" onmouseout="inact('three')"><img src="images/cine-4.png" alt=""/></a></li> 
        <li><a href="#" class="nivel1" onmouseover="act('three')" onmouseout="inact('three')"><img src="images/cine-5.png" alt=""/></a></li>  
	</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
  <li class="nivel1"><a href="#" class="nivel1" onmouseover="act('four')" onmouseout="inact('four')"><img src="images/moda.jpg" name="four" border="0" alt=""/></a> 
</li> 
  <li class="nivel1"><a href="#" class="nivel1" onmouseover="act('five')" onmouseout="inact('five')"><img src="images/arte.jpg" name="five" border="0" alt=""/></a> 
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]--> 
	<ul class="cinco"> 
		<li><a href="#" class="nivel1" onmouseover="act('five')" onmouseout="inact('five')"><img src="images/arte-1.png" alt=""/></a></li> 
		<li><a href="#" class="nivel1" onmouseover="act('five')" onmouseout="inact('five')"><img src="images/arte-2.png" alt=""/></a></li> 
		<li><a href="#" class="nivel1" onmouseover="act('five')" onmouseout="inact('five')"><img src="images/arte-3.png" alt=""/></a></li> 
	</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li>
<li class="nivel1"><a href="#" class="nivel1" onmouseover="act('six')" onmouseout="inact('six')"><img src="images/galeria.jpg" name="six" border="0" alt=""/></a> 
</li>
<li class="nivel1"><a href="#" class="nivel1" onmouseover="act('seven')" onmouseout="inact('seven')"><img src="images/foro.jpg" name="seven" border="0" alt=""/></a> 
</li>  
<li class="nivel1"><a href="#" class="nivel1" onmouseover="act('eight')" onmouseout="inact('eight')"><img src="images/contacto.jpg" name="eight" border="0" alt=""/></a> 
</li>
<li><img src="images/menu-right.jpg" alt="" style="padding-left:1px; padding-bottom:0px; margin-bottom:0px"/></li><li><img src="images/submenu-home.jpg" style="margin-top:0px" alt=""/><img src="images/flags.jpg" alt="" usemap="#flags" border="0"/>
     </li>
</ul>

</div>
Código:
* { margin: 0px;
padding: 0px; outline: 0;
}

#menu {  

width: 100%px;
position: relative;
margin-bottom:0px;
}
#menu ul { 
list-style-type: none;
}

#menu ul li.nivel1 { 
float: left;
width: 111px;
position: relative;
}
#menu ul li { 
float: left;
}

#menu ul li a { 
background-image:url(images/submenu-bg.png);
display: block;
text-decoration: none;
position: relative;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {
color: #000;
position: relative;
}
#menu ul li a.nivel1 {
display: block!important;
display: none;
}
#menu ul li ul {
display: none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {
display: block;
position: absolute;
width: 816px;
}
#menu ul li ul li a {
width: auto;
}
#menu ul li ul li a:hover {
position: relative;
}
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}
ul.uno {left: -32px;}
ul.dos {left: -143px;}
ul.tres {left: -255px;}
ul.cuatro {left: -32px;}
ul.cinco {left: -146px;} 
  #2 (permalink)  
Antiguo 06/11/2008, 02:37
Avatar de sanchy  
Fecha de Ingreso: octubre-2008
Mensajes: 389
Antigüedad: 9 años, 1 mes
Puntos: 9
Respuesta: espacio entre imagenes

lo arregle achicando la imagen y poniendo ese gris de fondo para simularla

pero no es lo q quiero, si alguien me puede ayudar a arrelgar esto mejor
  #3 (permalink)  
Antiguo 06/11/2008, 04:53
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: espacio entre imagenes

Con que lo estas viendo con IE o con FF y qué versión?

Aresillo!!
  #4 (permalink)  
Antiguo 06/11/2008, 07:04
Avatar de Null_  
Fecha de Ingreso: octubre-2008
Ubicación: Santiago
Mensajes: 530
Antigüedad: 9 años, 1 mes
Puntos: 30
Respuesta: espacio entre imagenes

prueba poniendole la propiedad vertical-align:bottom; a la imagen y me dices si te funciona, no tengo tiempo para probarlo ahora...

suerte
  #5 (permalink)  
Antiguo 06/11/2008, 08:15
Avatar de sanchy  
Fecha de Ingreso: octubre-2008
Mensajes: 389
Antigüedad: 9 años, 1 mes
Puntos: 9
Respuesta: espacio entre imagenes

Cita:
Iniciado por Null_ Ver Mensaje
prueba poniendole la propiedad vertical-align:bottom; a la imagen y me dices si te funciona, no tengo tiempo para probarlo ahora...

suerte
no funciona, gracias por la sugerencia

Cita:
Iniciado por Aresillo Ver Mensaje
Con que lo estas viendo con IE o con FF y qué versión?

Aresillo!!
con chrome, IE y FF.... perdona si suena mal la pregunta pero, que importa con que lo estoy viendo? la gracia es q se vea bien en todos los exploradores
  #6 (permalink)  
Antiguo 06/11/2008, 17:46
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: espacio entre imagenes

¿Tienes eso en línea para poder verlo? es que sin ver las imágenes es difícil, además de que no acabo de entender la consulta: dices que es la franja negra que está separada del menú, luego dices que es lo que señalas en rojo en tu código, pero lo que señalas está dentro de dos "li". ¿Cómo iba a estar la franja negra dentro de un "li" del mismo menú?

Yo no lo entiendo.

Y la pregunta de en que navegador lo estás viendo supongo que es para saber si ocurre lo mismo en todos o sólo en alguno.
__________________
Visita mi nueva web idplus.org

Última edición por Mikmoro; 06/11/2008 a las 17:54
  #7 (permalink)  
Antiguo 07/11/2008, 00:52
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: espacio entre imagenes

Efectivamente, lo decía porque si era IE6 podía tener algo que ver con una cosa que me explicó Mikmoro recientemente. Si lo ves así en varios el problema cambia, porque no es sólo cosa de explorer...

Aresillo!!
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 18:59.