Foros del Web » Creando para Internet » CSS »

Centrar tabla CSS urgent!

Estas en el tema de Centrar tabla CSS urgent! en el foro de CSS en Foros del Web. Bunenas! La hago rápida y cortita. Trabajo con mailings que transformo en CSS y HTML con el Photoshop. El problema es que el código generado ...
  #1 (permalink)  
Antiguo 28/07/2011, 12:23
Avatar de valentina4you
Colaborador
 
Fecha de Ingreso: agosto-2010
Ubicación: Montevideo
Mensajes: 1.623
Antigüedad: 13 años, 8 meses
Puntos: 285
Centrar tabla CSS urgent!

Bunenas!

La hago rápida y cortita.
Trabajo con mailings que transformo en CSS y HTML con el Photoshop. El problema es que el código generado me posiciona la tabla a la izquierda, lo que yo necesito que la tabla quede al centro. Hace rato que estoy probando lo del text-align margin, etc, pero nada funciona.

Aquí dejo el código.
En negrita coloqué lo que estuve modificando, siempre la tabla_01 que es al que contiene a todo el resto.

Código:
<html>
<head>
<title>promo_panda</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- ImageReady Styles (promo_panda.psd) -->
<style type="text/css">
<!--

#Tabla_01 {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:1000px;
	text-align: center;


}

#panda-01 {
	position:absolute;
	left:0px;
	top:0px;
	width:900px;
	height:83px;
}

#panda-02 {
	position:absolute;
	left:0px;
	top:83px;
	width:900px;
	height:234px;
}

#panda-03 {
	position:absolute;
	left:0px;
	top:317px;
	width:900px;
	height:367px;
}

#panda-04 {
	position:absolute;
	left:0px;
	top:684px;
	width:900px;
	height:304px;
}

#panda-05 {
	position:absolute;
	left:0px;
	top:988px;
	width:900px;
	height:1px;
}

-->
</style>
<!-- End ImageReady Styles -->
</head>
<body style="background-color:#FFFFFF;">
<!-- ImageReady Slices (promo_panda.psd) -->
<div id="Tabla_01">
	<div id="panda-01">
		<img src="images/panda_01.gif" width="900" height="83" alt="" />
	</div>
	<div id="panda-02">
		<img src="images/panda_02.gif" width="900" height="234" alt="" />
	</div>
	<div id="panda-03">
		<img src="images/panda_03.gif" width="900" height="367" alt="" />
	</div>
	<div id="panda-04">
		<img src="images/panda_04.gif" width="900" height="304" alt="" />
	</div>
	<div id="panda-05">
	  <p align="center">Si no puede ver este mail por favor haga <a href="#">click aqu&iacute;</a></p>
	  <p>&nbsp;</p>
	</div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>
Tengo que hacer el mailing para hoy por lo que agradezco cualquier ayuda que puedan brindarme.

Gracias!
__________________
Diseño Gráfico Profesional
www.valenn.com | Sigueme @valenncom | facebook/valenncom
  #2 (permalink)  
Antiguo 28/07/2011, 12:44
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 2 meses
Puntos: 306
Respuesta: Centrar tabla CSS urgent!

Hola
Código CSS:
Ver original
  1. #Tabla_01 {
  2.     position:absolute;
  3.     left:0px;
  4.     top:0px;
  5.     width:100%;
  6.     height:1000px;
  7.     text-align: center;
  8.  
  9.  
  10. }
Con esto le estas diciendo que se posicione en el vertice superior izquierdo de la pantalla, por lo tanto cambia esa position: absolute por una :relative, y quita left y top.
Añade margin: 0 auto, siendo el primer numero el margen superior e inferior y siendo auto (o lo que quieras) el margen izquierdo y derecho.


Código CSS:
Ver original
  1. Tabla_01 {
  2.     position:relative;
  3.     margin: 0 auto;
  4.     width:100%;
  5.     height:1000px;
  6. }

El position: relative es necesario para que los elementos con posicion absoluta dentro de este contenedor se posicionen con respecto a su vetice sup-izq, y no al vertice superior-izquierdo de la pantalla.
Para que tengas el cuenta el porque:
http://www.librosweb.es/css/capitulo..._absoluto.html
Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #3 (permalink)  
Antiguo 28/07/2011, 12:47
Avatar de andresdzphp
Colaborador
 
Fecha de Ingreso: julio-2011
Ubicación: $this->Colombia;
Mensajes: 2.749
Antigüedad: 12 años, 8 meses
Puntos: 793
Respuesta: Centrar tabla CSS urgent!

