Prueba

Solo disponible en BuenasTareas
  • Páginas : 2 (274 palabras )
  • Descarga(s) : 0
  • Publicado : 27 de noviembre de 2010
Leer documento completo
Vista previa del texto
Éste tutorial tiene como objetivo, explicar cómo centrar todo el diseño de una web horizontalmente.
Nota: Para éste tutorial necesitas tener previos conocimientos sobre XHTMLy CSS.

Crearemos un div con el id wrap alrededor de todo el contenido de la página. Recuerde que puede cambiar el id por cualquier otro nombre que ústed desee, o le parezcaconveniente.

Tendriamos algo como ésto.
CSS
Para que el #wrap centre el contenido utilizaremos CSS.
Utilizaremos margenes automáticos para centrar el div, y recuerde queéste debe tener un tamaño, ya sea en pixeles, em o porcentajes.
#wrap { margin:0 auto 0 auto; width:390px; }
Éste código deberá funcionar en los browsers actualesque sigan las recomendaciones estándar de la W3C. Pero, IE 6 y anteriores, no reconoce éste código, por lo que tendremos que recurrir a un hack, utilizaremos text-align:center;para ésto. Éste error será corregido en el IE7.
body { text-align:center; }
Por inercia, todo código de estilo CSS que se utilice en el XHTML, el contenidohijo hereda éstos estilos. En otras palabras, tódo el contenido será centrado, por lo que volveremos a utilizar text-align, pero ésta ves centrando todo el contenido de #wraphacia la izquierda (o también podria ser hacia la derecha, dependiendo mucho de su diseño).
#wrap { margin:0 auto 0 auto;
width:390px;text-align:left; }

Tendriamos algo como ésto.
Agregando pequeños detalles
Para mejor visualización de éste ejemplo, agregué la fuente verdana, un poco de padding, y un borde rojo.Al final, tendriamos ésto.
Información adicional
Ejemplo del tutorial
Archivos del tutorial
Si tienes alguna pregunta de este tutorial; puedes hacerla aqui en los foros
tracking img