Centrar web con css

pasteles · #1 (**permalink**) 13/07/2009, 08:45

Se que es una cosa sencilla, simplemente con text-align:center, ya lo tendría, pero quiero crear la web con contenedores(div) y tengo esta duda. Tengo el atributo text-aling de la etiqueta body a justify, y el mismo atributo de un div llamado cuerpo con center y withd:1024.
Lo que quiero hacer es tener centrado dentro del navegador el contenedor cuerpo con un ancho de 1024 este.

Un saludo

DragonX · #2 (**permalink**) 13/07/2009, 08:49

Código css:

Ver originalbody{margin:0 auto;}

pasteles · #3 (**permalink**) 13/07/2009, 09:38

Antes he corrido demasiado al hacer mi pregunta y no me he expresado bien.
¿Como puedo centrar el contenido de mi web con un ancho de 1024 utilizando cajas?

Yo he pensado en hacer una caja principal para el documento llamada "cuerpo", que estará dentro del body, y dentro de esta ir añadiendo las demás cajas como pudieran ser "cabecera", "titulo...". Una imagen vale más que 1000 palabras (todavía no puedo poner link de imágenes):

img8.imageshack.us/img8/7453/cuerpo.png

Para hacerlo así he estado pensado lo que he escrito en mi anterior post y no lo veo ahora coherente.
Ahora pensaría algo así, pero no me sale,¿qué debo de modificar?

Código:

body{
	background-color: #474747;
	margin:0 auto;
	color:#CCCCCC;
	
}
#cuerpo{
	text-align: center;
	width:1024px;
	margin:0;
}
#cabecera{
	text-align:justify;
}

Y así es como se queda con este código:
img239.imageshack.us/img239/1286/actual.png

jalex16 · #4 (**permalink**) 13/07/2009, 09:43

Código:

body{
	background-color: #474747;
	color: #CCC;
	
}
#cuerpo{
	width: 950px;
	margin: 0 auto;
}

para que se vea bien en una resolución de 1024 como mínimo (estático), creo que está bien un ancho de 950px

pasteles · #5 (**permalink**) 13/07/2009, 09:48

Gracias por el comentario, pero esto no soluciona lo que he preguntado, osea tener centrado el "cuerpo" con un ancho de 1024, bueno 950 mejor.

jalex16 · #6 (**permalink**) 13/07/2009, 09:53

pues debería si te refieres a centrar div#cuerpo. quizá el problema está en tu código HTML

Código HTML:

<!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" />
<title>Prueba</title>

<style type="text/css">
<!--
#cuerpo{
    width: 930px;
    padding: 10px;
    margin: 0 auto;
}    
-->
</style>
</head>

<body>
<div id="cuerpo">
    <h1>Lorem ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae lacus a dui aliquam ornare. Aenean lacus elit, malesuada non facilisis sit amet, condimentum ac lectus. Cras blandit blandit libero at varius.</p>
</div>
</body>
</html>

o también puedes quitar la capa #cuerpo y aplicar esos estilos a body.

willyfc · #7 (**permalink**) 13/07/2009, 10:10

pasteles, lo que te pasó jalex16 debería funcionar, entonces, tienes un Doctype definido en tu documento?

Código HTML:

<!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">

pasteles · #8 (**permalink**) 13/07/2009, 10:21

Si tenía un doctype y ya con ese código veo que funciona, pero tengo una duda, ¿donde indicas el centrado de la caja?

willyfc · #9 (**permalink**) 13/07/2009, 10:26

Cita:

Iniciado por pasteles

Si tenía un doctype y ya con ese código veo que funciona, pero tengo una duda, ¿donde indicas el centrado de la caja?

Pues en la misma clase o id cuerpo, es como te lo muestra jalex16, el magin:0 auto; se encargara de controlar los laterales para poder centrar.

El auto significa izquierda y derecha y el 0 arriba y abajo, y cuando colocas auto el navegador lo calcula para poder colocar tus propiedades asignadas.

pasteles · #10 (**permalink**) 13/07/2009, 11:54

Bueno no lo he entendido muy bien y tampoco me queda claro consultándolo en google. Lo de 0 si lo entiendo, simplemente añade un margen de 0 píxeles alrededor de la caja pero el valor auto no entiendo como puede centrar el contenido de la caja.. A mi entender todo lo que tenga la propiedad margin, tiene que estar relacionado con los márgenes de la caja no para que se centre.

jalex16 · #11 (**permalink**) 13/07/2009, 12:11

aquel 0 no afecta a toda la caja, sólo a la parte superior, quizá instalando Firebug en Firefox se te despeje la duda.

resumido:

con 4 atributos. margin: arriba derecha abajo izquierda
con 2 atributos. margin: arriba-abajo izquierda-derecha
con 1 atributo. margin: afecta-a-todo-el-elemento

así como te lo explicó willyfc más arriba

pasteles · #12 (**permalink**) 13/07/2009, 14:22

Ahh ya entiendo los parámetros, pero lo que no se bien es porque es al margen y no al padding, ¿No es el padding el margen interno, y este caso es lo que me interesa para que este centrado?

kseso? · #13 (**permalink**) 13/07/2009, 14:28

Modelo de Caja
Creo que lo encontrarás interesante.

Un saludo

pasteles · #14 (**permalink**) 13/07/2009, 14:34

Gracias le voy a echar un ojo

jalex16 · #15 (**permalink**) 13/07/2009, 19:06

cabe resaltar que lo que centras es la caja, no el texto.