Foros del Web » Creando para Internet » CSS »

Centrar página con CSS

Estas en el tema de Centrar página con CSS en el foro de CSS en Foros del Web. Buenos días, [email protected] foreros ¿Cómo puedo centrar mi página con CSS? Si pongo esto: Código: <style type="text/css"> body {text-align: center;} </style> la centra en I.E. ...

  #1 (permalink)  
Antiguo 29/12/2006, 04:42
Avatar de seoista  
Fecha de Ingreso: septiembre-2003
Ubicación: Pues leyéndote
Mensajes: 1.076
Antigüedad: 14 años, 3 meses
Puntos: 57
Centrar página con CSS

Buenos días, [email protected] foreros

¿Cómo puedo centrar mi página con CSS?

Si pongo esto:
Código:
<style type="text/css">
body {text-align: center;}
</style> 
la centra en I.E. pero "NO" en F.F.

Si pongo esto detrás del <body>:
Código:
<body>
<div align="center">
......
</div>
</body> 
la centra en ambos (I.E. y F.F.)

Pero me gustaría hacerlo con style:
Código:
<style type="text/css">
 {???;}
</style> 
¿Hay alguna manera de hacerlo así?

Gracias.

Saludos .

FELIZ AÑO NUEVO PARA [email protected]
  #2 (permalink)  
Antiguo 29/12/2006, 05:08
Avatar de kazafun  
Fecha de Ingreso: diciembre-2003
Ubicación: Elda
Mensajes: 843
Antigüedad: 14 años
Puntos: 13
Re: Centrar página con CSS

aplicale al body el siguiente selector:

margin: 0px auto;
__________________
MUERTE a Internet Explorer


Mi portfolio de diseño web en Elda
  #3 (permalink)  
Antiguo 29/12/2006, 05:38
Avatar de seoista  
Fecha de Ingreso: septiembre-2003
Ubicación: Pues leyéndote
Mensajes: 1.076
Antigüedad: 14 años, 3 meses
Puntos: 57
Re: Centrar página con CSS

Cita:
Iniciado por kazafun Ver Mensaje
aplicale al body el siguiente selector:

margin: 0px auto;
Lo siento kazafun, pero no me va en F.F.
Código:
<style type="text/css">
body {margin: 0px auto;}
</style>
Desplaza toda la página a la izquierda.

¿Habrá otra solución?

De todas formas muchas gracias por interesarte.

Saludos

FELIZ AÑO NUEVO PARA [email protected]
  #4 (permalink)  
Antiguo 29/12/2006, 05:41
Avatar de Shade  
Fecha de Ingreso: noviembre-2006
Mensajes: 262
Antigüedad: 11 años, 1 mes
Puntos: 1
Re: Centrar página con CSS

La cosa es que debes crear un div que encierre todo el contenido y a ese div ponerle los atributos margin: 0px auto; para que funcione lo que comento kazafun.
  #5 (permalink)  
Antiguo 29/12/2006, 05:48
Avatar de seoista  
Fecha de Ingreso: septiembre-2003
Ubicación: Pues leyéndote
Mensajes: 1.076
Antigüedad: 14 años, 3 meses
Puntos: 57
Re: Centrar página con CSS

Muchas gracias Shade, pero no sé como hacerlo.

¿Me puedes dar una idea?

Saludos

FELIZ AÑO NUEVO PARA [email protected]
  #6 (permalink)  
Antiguo 29/12/2006, 05:57
Avatar de Shade  
Fecha de Ingreso: noviembre-2006
Mensajes: 262
Antigüedad: 11 años, 1 mes
Puntos: 1
Re: Centrar página con CSS

A ver. Si antes tenias:
Código:
<html>
<head>
<style type="text/css">
body {text-align: center;}
</style>
</head>
<body>
..................................
</body>
</html>
Debes cambiarlo a:

Código:
<html>
<head>
<style type="text/css">
#contenido { margin: 0px auto; }
</style>
</head>
<body>
<div id="contenido">
..................................
</div>
</body>
</html>
  #7 (permalink)  
Antiguo 29/12/2006, 06:17
Avatar de seoista  
Fecha de Ingreso: septiembre-2003
Ubicación: Pues leyéndote
Mensajes: 1.076
Antigüedad: 14 años, 3 meses
Puntos: 57
Re: Centrar página con CSS

