Foros del web, para los que viven de bits

the_web_saint · 04-jun-2008, 13:56

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:

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

guille_el3 · 04-jun-2008, 14:07

¿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

the_web_saint · 04-jun-2008, 14:08

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.

Mikmoro · 04-jun-2008, 15:04

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

Mikel.

the_web_saint · 04-jun-2008, 15:13

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!

Mikmoro · 04-jun-2008, 15:18

¿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.

the_web_saint · 04-jun-2008, 15:29

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.

Mikmoro · 04-jun-2008, 16:08

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.

04-jun-2008, 13:56	#1 (permalink)
the_web_saint Fecha de Ingreso: mayo-2008 Ubicación: localhost/tierra/america/panama Mensajes: 181	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

04-jun-2008, 14:07	#2 (permalink)
guille_el3 Fecha de Ingreso: abril-2008 Mensajes: 225	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

04-jun-2008, 14:08	#3 (permalink)
the_web_saint Fecha de Ingreso: mayo-2008 Ubicación: localhost/tierra/america/panama Mensajes: 181	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.

04-jun-2008, 15:04	#4 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: A tu espalda Mensajes: 3.436	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.

04-jun-2008, 15:13	#5 (permalink)
the_web_saint Fecha de Ingreso: mayo-2008 Ubicación: localhost/tierra/america/panama Mensajes: 181	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!

04-jun-2008, 15:18	#6 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: A tu espalda Mensajes: 3.436	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.

04-jun-2008, 15:29	#7 (permalink)
the_web_saint Fecha de Ingreso: mayo-2008 Ubicación: localhost/tierra/america/panama Mensajes: 181	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.

04-jun-2008, 16:08	#8 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: A tu espalda Mensajes: 3.436	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.

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado