Foros del Web » Creando para Internet » HTML »

Espacio entre div's

Estas en el tema de Espacio entre div's en el foro de HTML en Foros del Web. Hola Compañeros, estuve buscando un tema que hablara de esto pero no lo encontre, así que decidí postearlo. Tengo 3 imagenes que deseo desplegarlas en ...
  #1 (permalink)  
Antiguo 04/06/2008, 14:56
Avatar de the_web_saint  
Fecha de Ingreso: mayo-2008
Ubicación: localhost/tierra/america/panama
Mensajes: 1.229
Antigüedad: 9 años, 7 meses
Puntos: 43
Pregunta Espacio entre div's

Hola Compañeros, estuve buscando un tema que hablara de esto pero no lo encontre, así que decidí postearlo.

Tengo 3 imagenes que deseo desplegarlas en div, pero quiero que se visualicen sin ningun espacio entre ellas, en firefox y opera se ve excelente, en IE(como de costumbre) no, me deja un pequeño espacio entre cada div y no encuentro la razón.

La estructura de la página es la siguiente:
Cita:
<div id="centro_index">
<DIV id="top_centro"></DIV>
<div id="form_centro">
<div id="imagen_centro"></div>
</div>
<div id="bottom_centro"></div>
</div>
el css que utilizo es el siguiente:

Cita:
#centro_index
{
width:100%;
height:340px;
margin-top:170px;
display:table;
}
#centro_index #top_centro
{
margin:0px;
padding:0px;
border:0px;
height:8px;
background-image:url(../imagenes/top_login.jpg);
background-repeat:no-repeat;
background-position:right;
width:100%;
margin-bottom:0px;
}
#form_centro
{
margin-top:0px;
height:314px;
width:100%;
border:0px;
margin-bottom:0px;
}
#form_centro #imagen_centro
{
margin-top:0px;
margin:0px;
padding:0px;
border:0px;
height:313px;
background-image:url(../imagenes/center_login.jpg);
background-repeat:no-repeat;
background-position:top right;
width:354px;
float:right;
margin-bottom:0px;
}
#centro_index #bottom_centro
{
margin-top:0px;
margin:0px;
padding:0px;
border:0px;
height:8px;
background-image:url(../imagenes/bottom_login.jpg);
background-repeat:no-repeat;
background-position:right;
width:100%;

}
Como podran ver, me he hartado de colocar margin 0px y paddinng 0px, pero sigue igual en IE.
Podran notar que cada div tiene un tamaño especifico en pixeles de altura, esto es exactamente el tamaño de la imagen que contiene.

Muchas Gracias de antemano y espero puedan ayudarme
  #2 (permalink)  
Antiguo 04/06/2008, 15:07
 
Fecha de Ingreso: abril-2008
Mensajes: 264
Antigüedad: 9 años, 7 meses
Puntos: 2
Respuesta: Espacio entre div's

¿El problema es que hay espacio entre los divs o entre las imágenes?(estoy pensando que tienes las tres imágenes en un div)

prueba poniendo esto al comienzo del .css

* { padding:0; margin:0; }


para que le quite los márgenes y paddings por defecto a ver como funciona.
Luego avisa!

Saludos
Guille
  #3 (permalink)  
Antiguo 04/06/2008, 15:08
Avatar de the_web_saint  
Fecha de Ingreso: mayo-2008
Ubicación: localhost/tierra/america/panama
Mensajes: 1.229
Antigüedad: 9 años, 7 meses
Puntos: 43
Sonrisa Respuesta: Espacio entre div's

Bueno ya lo he solucionado, aqui les dejo la modificación:

Cita:
#centro_index
{
width:100%;
height:340px;
margin-top:170px;
display:table;
}
#centro_index #top_centro
{
margin:0px;
padding:0px;
border:0px;
height:8px;
background-image:url(../imagenes/top_login.jpg);
background-repeat:no-repeat;
background-position:bottom right;
width:100%;
margin-bottom:0px;
}
#form_centro
{
margin-top:0px;
height:314px;
width:100%;
border:0px;
margin-bottom:0px;
}
#form_centro #imagen_centro
{
margin-top:0px;
margin:0px;
padding:0px;
border:0px;
height:100%;
background-image:url(../imagenes/center_login.jpg);
background-repeat:no-repeat;
background-position:top right;
width:354px;
float:right;
margin-bottom:0px;
}
#centro_index #bottom_centro
{
margin-top:0px;
margin:0px;
padding:0px;
border:0px;
height:8px;
background-image:url(../imagenes/bottom_login.jpg);
background-repeat:no-repeat;
background-position:top right;
width:100%;

}
basicamente con eso se ve igual en opera, mozilla y IE.

  #4 (permalink)  
Antiguo 04/06/2008, 16:04
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 div's

Es decir, como bien te ha dicho guille_el3, el espcio no estaba entre los divs sino entre las imágenes

Mikel.
  #5 (permalink)  
Antiguo 04/06/2008, 16:13
Avatar de the_web_saint  
Fecha de Ingreso: mayo-2008
Ubicación: localhost/tierra/america/panama
Mensajes: 1.229
Antigüedad: 9 años, 7 meses
Puntos: 43
Respuesta: Espacio entre div's

Hola:
Bueno si, el espacio estaba entre las imagenes jeje.

ahora tengo una pregunta
Como puedo hacer para centar verticalmente una tabla dentro de un div?

Gracias!
  #6 (permalink)  
Antiguo 04/06/2008, 16:18
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 div's

¿Tabla y div tienen tamaños definidos? ¿serán dinámicos? ¿uno sí y el otro no? Hay que procurar ser preciso en las preguntas para conseguir respuestas útiles.

Mikel.
  #7 (permalink)  
Antiguo 04/06/2008, 16:29
Avatar de the_web_saint  
Fecha de Ingreso: mayo-2008
Ubicación: localhost/tierra/america/panama
Mensajes: 1.229
Antigüedad: 9 años, 7 meses
Puntos: 43
Respuesta: Espacio entre div's

Bueno Mikel, la pregunta es que si hay alguna forma de alinear verticalmente una tabla dentro de un div, digamos que el div no es dinamico y posee una altura especifica; mientras que la tabla se genera de forma dinamica. He leido que utilizan una tabla de un solo td para contener la tabla dinamica, y la tabla contenedora le aplican la propiedad vertical-align:middle, pero no es posible hacer algo similar pero con un div como contenedor?
Gracias y disculpa.
  #8 (permalink)  
Antiguo 04/06/2008, 17:08
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 div's

No tengo nada que disculparte: te lo digo porque cuanto más concretes la pregunta mejores repuestas puedes obtener.

Puedes usar el mismo truco haciendo una tabla que ocupe el 100% de alto y de ancho que el div, en ella colocas una única celda con align="middle" y dentro de ese td tu tabla dinámica:

<div id="contenedor">
<table border="0" width="100%" height="100%">
<tr>
<td valign="middle">
<table height="60%" border="1">
<tr>
<td>adjhadgjaj</td>
</tr>
</table>

</td>
</tr>
</table>
</div>

Espero que te sirva.

Mikel.
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:15.