Cita:
Iniciado por Shade Ver Mensaje

Debes cambiarlo a:

Código:
<html>
<head>
<style type="text/css">
#contenido { margin: 0px auto; }
</style>
</head>
<body>
<div id="contenido">
..................................
</div>
</body>
</html>
No hace caso en F.F., me sigue saliendo toda la página a la izquierda.

Solamente la centra con lo que puse al principio del mensaje:
Código:
<div align="center">
......
</div> 
De todas formas, muchas gracias .
  #8 (permalink)  
Antiguo 29/12/2006, 06:30
Avatar de Shade  
Fecha de Ingreso: noviembre-2006
Mensajes: 262
Antigüedad: 11 años, 1 mes
Puntos: 1
Re: Centrar página con CSS

Código:
<html>
<head>
<style type="text/css">
body {
	text-align:center
}
</style>
</head>
<body>
<div>
..................................
</div>
</body>
</html>
Con FF2 esto me funciona perfecto. Segun tu es lo que hiciste de principio no? Pruebalo, no se.
  #9 (permalink)  
Antiguo 29/12/2006, 06:40
Avatar de seoista  
Fecha de Ingreso: septiembre-2003
Ubicación: Pues leyéndote
Mensajes: 1.076
Antigüedad: 14 años, 3 meses
Puntos: 57
Re: Centrar página con CSS

Yo tengo F.F. 1.5.0.9 y con esta versión no funciona.

De todas formas muchas gracias Shade, te estoy muy agradecido por el interés que te estás tomando.

Saludos
  #10 (permalink)  
Antiguo 29/12/2006, 11:33
 
Fecha de Ingreso: marzo-2004
Mensajes: 44
Antigüedad: 13 años, 8 meses
Puntos: 0
Re: Centrar página con CSS

estoy con el mismo problema :S
  #11 (permalink)  
Antiguo 30/12/2006, 03:20
Avatar de seoista  
Fecha de Ingreso: septiembre-2003
Ubicación: Pues leyéndote
Mensajes: 1.076
Antigüedad: 14 años, 3 meses
Puntos: 57
Re: Centrar página con CSS

Hola Shade, buenos días.
Cita:
Iniciado por Shade Ver Mensaje
Código:
<html>
<head>
<style type="text/css">
body {
	text-align:center
}
</style>
</head>
<body>
<div>
..................................
</div>
</body>
</html>
Con FF2 esto me funciona perfecto. Segun tu es lo que hiciste de principio no? Pruebalo, no se.
He instalado Firefox 2.0 y tampoco me funciona con este style:
Código:
<style type="text/css">
body {text-align: center;}
</style> 
Saludos

P.D.: Saludos también para ti deepBLUEonline. A ver si tenemos suerte y nos iluminan.
  #12 (permalink)  
Antiguo 30/12/2006, 05:22
 
Fecha de Ingreso: julio-2005
Mensajes: 220
Antigüedad: 12 años, 4 meses
Puntos: 0
Re: Centrar página con CSS

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">

<head>
  <title></title>
  <style>
	html{margin:0;padding:0;}
	body{margin:5px 0;padding:0;}
	#contenido{width:750px;border:1px solid #000;margin:auto;}
        p{text-align:center;}

  </style>
</head>

<body>
<div id="contenido">
<p>Contenido centrado</p>
</div>

</body>

</html>
Saludos!!
  #13 (permalink)  
Antiguo 30/12/2006, 07:20
Avatar de seoista  
Fecha de Ingreso: septiembre-2003
Ubicación: Pues leyéndote
Mensajes: 1.076
Antigüedad: 14 años, 3 meses
Puntos: 57
Pregunta Re: Centrar página con CSS

Cita:
Iniciado por GoRaK Ver Mensaje
Código:
<head>
  <title></title>
  <style>
	html{margin:0;padding:0;}
	body{margin:5px 0;padding:0;}
	#contenido{width:750px;border:1px solid #000;margin:auto;}
        p{text-align:center;}

  </style>
</head>

<body>
<div id="contenido">
<p>Contenido centrado</p>
</div>

</body>
No hay manera de que funcione en Firefox (ni en 1.5.0.9, ni en 2.0), GoRaK

