Cuando empecé a entender y a manejar esto del CSS pensaba que estaba muy bien y que molaba mucho para cambiar los colorines de los enlaces y que se subrayaran y cosas así, pero no le veía mucha más aplicación. No digamos ya cuando se trataba de centrar un diseño en la página, por favor… eso se hace con tablas!!!. Pues no amigos, con CSS se puede, y además es más lógico, tiene más sentido y el diseño es más limpio.
Para empezar, ¿que entendemos por un diseño centrado?, pues aquel diseño web que permanece centrado verticalmente en el navegador que utilicemos (en cualquier navegador: Firefox, IE, Opera… como el ejemplo de la imagen de la izquierda) sea cual sea la resolución de nuestra pantalla. Así de sencillo y de dificil a la vez. Si nosotros no indicamos al diseño web via CSS que esté centrado, por defecto, el diseño se centrara a la izquierda y en la esquina superior, en el mismo orden en el que escribimos, por ejemplo. Así que una vez que esto es claro y meridiano, que diría alguno, pasemos a explicar como se hace.
En primer lugar creamos el documento HTML de nuestro proyecto, la página principal, y la llamamos como queramos, por ejemplo, layout01.html. Lo siguiente que debemos hacer es vincular ese archivo html a una hoja de estilos css que llamaremos, por ejemplo, layout01.css.
Antes de continuar insisto siempre en que es fundamental que visualicemos el resultado que pretendemos conseguir antes de ponernos a hacerlo. Un recurso muy antiguo y muy util es dibujar como queremos que sea nuestra web, ya que en el mismo dibujo podemos hacer anotaciones. Creedme amigos, es muy pero que muy util aunque sea más viejo esto de dibujar que hacer pis en el campo.
Con la idea clara, hagamos la estructura. En este caso yo voy a hacer un diseño con una cabecera y un cuerpo central, así de sencillo. Luego ya cada uno puede ir agregando cosas. En primer lugar voy a crear un estilo tipo ID (los que llevan #, no como los class, que llevan un .) de DIV que englobe todo el ancho de la página. Es bueno tener metodología en esto y utilizar siempre el mismo tipo de estructuras. Yo lo voy a llamar “wrapper” y es así:
#wrapper {
width: 100%;
text-align: center;
margin-top: 10px;
}
Este ID de CSS dice que el ancho es del 100% de la página, que el texto esta centrado y que el margen superior es de 10px. Al margen podria ponerle otros valores o no ponerle ninguno. Ahora, en mi documento html inserto este DIV de la siguiente manera:
<div id=”wrapper”>
</div>
Lógicamente si publico la página en un navegador no veré nada todavía, porque lo que hemos creado, este “wrapper” es el envoltorio que va a contener al resto de la estructura para que aparezca centrada. Lo siguiente es crear el ID del DIV que va a tener todo el contenido dentro. Este DIV estará dentro del “wrapper” y por eso estará siempre centrado. Llamo a este DIV “container”, y es así:
#container {
width: 750px;
margin-left:auto;
margin-right:auto;
}
Simplemente le he indicado el ancho total que va a tener el sitio web (750 px en este caso) y también le he indicado que los márgenes izquierdo y derecho tengan una medida “auto”. Esto hace que el DIV container se mantenga siempre centrado dentro del “wrapper”, tal y como indica el estilo del “wrapper” al utilizar un text-align: center. Ahora inserto este DIV dentro del “wrapper” tal que así:
<div id=”wrapper”>
<div id=”container”>
</div>
</div>
Sigo sin ver nada si lo publico en un navegador, y es normal, porque no hay ningún contenido sino simplemente una estructura para albergar el contenido, que es justo lo que hemos hecho. A partir de ahora, lo que nos aseguramos es que el DIV “container” esté centrado de forma absoluta. Voy a hacer dos estilos ID más, uno que llamare “header” y que definira la cabecera y otro que llamare “content” que definira el contenido principal, y quedaran así:
#header {
width: 100%;
background-color:#FFFFFF;
height: 150px;
margin-bottom: 10px;
}
#content {
width: 100%;
background-color:#FFFFFF;
height: 400px;
}
Que quede claro que lo mismo que yo les doy estos valores de tamaño y de background, luego cada uno tiene que jugar en función de lo que quiera obtener. Una vez definidos estos IDs los incluyo en mi documento html dentro del DIV “container”:
<div id=”wrapper”>
<div id=”container”>
<div id=”header”>Colocar aquí el contenido para id “header”</div>
<div id=”content”>Colocar aquí el contenido para id “content”</div>
</div>
</div>
body {
background-color: #003366;
}
#wrapper {
width: 100%;
text-align: center;
margin-top: 10px;
}
#container {
width: 750px;
margin-left:auto;
margin-right:auto;
}
#header {
width: 100%;
background-color:#FFFFFF;
height: 150px;
margin-bottom: 10px;
}
#content {
width: 100%;
background-color:#FFFFFF;
height: 400px;
}
Y el archivo HTML para conseguir este increible y fascinante resultado que os cambiará la vida es así:
<head>
<title>ricardotayar.wordpress.com</title>
<link href=”layout01.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<div id=”wrapper”>
<div id=”container”>
<div id=”header”>Colocar aquí el contenido para id “header”</div>
<div id=”content”>Colocar aquí el contenido para id “content”</div>
</div>
</div>
</body>
</html>
Ala mozos, ahora a practicar cada uno en su casa estas cosicas, que poco a poco se pueden conseguir resultados muy interesantes. Ahora, ya sabeis como centrar un diseño web utilizando CSS, así que lo siguiente es experimentar y ampliar esta minilección por cuenta propia e ir dándole contenido al contenedor web principal… suerte!!!
Tags: centrado, centrar, css, design, diseño, fondo, pagina, png, web
-
this is something really tough , can i get this in english plz ?
-
I´d like to help you, but you must understand that I cannot translate every content of this blog to several languages depending who reads it, but you can use translate tools like babelfish to translate de whole content so this will be useful for you, ok?
-
Saludo:
A ver si me puedes ayudar. Resulta que yo soy un completo inexperto y quiero subir, básicamente, videos Quicktime a mi blog en wordpress. He investigado y para conseguirlo, me parece que necesito subir un plugin (pero no encuentro donde hacerlo) más explícitamente el Embed (de apple) y luego pegar un tag en el espacio de Redactar, hasta aquí voy bien??
El tema es que como dije, no tengo la menor idea de dónde subir ese plugin Embed. Lo que intuyo es que necesito hacer un upgrade a CSS para poder modificar eso, o me equivoco y estoy haciendo algo mal??
Te agradecería me pudieras dar alguna orientación al respecto???
Mil gracias!
-
Hola Eric:
Te voy a ser sincero, desconozco totalmente lo que preguntas. La verdad es que no puedo ayudarte, aunque por curiosidad le he preguntado sobre el tema a un par de colegas por mail, y si me dicen algo te cuento. Siento no poder ayudarte.
-
muy buen aportee
gracias! 😀 -
Muy bueno el mini tuto, ahora pregunto ¿y alineacion vertical? supongamos un swf comlpetamente centrado en nuestra web?
Muchas gracias por dedicar tiempo a estas cosas!
Saludos!! -
hola cómo estas, me imagino que te llamas Ricardo, un placer te saludo desde Honduras….me parece muy, pero muy interesante tu sitio y tu tutorial….me has sacado de muchas dudas soy nuevo en esto pero estoy en el procedeo de aprender……..pero tengo otras dudas..te las planteo ahora y veremos si me ayudas…..yo he trabajado con dreamweaver y uso plantillas me parece práctico al crear un nuevo archivo le aplico la platilla y listo…pero mi consulta es ¿cómo puedo hacer lo mismo o algo parecido con css….¿si tengo un sitio con muchas páginas?¿hago un html y le aplico el css y lo convieto en plantilla? o a cada htm nuevo que creo lo hagi en base a los mismos divs y luego le aplico las clases o los id el css a cada una?…..no se si se comprende mi pregunta?
muchas gracias -
Llámame torpe, pero hago paso por paso lo que dices y no me sale nada, sólo el texto:
Colocar aquí el contenido para id “header”
Colocar aquí el contenido para id “content”en la parte superior izquierda de la página
Un saludo y aunque uno es torpe siempre es recibido que expliquen estas cosas de un forma tan sencilla.
-
Hola machote!, que buen aporte! no en serio, yo consigo esto de centrar guarramente, ya te lo enseñare un día que pases por aquí a encargarme otra camiseta risionil.
-
Me pasa igual que a Dark…
-
Comento por partes:
Para Dark: el texto que te sale es ese porque es el que puse en el ejemplo es ese a modo de orientación, en lugar de Colocar aquí el contenido para id “header” tienes que colocar entre esas etiquetas el contenido que a ti te parezca, lo que tú quieres poner, sea la cantidad de divs, que sean.
Para Valentín: lo mismo te comento
Espero haberos ayudado
-
Muchísimas gracias por la Información, perfectamente explicado.
-
Genial! Me ha resultado muy útil, muchas gracias.
-
Resulta que tienes que cambiar las comillas dobles ya que el navegador las pone de una forma y el dreamweaver las ve de otra “header” “”
-
Excelente, a mi también no me salia hasta que corregí lo de las comillas. GRACIAS.
-
Me pasa lo mismo que Darko y Valentin.
Copie y pegue el codigo html y css en layout01.html y layout01.css respectivamente y cuando visualizo la pagina; es como si no tuviera css.
No es un problema del contenido.saludos y gracias
Daniel
-
Disculpa Ricardo, ya se lo que paso, al cortar y pegar quedaron caracteres raros delante y al final del nombre de los div y por esa razon no los ubicaba.
Corregido esto funciona perfectamente. -
Chevere compadre, eso si es pedagojia : ) xD
-
Hola ricardo enhorabuena por la web y por tus explicaciones pero tengo una duda que no consigo hacer. he hecho tu tutorial pero mi problema es que necesito tener una capa a la izquierda que sera el menu, otro a la derecha donde ira el menu y 1 para el contenido, el problema es que no consigo hacerlo y me esta quitando la vida por mas pruebas que hago, ¿podrias orientarme? muchas gracias
-
Hola Karakarton, dejame que lo mire un segundo y te comento lo que puedes hacer, aunque puedes leer el post que habla de los Yahoo YUI Grids y utilizar ese sistema para lo que quieres hacer, pero dame un rato y te comento, ¿ok?
-
Gracias Ricardo, solucionado, y espero que valga a mas gente simplemete este codigo:
contenido izquiero
contenidorightPoniendolo debajo de de:
Pero cuando todo estaba solucionado me viene el toston de modzilla se va un poco hacia la derecha y “content” se me sube hacia arriba a”header”. En fin si lo soluciono entro y os lo digo, si alguien lo sabe k tambien lo diga. Un saludo
-
perdon por el poner otro post pero no salio el codigo lo intento de nuevo con espacios:
“contenido iz”
“contenido der” -
Hola Ricardo esta excelente el tutorial pero tambien tengo problemas con las capas estas se mueven de manera independiente como controlarlas…saludos
-
Muy bueno, y muy claro, Ricardo. Ahora, tengo un problema. En el header va una imagen, y a continuación el menú de navegación. Y éste, si bien me queda a continuación se me va muy abajo. Cómo hago para que me quede un poco más arriba? Cómo puedo darle margen inferior al texto sin que esto me afecte la posición de la imagen?
-
Hola te felicito por tu explicacion, muy clara y facil de aplicar
-
Gracias por tus palabras Eddy. Verdaderamente esa es la intención, ser claro y concreto, que para complicarnos las cosas ya estamos todos preparados.
-
GRACIAS AMIGO POR EL APORTE ESTUBO MUY BIEN EXPLICADO
-
He hecho el tutorial paso a paso y copiado todo el codigo tal cual. Pero al momento de la visualización todos los divs ocupan el ancho total de la pantalla. Alguna idea? De ante mano, gracias.
-
Hola Mikengel,
Una pregunta, ¿con que navegador estas visualizando y su version?, y tambien ¿cual es la resolucion de la pantalla?
-
Resultó exelente, saludos y gracias.
Adios. -
Si tienes el div wrapper que hace de contenedor, pro que luego metes un div container?? Sólo creando un div contanier que englobe a todo no tienes por que repetir otra vez el div con ese nombre, te creas un solo contenedor y ahi metes directamente el header, el footer y el content con con las columnas que tenga el diseño.
Esta muy bien explicado pero me sobra un div. El wrapper o el container, solo con uno puedes hacer lo mismo.
-
Gracias, muy buen aporte lo estaba buscando y resulto 100% gracias.
-
como se hace para dividir o colocar dos div en content uno del 30% y el otro de 70%;
osea que en vez de content colocar dos div horizontales uno para un menu y el otro para el contenido -
HOl estimado, estoy recien aprendiendo esto de css y acabo de aplicar tu tutorial y me qedio bien 🙂 , pero tengo una duda..y nose realemente como hacerlo, m puse un menu de navegacion en el top del contenedor y mi idea es q al cliqear algo el contenido cargue pero sin que cargue denuevo toa la pagina..sino solo la parte del contenido..
como s epuede hacer eso?
🙁
gracias de antemano -
Buenas!
tu blog me resulta de lo más interesante, encuentro bastantes ideas a la hora de programar.
Solo quería comentarte, en este post, que el centrado de webs yo lo hago de la siguiente forma:
body margin:0px padding 0px
#elemento_a_centrar position:relative margin:autoObviamente hay que definir el ancho de cada elemento (normalmente uso 1024px, por eso de la resolución) y puedo tener tantos elementos a centrar como queramos, que funciona perfectamente. Y dentro de cada #elemento_a_centrar puedo tener, además, más divs con position:absolute.
Espero que te sirva tanto como a mi. Un saludo!
-
-
En el empleo de divs para la construcción de una página ¿Es posible prescindir del wrapper? La cuestión es que no estoy seguro de las medidas que debe llevar devido a que el contenido variara; el ancho seria de 900px pero el contenido variara ¿Como puedo resolver este problema?
-
muchas gracias por el post ^^ yo ya tenia conocimientos bastante amplios de css por haberlo utilizado y tal, pero la idea da hacer una pagina con tantos divs nunca la habia comprendido. siempre me decian (las tablas se estan quedando /off, usa divs que es mas sencillo y vale la pena) pero no lo comprendia, ahora si xD!
-
Hola Ricardo, estoy empezando en esto, y cuando digo empezando es q ue no tengo mucha idea. Para empezar, creo mi documento htm en el dreamweaver pero no se como se vincula el Css, o como crear el Css, en que pestaña, de qué forma…
Perdonad mi torpeza.
Muchas gracias y un saludo! -
Hola Toñito,
Para vincular tu archivo htm o html con tu css debes insertar una linea como esta antes de y colocar ahí la ruta de tu css donde he puesto “rutadetuarchivo.css”
Pruébalo y seguro que te funciona
Un saludo,
Ricardo
-
Muchas graicas Ricardo… Llevaba buscando esta respuesta desde hace un tiempo.. claro esta que no sabia como buscarla… hoy se me ha encendido la bonbilla y he llegado hasta tu blog.. Muchas gracias.
-
Hola Ricardo, muchas gracias por tan estupenda explicacion me ha ayudado a configurar la estructura de la web que estoy creando y lo mas inportante a comprender el funcionamineto de css.
he aplicado imagenes de fondo en cada div de la siguiente forma:
background-image:url(/Imagenes/bocetoweb_01.gif);estoy trabajando con dreamweaver y las imagenes se muestran tanto en la vista diseño, como en la vista en vivo. sin embargo, al previsualizar en el navegador me aparece tan solo la estructura sin las imagenes. ¿que estoy haciendo mal?
muchas gracuas
Un saludo -
Hola Ricardo, muy clara y didáctica tu exposición.
Solo queria aportar un comentario sobre la utilidad del diseño web basado en CSS que comentas al principio.
Como bien dices, hace el diseño muy limpio y eso, a parte de ser bueno de entrada, nos da dos utilidades importantes:
1 independizar el diseño del contenido
2 ayuda a posicionar por que la simplicidad también gusta a los motores de búsquedaComo este blog tb trata de posicionamiento me parecido doblemente importante este artículo.
Saludos, enhorabuena por el Blog y Feliz Año 2012 !!
-
Buen día.
A hoy en día a mi me ha servido muchísimo este tutorial que has hecho, no tenia la mas mínima idea de como hacer esto, pero me has ayudado bastante, muchísimas gracias.
-
amigo me ha funcionado de maravilla, muchas gracias.
-
Amigo muchas gracias de verdad me estaba rompiendo al cabeza para arreglar este problema
slds
-
Es increible que después de varios años de este post aun nos siga alivianando la vida para los que nos cuesta dar con la solución…
Gracias Ricardo…..ah y mi problema se solucionó al leer los post de Dark y Conquistador
Gracias tb a ambosSaludos desde Chile
-
Las cosas buenas perduran en el tiempo.
Muchas gracias.Juan
-
Hola, saludos desde Colombia………me preguntaba…como harias lo ismo pero que se mantenga flotante……osea que se dezplazaria el “contendedor” pero el fondo seria estatico…..gracias de Antemano, y Dios te Bendiga
56 comments
Comments feed for this article
Trackback link: http://www.ricardotayar.com/2007/11/16/hacer-un-diseno-web-centrado-con-css-%c2%bfcomo-se-hace/trackback/