Aquí te dejo este código pruebalo.

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>promo_panda</title>
  5. <!-- ImageReady Styles (promo_panda.psd) -->
  6. <style type="text/css">
  7. <!--
  8.  
  9. #Tabla_01 {
  10.    position:relative;
  11.    height: 1200px;
  12.    width: 900px;
  13.    margin: 0px auto 0px auto;
  14.    text-align: center; /* Para resolver problemas de centrado con I.E 5 */
  15. }
  16.  
  17. #panda-01 {
  18.    position:absolute;
  19.    left:0px;
  20.    top:0px;
  21.    width:900px;
  22.    height:83px;
  23.    text-align: left;
  24. }
  25.  
  26. #panda-02 {
  27.    position:absolute;
  28.    left:0px;
  29.    top:83px;
  30.    width:900px;
  31.    height:234px;
  32.    text-align: left;
  33. }
  34.  
  35. #panda-03 {
  36.    position:absolute;
  37.    left:0px;
  38.    top:317px;
  39.    width:900px;
  40.    height:367px;
  41.    text-align: left;
  42. }
  43.  
  44. #panda-04 {
  45.    position:absolute;
  46.    left:0px;
  47.    top:684px;
  48.    width:900px;
  49.    height:304px;
  50.    text-align: left;
  51. }
  52.  
  53. #panda-05 {
  54.    position:absolute;
  55.    left:0px;
  56.    top:988px;
  57.    width:900px;
  58.    height:1px;
  59.    text-align: left;
  60. }
  61.  
  62. -->
  63. <!-- End ImageReady Styles -->
  64. </head>
  65. <body style="background-color:#FFFFFF;">
  66. <!-- ImageReady Slices (promo_panda.psd) -->
  67. <div id="Tabla_01">
  68.     <div id="panda-01">
  69.         <img src="images/panda_01.gif" width="900" height="83" alt="" />
  70.     </div>
  71.     <div id="panda-02">
  72.         <img src="images/panda_02.gif" width="900" height="234" alt="" />
  73.     </div>
  74.     <div id="panda-03">
  75.         <img src="images/panda_03.gif" width="900" height="367" alt="" />
  76.     </div>
  77.     <div id="panda-04">
  78.         <img src="images/panda_04.gif" width="900" height="304" alt="" />
  79.     </div>
  80.     <div id="panda-05">
  81.       <p align="center">Si no puede ver este mail por favor haga <a href="#">click aqu&iacute;</a></p>
  82.       <p>&nbsp;</p>
  83.     </div>
  84. </div>
  85. <!-- End ImageReady Slices -->
  86. </body>
  87. </html>

No olvides colocar

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

o sino tendrás problemas con el bendito Internet Explorer

Saludos
__________________
Si sabemos como leer e interpretar el manual será mucho más fácil aprender PHP. En lugar de confiar en ejemplos o copiar y pegar - PHP

Última edición por andresdzphp; 28/07/2011 a las 13:14 Razón: Resolviendo problema con Internet Explorer
  #4 (permalink)  
Antiguo 28/07/2011, 13:37
Avatar de valentina4you
Colaborador
 
Fecha de Ingreso: agosto-2010
Ubicación: Montevideo
Mensajes: 1.623
Antigüedad: 13 años, 8 meses
Puntos: 285
Respuesta: Centrar tabla CSS urgent!

C2am
Intenté con tu solución pero no pude.
Igual gracias por el tip de absoluto y relativo, no lo sabía. He aprendido algo nuevo.

andresdzphp
No sabes cuánto te agradezco. Hace horas que estoy en busca de centrar la maldita tabla. Pude hacero modificando como lo dijiste tu:


#Tabla_01 {
position:relative;
height: 1200px;
width: 900px;
margin: 0px auto 0px auto;
text-align: center;
/* Para resolver problemas de centrado con I.E 5 */
}

Ya ven: http://mlg.fastimport.cl/promos/panda.html
Quedó bien
Millones de gracias
__________________
Diseño Gráfico Profesional
www.valenn.com | Sigueme @valenncom | facebook/valenncom

Última edición por valentina4you; 28/07/2011 a las 13:43
  #5 (permalink)  
Antiguo 28/07/2011, 13:43
Avatar de andresdzphp
Colaborador
 
Fecha de Ingreso: julio-2011
Ubicación: $this->Colombia;
Mensajes: 2.749
Antigüedad: 12 años, 8 meses
Puntos: 793
Respuesta: Centrar tabla CSS urgent!

Cita:
Iniciado por valentina4you Ver Mensaje
C2am
Intenté con tu solución pero no pude.

andresdzphp
No sabes cuánto te agradezco. Hace horas que estoy en busca de centrar la maldita tabla. Pude hacero modificando como lo dijiste tu:


#Tabla_01 {
position:relative;
height: 1200px;
width: 900px;
margin: 0px auto 0px auto;
text-align: center;
/* Para resolver problemas de centrado con I.E 5 */
}

Ya ven: [url]http://mlg.fastimport.cl/promos/panda.html[/url]
Quedó bien
Millones de gracias

No te funciona en Internet Explorer 9. Olvidaste la recomendación que te hice

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
__________________
Si sabemos como leer e interpretar el manual será mucho más fácil aprender PHP. En lugar de confiar en ejemplos o copiar y pegar - PHP
  #6 (permalink)  
Antiguo 28/07/2011, 13:46
Avatar de valentina4you
Colaborador
 
Fecha de Ingreso: agosto-2010
Ubicación: Montevideo
Mensajes: 1.623
Antigüedad: 13 años, 8 meses
Puntos: 285
Respuesta: Centrar tabla CSS urgent!