Solamente me funciona poniendo esto (entre <body> y </body>):
Código:
<body>
<div align="center">
 Contenido centrado
</div>
</body>
¡Así que lo dejaré así!.

Muchas gracias de todas formas GoRaK.

Saludos .
  #14 (permalink)  
Antiguo 30/12/2006, 10:58
 
Fecha de Ingreso: diciembre-2006
Mensajes: 19
Antigüedad: 11 años
Puntos: 1
Sonrisa Re: Centrar página con CSS

Hola,

Para poder centrar la pagina yo he usado la siguiente instrucción.
esta la coloco al principio de todo el contenido que deseo centrar y al final del contenido cierro el div. por ejemplo:

Código PHP:
<div align="center">
     <
tr>  </tr>
     <
table width="90%"  border="0" cellspacing="0" cellpadding="0">
      <
tr>
           <
td class="a1"><div align="center"></div></td>
           <
td class="a2"><img src="imagenes/izalco.JPG" width="655" height="179"></td>
       </
tr>
</
table>
</
div

Prueba así, espero que te funcione.
  #15 (permalink)  
Antiguo 30/12/2006, 11:39
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Re: Centrar página con CSS

Hola seoista:

El secreto está en poner margin: auto (al menos margin-left y margin-right) y a la vez un doctype válido y se centran las capas en todos los navegadores...

...pero las capas o elementos de bloque se centran con los márgenes (aplícale un borde o un color de fondo para distinguirlo) y los elementos en línea se centran con text-align: centre

Lo curioso es que sin el doctype no funcionan los márgenes auto en explorer...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #16 (permalink)  
Antiguo 31/12/2006, 00:04
Avatar de seoista  
Fecha de Ingreso: septiembre-2003
Ubicación: Pues leyéndote
Mensajes: 1.076
Antigüedad: 14 años, 3 meses
Puntos: 57
Re: Centrar página con CSS

Buenos días caricatos, un saludo.

No me funciona en F.F. el
Código:
body {margin-left: auto; margin-right: auto;} 
El doctype lo tengo así:
Código:
<!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"> 
Y actualmente la página la tengo estructurada más o menos así:
Código:
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
 <div align="center">
... Contenido ...
 </div>
</body>
</html> 
Y centra bien tanto en I.E. cómo en F.F., pero me gustaría centrarla con un CSS para no tener que poner en todas las páginas (que son muchas) el <div align="center">.

Si pongo un .CSS con:
Código:
body {text-align: center;} 
La centra en I.E. pero no me funciona en F.F., que lo pone todo a la izquierda.

[No sé si me habré explicado bien ... ]

¿Cómo lo plantearías tú?

Un saludo y ¡Feliz Año Nuevo!

Última edición por seoista; 31/12/2006 a las 00:11
  #17 (permalink)  
Antiguo 31/12/2006, 00:59
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Re: Centrar página con CSS

Hola:

También te deseo muchas felicidades

Los estilos se los tenías que haber aplicado a la capa...

Verás, como norma general, las capas (divs o cualquier elemento de bloque) ocupan todo el ancho de la página, pero si restringes su anchura, se centran con los márgenes, y los elementos en línea se centran (dentro del bloque en que se encuentren) con text-align...

Si no estás seguro si los elementos son de bloque o en línea, lo puedes forzar con el estilo display (block/inline), pero de hacerlo seguramente perdería el sentido semántico, así que no es recomendable...

Preparé unas líneas:

Código:
<!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">
<html>
<body>
<div style="margin: auto; width: 50%; border: 1px solid gray;">
este texto no se centra pero la capa sí...
</div>
</body>
</htnl>
Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #18 (permalink)  
Antiguo 31/12/2006, 03:36
Avatar de seoista  
Fecha de Ingreso: septiembre-2003
Ubicación: Pues leyéndote
Mensajes: 1.076
Antigüedad: 14 años, 3 meses
Puntos: 57
Re: Centrar página con CSS

Cita:
Iniciado por caricatos Ver Mensaje

Preparé unas líneas:

Código:
<!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">
<html>
<body>
<div style="margin: auto; width: 50%; border: 1px solid gray;">
este texto no se centra pero la capa sí...
</div>
</body>
</html>
Muchisísimas gracias caricatos, ahora sí lo he entendido .

