Foros del Web » Creando para Internet » CSS »

Centrar web con css

Estas en el tema de Centrar web con css en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 13/07/2009, 09:45
 
Fecha de Ingreso: enero-2008
Mensajes: 49
Antigüedad: 9 años, 11 meses
Puntos: 0
Centrar web con css

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
  #2 (permalink)  
Antiguo 13/07/2009, 09:49
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: Centrar web con css

Código css:
Ver original
  1. body{margin:0 auto;}


  #3 (permalink)  
Antiguo 13/07/2009, 10:38
 
Fecha de Ingreso: enero-2008
Mensajes: 49
Antigüedad: 9 años, 11 meses
Puntos: 0
Respuesta: Centrar web con css

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
  #4 (permalink)  
Antiguo 13/07/2009, 10:43
 
Fecha de Ingreso: octubre-2006
Mensajes: 562
Antigüedad: 11 años, 1 mes
Puntos: 12
Respuesta: Centrar web con css

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
  #5 (permalink)  
Antiguo 13/07/2009, 10:48
 
Fecha de Ingreso: enero-2008
Mensajes: 49
Antigüedad: 9 años, 11 meses
Puntos: 0
Respuesta: Centrar web con css

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.
  #6 (permalink)  
Antiguo 13/07/2009, 10:53
 
Fecha de Ingreso: octubre-2006
Mensajes: 562
Antigüedad: 11 años, 1 mes
Puntos: 12
Respuesta: Centrar web con css

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.

Última edición por jalex16; 13/07/2009 a las 11:00
  #7 (permalink)  
Antiguo 13/07/2009, 11:10
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Centrar web con css

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"> 
__________________
WFC
codigo82
  #8 (permalink)  
Antiguo 13/07/2009, 11:21
 
Fecha de Ingreso: enero-2008
Mensajes: 49
Antigüedad: 9 años, 11 meses
Puntos: 0
Respuesta: Centrar web con css

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?
  #9 (permalink)  
Antiguo 13/07/2009, 11:26
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Centrar web con css

Cita:
Iniciado por pasteles Ver Mensaje
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.
__________________
WFC
codigo82
  #10 (permalink)  
Antiguo 13/07/2009, 12:54
 
Fecha de Ingreso: enero-2008
Mensajes: 49
Antigüedad: 9 años, 11 meses
Puntos: 0
Respuesta: Centrar web con css

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.
  #11 (permalink)  
Antiguo 13/07/2009, 13:11
 
Fecha de Ingreso: octubre-2006
Mensajes: 562
Antigüedad: 11 años, 1 mes
Puntos: 12
Respuesta: Centrar web con css

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
  #12 (permalink)  
Antiguo 13/07/2009, 15:22
 
Fecha de Ingreso: enero-2008
Mensajes: 49
Antigüedad: 9 años, 11 meses
Puntos: 0
Respuesta: Centrar web con css

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?
  #13 (permalink)  
Antiguo 13/07/2009, 15:28
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Centrar web con css

Modelo de Caja
Creo que lo encontrarás interesante.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #14 (permalink)  
Antiguo 13/07/2009, 15:34
 
Fecha de Ingreso: enero-2008
Mensajes: 49
Antigüedad: 9 años, 11 meses
Puntos: 0
Respuesta: Centrar web con css

Gracias le voy a echar un ojo
  #15 (permalink)  
Antiguo 13/07/2009, 20:06
 
Fecha de Ingreso: octubre-2006
Mensajes: 562
Antigüedad: 11 años, 1 mes
Puntos: 12
Respuesta: Centrar web con css

cabe resaltar que lo que centras es la caja, no el texto.
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 17:24.