Tienes razón, no me funciona en IE.
Te referías a esto?

Cita:
<!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=utf-8" />
__________________
Diseño Gráfico Profesional
www.valenn.com | Sigueme @valenncom | facebook/valenncom
  #7 (permalink)  
Antiguo 28/07/2011, 13:46
Avatar de andresdzphp
Colaborador
 
Fecha de Ingreso: julio-2011
Ubicación: $this->Colombia;
Mensajes: 2.749
Antigüedad: 12 años, 8 meses
Puntos: 793
Respuesta: Centrar tabla CSS urgent!

Cita:
Iniciado por valentina4you Ver Mensaje
Tienes razón, no me funciona en IE.
Te referías a esto?
Así es, necesitas colocar el DOCTYPE.

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
__________________
Si sabemos como leer e interpretar el manual será mucho más fácil aprender PHP. En lugar de confiar en ejemplos o copiar y pegar - PHP

Última edición por andresdzphp; 28/07/2011 a las 13:55
  #8 (permalink)  
Antiguo 28/07/2011, 14:08
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: Centrar tabla CSS urgent!

Correcto @andresdzphp, de todas maneras un par de sugerencias:

Pasar siempre un Doctype, IE no es adivino. Y principalmente simplificar el código, muchos divs y posicionamientos innecesarios.

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <title>promo_panda</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <style type="text/css">
  7. <!--
  8. body {
  9. text-align: center;
  10. background-color: #FFF;
  11. }
  12. #Tabla_01 {
  13. height: auto;
  14. width: 900px;
  15. text-align: center;
  16. margin: 0px auto;
  17. }
  18. img {
  19. display: block;
  20. margin: 0px;
  21. padding: 0px;
  22. border: none;
  23. }
  24. -->
  25. </head>
  26. <div id="Tabla_01">
  27. <img src="http://mlg.fastimport.cl/promos/images/panda_01.gif" width="900" height="83" alt="" />
  28. <img src="http://mlg.fastimport.cl/promos/images/panda_02.gif" width="900" height="234" alt="" />
  29. <img src="http://mlg.fastimport.cl/promos/images/panda_03.gif" width="900" height="367" alt="" />
  30. <img src="http://mlg.fastimport.cl/promos/images/panda_04.gif" width="900" height="304" alt="" />
  31. <br />
  32. Si no puede ver este mail por favor haga <a href="http://mlg.fastimport.cl/promos/panda.html">click aqu&iacute;</a>
  33. </div>
  34. </body>
  35. </html>
Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #9 (permalink)  
Antiguo 28/07/2011, 14:44
Avatar de valentina4you
Colaborador
 
Fecha de Ingreso: agosto-2010
Ubicación: Montevideo
Mensajes: 1.623
Antigüedad: 13 años, 8 meses
Puntos: 285
Respuesta: Centrar tabla CSS urgent!

Muchas gracias!
http://mlg.fastimport.cl/promos/panda.html

Ha quedado! En IE también funciona ahora.
No se nada de lenguajes y programaciones, simplemente meto mano para emprolijar algunas cosas como estas y que queden al menos centradas.

(PD: Si alguien entra a mi web y me dices "pero vendes diseño web" Yo hago los diseños y luego contrato a un programador XD así que no tiene que ver)
__________________
Diseño Gráfico Profesional
www.valenn.com | Sigueme @valenncom | facebook/valenncom
  #10 (permalink)  
Antiguo 28/07/2011, 14:57
Avatar de andresdzphp
Colaborador
 
Fecha de Ingreso: julio-2011
Ubicación: $this->Colombia;
Mensajes: 2.749
Antigüedad: 12 años, 8 meses
Puntos: 793
Respuesta: Centrar tabla CSS urgent!

Cita:
Iniciado por valentina4you Ver Mensaje
Muchas gracias!
[url]http://mlg.fastimport.cl/promos/panda.html[/url]

Ha quedado! En IE también funciona ahora.
No se nada de lenguajes y programaciones, simplemente meto mano para emprolijar algunas cosas como estas y que queden al menos centradas.

(PD: Si alguien entra a mi web y me dices "pero vendes diseño web" Yo hago los diseños y luego contrato a un programador XD así que no tiene que ver)
Si lo mismo pensé por eso no quise complicarte la vida, ya si se ve bien
__________________
Si sabemos como leer e interpretar el manual será mucho más fácil aprender PHP. En lugar de confiar en ejemplos o copiar y pegar - PHP
  #11 (permalink)  
Antiguo 29/07/2011, 09:38
Avatar de valentina4you
Colaborador
 
Fecha de Ingreso: agosto-2010
Ubicación: Montevideo
Mensajes: 1.623
Antigüedad: 13 años, 8 meses
Puntos: 285
Respuesta: Centrar tabla CSS urgent!

Muchas gracias! :D
Se las super debo jeje.
__________________
Diseño Gráfico Profesional
www.valenn.com | Sigueme @valenncom | facebook/valenncom

Etiquetas: tablas
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 06:41.