Ha quedado perfecto .

Abrazos
  #19 (permalink)  
Antiguo 31/12/2006, 05:18
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Re: Centrar página con CSS

Hola:

Me alegro de que lo entiendas (a mi también me costó... y aún tengo dudas...)

Saludetes
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #20 (permalink)  
Antiguo 04/01/2007, 17:39
Avatar de Spydis  
Fecha de Ingreso: mayo-2003
Ubicación: Donosti
Mensajes: 90
Antigüedad: 14 años, 6 meses
Puntos: 1
Re: Centrar página con CSS

Yo de esa forma lo entiendo, cuando tienes una capa es facil alinearla mediante el margin auto, pero si dentro de esa capa tienes más capas, como hay que estructurarlo?
Tengo una web con 800px de ancho y centrada. La pagina consta de 3 partes, header, centro y footer.
Header-> cabecera
Centro-> centro con 7 columnas (4 tienen poco ancho solo decorativo y las otras tres son las columnas funcionales donde va el contenido)
Footer-> pie de pagina
Mi intencion era la de convertir mi web (realizada completamente con tablas) a capas con la ayuda de css (mas php), pero tengo problemas de estructuracion, aqui os dejo el HTML y el CSS para ver si me podeis ayudar.

HTML
Código HTML:
<body>
<div id="block"><?php include("header.php"); ?></div>
<div id="container">
    <div id="fondoa">&nbsp;</div>
    <div id="fondob"><?php include("contenido.php"); ?></div>
    <div id="fondoc">&nbsp;</div>
    <div id="fondod"><?php include ("secciones.php"); ?></div>
    <div id="fondoe">&nbsp;</div>
    <div id="fondof"><?php include("contenido2.php"); ?></div>
    <div id="fondog">&nbsp;</div>
</div>
<div id="block"><?php include("footer.php"); ?></div>
</body> 

CSS
Código:
body {
	background: #2F476B url(/images/fondo_rayado.jpg);
	color: #000000;
	text-align: center;
	margin: 0px;
}

#block {
    margin: 0px auto 0px auto;
	padding: 0px;
	width: 800px;
}
#container {
 	background: url(/images/fondo.gif);
        margin: 0px auto 0px auto;
	padding: 0px;
	width: 800px;
	text-align: center;
}
#fondoa {
	width: 7px;

}
#fondob {
	width: 142px;

}
#fondoc {
	width: 5px;

}
#fondod {
	width: 492px;

}
#fondoe {
	width: 5px;

}
#fondof {
	width: 142px;

}
#fondog {
	width: 7px;

}
De que forma puedo conseguir que fondo (fondoa,fondob....) quede centrado una columna detras de otra?
pensaba que con emplear el container se alinearía, pero soy algo nuevo en esto de CSS y digamos que la alinacion es mas complicada que en tablas xD, he probado tambien con el float y posicionandolo con absolute pero al estar en el centro no le puedo dar valores por los problemas de resolucion de pantalla y por los navegadores...
Espero haberme explicado bien, Salu2!

Última edición por Spydis; 04/01/2007 a las 17:48
  #21 (permalink)  
Antiguo 11/01/2007, 11:25
Avatar de Spydis  
Fecha de Ingreso: mayo-2003
Ubicación: Donosti
Mensajes: 90
Antigüedad: 14 años, 6 meses
Puntos: 1
Re: Centrar página con CSS

nadie tiene algunda idea?
  #22 (permalink)  
Antiguo 11/01/2007, 11:30
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Re: Centrar página con CSS

yo probé esto en FF2 y anda perfectamente

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">

<head>
<title></title>
<style>
html{margin:0;padding:0;}
body{margin:5px 0;padding:0;}
#contenido{width:750px;border:1px solid #000;margin:auto;}
p{text-align:center;}

</style>
</head>

<body>
<div id="contenido">
<p>Contenido centrado</p>
</div>

</body>

</html>
  #23 (permalink)  
Antiguo 11/01/2007, 14:26
Avatar de Spydis  
Fecha de Ingreso: mayo-2003
Ubicación: Donosti
Mensajes: 90
Antigüedad: 14 años, 6 meses
Puntos: 1
Re: Centrar página con CSS

