Espacio entre imagenes

Gabrielucha · #1 (**permalink**) 07/09/2007, 11:01

gente... ayuda otra vez...

Necesito resolver esto:

ubicar 2 imagenes contiguas verticalmente.. (que queden como pegadas...)

Ubique cada una en un div (uno debajo del otro) . Ahora bien, en mi estacion de trabajo funciona ok (lo probe con IE7 y Firefox) Pero en otras NO, deja un espacio pequenio entre ellas. Sospecho que puede ser algun valor por defecto. Pero es solo eso ..una sospecha.
Gracias 10000000

Gabi.

Ricky77 · #2 (**permalink**) 07/09/2007, 11:03

Peganos el código de esos divs y la parte correspondiente de la CSS

Gabrielucha · #3 (**permalink**) 07/09/2007, 12:21

Aqui se los mando...
Muchas gracias..!
<body>
<div id="outer">
<div id="header">
<div id="header-top"> </div>
<img src="imagenes/fotocentral.gif" />
</div>
<div style="clear: both"></div>

<div id="centro">
<div id="centro-izq">

<img src="imagenes/logo-blanco.gif" hspace="16" />
</p>
</div>
<div id="centro-der">
<div id="centro-der-01">
<br />
<h1> <span class="margen-10"><a href="index.html">Home</a></span>
<span class="margen-10">Instalaciones</span>
<span class="margen-10">Servicios</span>
<span class="margen-10">Servicio de Playa</span>
<span class="margen-10">Tarifas Galería</span>
<span class="margen-10">Contacto</span>
</h1>
</p>
</div>
<div id="centro-der-02">
<div id="texto">
<h2>bienvenido ... </h2>
<br /> <br />
<p>Al pasar por La Paloma no deje de visitar el <span class="bold">Hotel Portobello</span>, punto de referencia obligado cuando usted toma la desición de tomar vacaciones en Uruguay
<br /> <br />
El <span class="bold">Hotel Portobello</span> con 57 habitaciones practicamente sobre el mar, es un hotel de ambiente familiar atendido por sus dueños, quienes se esmeran día a día por mejorar sus vacaciones de verano. </p>
</div>
</div>
</div>

</div>

<div id="pie">j </div>

</div>
</div>
</body>
</html>
------------------------------------------------------------------------------------------------------

/* CSS Document */

* {
text-align: left;
margin:0px;
padding:0px;
border:0px;

}

p {
font-family: Tahoma;
font-size:12px;
color: #ffffff;
margin-left: 5px;
text-align: justify;
line-height: 20px;
}

h1 {
font-family: Tahoma;
font-size:11px;
font-weight: normal;
line-height: 10px;
}
h2 {
font-family: Tahoma;
font-size:25px;
font-weight: normal;
color:#ffffff;
margin-left: 5px;
}
a {
color:#000099;
text-decoration: none;
}
a:hover { color:#ffffff;
}

/* CSS Document */

#outer
{
width:100%;
height:800px;
margin-left: -10px;
background:url(imagenes/flor-derecha.gif) no-repeat top right;
background-color: #5FB0D0;
}
#header
{
width:100%;
height:320px;
background:url(imagenes/flor-derecha.gif) no-repeat top right;
}
#header-top
{
height:19px;
}
#header-bot
{
height:301px;
}

#centro
{
height:330px;
width:100%;

}
#centro-izq
{
height:330px;
width:280px;
float: left;
letter-spacing:0px;

}
#centro-der
{
height:330px;
width:600px;
float: left;
}
#centro-der-01
{
height:80px;
width:600px;
float: left;
}
#centro-der-02
{
height:250px;
width:600px;
float: left;
}
#texto
{
width:400px;
}

#pie
{
width:100%;
height:150px;
background:url(imagenes/pie.gif) no-repeat;
background-color: #5FB0D0;
}

/* ------------- zona de clases .... ----------------- */

.margen-10
{
margin-left:8px;
}

.bold
{
font-weight:bold;

}

birkin72 · #4 (**permalink**) 07/09/2007, 13:10

Que onda mmmm en lo personal la etiqueta <div> es medio latosa y como veo q la pagina que intentas hacer no es un menu o algo por el estilo q es donde he visto mas el uso de la etiqueta div yo en tu lugar usaria tablas y asi quedarian las imagenes pegaditas o ps pon una tabla dentro de un div (en el codigo no lo puse la tabla dentro de un div pero supongo q jalaria dentro de un div

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<table style="border-collapse:collapse" >
<tr><td style="padding:0px"><img src="09-09-06_2355.jpg" /></td></tr>
<tr><td style="padding:0px"><img src="resident.jpg" /></td></tr>
</table>
</body>
</html>

chem · #5 (**permalink**) 08/09/2007, 21:35

Hola, he probado el código con dos imagenes mias de dimensiones pequeñas en Firefox y no me salen pegadas, de hecho habrá unos 400px entre cada una de ellas.
Si tienes las imagenes subidas a un servidor podrias pasarme las URL para hacer pruebas y ver que te está ocurriendo.

Un saludo!

AlexCollado · #6 (**permalink**) 09/09/2007, 13:23

Hola a todos,

A mi me pasa exactamente =...pero yo no lo hago con capas, sino con una tabla. En una fila tengo una imagen y en la siguiente quiero poner la otra sin que haya ningun hueco entre ambas.

La tabla usa una clase que tiene como atributos cellpading=0 border=0 cellspacing=0 y nada, en mozilla perfecto, pero en IE5 na de na... :( y no se a q es debido... esto es un come cabezas mu durooooo

A ver si me pudierais decir algo al respecto

Muchas gracias.

birkin72 · #7 (**permalink**) 17/09/2007, 10:24

Extraño a mi si me funciona el codigo tanto en firefox como en Ie6

cruzz · #8 (**permalink**) 19/03/2009, 14:08

Hola a todos

un mensaje super viejo.. pero kisas mi respuesta sirva a alguien

yo solucione este problema para IE6 y IE7 basicamente con este lineas

el display: block es opcional en mi caso.. pero los otros 3 fueron los ke me dieron la respuesta

display:block;
border:none;

font-size:0; /*for eliminate space between images*/
letter-spacing:-1px;

Sdsl

JavierB · #9 (**permalink**) 20/03/2009, 08:47

El mensaje original es de hace más de un año. Por favor, no reviváis temas tan antiguos.

Saludos,