Cita:
Iniciado por DragonX Ver Mensaje
yo probé esto en FF2 y anda perfectamente
no me entendiste xD, eso ya lo se hacer yo, cuando es un bloque para meter texto simplemente, pero si tienes que meter mas divs dentro, como lo organizas, ya que aqui no hay columnas ni filas...
Salu2!
  #24 (permalink)  
Antiguo 11/01/2007, 14:32
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Re: Centrar página con CSS

Cita:
Iniciado por Spydis Ver Mensaje
no me entendiste xD, eso ya lo se hacer yo, cuando es un bloque para meter texto simplemente, pero si tienes que meter mas divs dentro, como lo organizas, ya que aqui no hay columnas ni filas...
Salu2!


yo le estaba contestando a seoista
  #25 (permalink)  
Antiguo 11/01/2007, 16:51
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
Re: Centrar página con CSS

Prueba con este código en tu css:

Código:
body { margin: 0px;
background: rgb(47, 71, 107) url(/images/fondo_rayado.jpg) repeat scroll 0%;
color: rgb(0, 0, 0);
text-align: center;
}
#block { margin: 0px auto;
padding: 0px;
width: 800px;
}
#container { margin: 0px auto;
padding: 0px;
background: url(/images/fondo.gif) repeat scroll 0%;
display: table;
width: 800px;
}
#fondoa, #fondob, #fondoc, #fondod, #fondoe, #fondof, #fondog {
display: table-cell;
text-align: center;
}
#fondoa { width: 7px;
}
#fondob { width: 142px;
}
#fondoc { width: 5px;
}
#fondod { width: 492px;
}
#fondoe { width: 5px;
}
#fondof { width: 142px;
}
#fondog { width: 7px;
}
Claro, no funciona con IE.
Mikel.

Última edición por Mikmoro; 12/01/2007 a las 03:49
  #26 (permalink)  
Antiguo 12/01/2007, 04:16
Avatar de seoista  
Fecha de Ingreso: septiembre-2003
Ubicación: Pues leyéndote
Mensajes: 1.076
Antigüedad: 14 años, 3 meses
Puntos: 57
Re: Centrar página con CSS

Cita:
Iniciado por DragonX Ver Mensaje


yo le estaba contestando a seoista
Gracias DragonX, pero cómo dice Spydis tengo varios DIV's dentro del contenido, por lo tanto, no se ve bien en FF2, lo desplaza todo a la izquierda.

Saludo a ambos
  #27 (permalink)  
Antiguo 12/01/2007, 12:40
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
Re: Centrar página con CSS

Se me ha ocurrido un truco para que funcione en IE el centrado de las columnas que comentaba Spydis.

Código:
<!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>Columnas centradas</title>
  <style type="text/css">
body { margin: 0px;
background: rgb(47, 71, 107) url(/images/fondo_rayado.jpg) repeat scroll 0% 50%;
color: rgb(0, 0, 0);
}
#block { margin: 0px auto;
padding: 0px;
width: 800px;
}
#container { margin: 0px auto;
padding: 0px;
background: rgb(204, 102, 204) url(/images/fondo.gif) repeat scroll 0% 50%;
width: 800px;
display: table;
text-align: center;
}
#fondoa, #fondob, #fondoc, #fondod, #fondoe, #fondof, #fondog {
display: inline;
vertical-align: top;
}
#fondoa, #fondoc, #fondoe, #fondog {background-color: rgb(0, 0, 0);
color: rgb(255, 255, 255);
}
#fondob, #fondod, #fondof {
padding: 6px;
}
#fondob, #fondof { background-color: rgb(51, 204, 255);
}
#fondod {background-color: rgb(255, 204, 51);
}
span {display: inline-block;
font-size: 0.95em;
height: 600px;
text-align: left;
}
#fondoa span, #fondoc span, #fondoe span, #fondog span { width: 0.5em;
}
#fondob span, #fondof span { width: 9em;
}
#fondod span { width: 28.5em;
}
  </style>
</head>
<body>
<div id="block"><?php include("header.php"); ?></div>
<div id="container">
<div id="fondoa"><span>A</span></div>
<div id="fondob"><span>B - Esta es la columna fondo
b, la lateral izquierda
</span></div>
<div id="fondoc"><span>C</span></div>
<div id="fondod"><span>D- Esta es la columna central</span></div>
<div id="fondoe"><span>E</span></div>
<div id="fondof"><span>F - Esta es la columna fondo
f, la lateral derecha</span></div>
<div id="fondog"><span>G</span></div>
</div>
<div id="block"><?php include("footer.php"); ?></div>
</body>
</html>
He pintado las columnas y les he puesto letras de contenido para que se vea cómo queda. Si no llevan color, el código css todavía se reduce más.
Pruébalo a ver si funciona (sólo en IE). A mi me va en IE 6.

Mikel.
  #28 (permalink)  
Antiguo 12/01/2007, 12:55
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
Re: Centrar página con CSS

De manera que este código debería servir para lo que tú querías tanto en IE como el FF. Por supuesto, siempre mejor en Firefox.

Código:
<!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>Columnas centradas</title>
  <style type="text/css">
body { margin: 0px;
background: rgb(47, 71, 107) url(/images/fondo_rayado.jpg) repeat scroll 0% 50%;
color: rgb(0, 0, 0);
font-size: 0.95em;
}
#block { margin: 0px auto;
padding: 0px;
width: 800px;
}
#container { margin: 0px auto;
padding: 0px;
background: rgb(204, 102, 204) url(/images/fondo.gif) repeat scroll 0% 50%;
width: 800px;
display: table;
text-align: center;
}
#fondoa, #fondob, #fondoc, #fondod, #fondoe, #fondof, #fondog {
display: table-cell;
vertical-align: top;
text-align: left;
height: 600px;
}
#fondoa, #fondoc, #fondoe, #fondog {background-color: rgb(0, 0, 0);
color: rgb(255, 255, 255);
}
#fondob, #fondod, #fondof {
padding: 6px;
}
#fondob, #fondof { background-color: rgb(51, 204, 255);
}
#fondod {background-color: rgb(255, 204, 51);
}
#fondoa span, #fondoc span, #fondoe span, #fondog span { width: 0.5em;
}
#fondob span, #fondof span { width: 9em;
}
#fondod span { width: 28.5em;
}
  </style>
<!--[if IE]> <style>
span {display: inline-block;
text-align: left;
height: 600px;
}
#fondoa, #fondob, #fondoc, #fondod, #fondoe, #fondof, #fondog {
display: inline;
vertical-align: top;
}
</style> <![endif]-->
</head>
<body>
<div id="block"><?php include("header.php"); ?></div>
<div id="container">
<div id="fondoa"><span>A</span></div>
<div id="fondob"><span>B - Esta es la columna fondo
b, la lateral izquierda
</span></div>
<div id="fondoc"><span>C</span></div>
<div id="fondod"><span>D- Esta es la columna central</span></div>
<div id="fondoe"><span>E</span></div>
<div id="fondof"><span>F - Esta es la columna fondo
f, la lateral derecha</span></div>
<div id="fondog"><span>G</span></div>
</div>
<div id="block"><?php include("footer.php"); ?></div>
</body>
</html>
A ver si hay un churro un funciona más o menos como querías con tus contenidos reales. No obstante, para las barras laterales de relleno (las negras), si no piensas usar gráficos creo que sería mejor hacerlas a base de bordes de las capas que sí tienen contenido, con lo que en realidad serían sólo 3 capas, mucho más sencillo.

Mikel.
  #29 (permalink)  
Antiguo 23/01/2007, 20:29
 
Fecha de Ingreso: octubre-2006
Mensajes: 4
Antigüedad: 11 años, 1 mes
Puntos: 0
Re: Centrar página con CSS

A mi me gusta usar position:absolute para mis capas porque siempre se quedan donde están, salvo diferencias pequeñas entre navegadores, alguien sabe como hacer para centrar capas con absolute layout?

Última edición por wfabianbl; 23/01/2007 a las 20:51
  #30 (permalink)  
Antiguo 25/01/2007, 06:10
Usuario no validado
 
Fecha de Ingreso: julio-2003
Ubicación: <?="www.tuky.cl";?>
Mensajes: 132
Antigüedad: 14 años, 4 meses
Puntos: 4
Re: Centrar página con CSS

margin: 0 auto;


así centro yo el contenido de cualquier DIV
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.
Tema Cerrado




La zona horaria es GMT -6. Ahora son las 19:04.