1. Inicio
  2. CSS
  3. Diseño Web
  4. HTML
  5. JavaScript
  6. Miscelanea
  7. Recursos
  8. SEO
  9. Usabilidad

Creando un layout sin tablasimagen de missha

Creando un layout sin tablas (parte 2)

Esta es la segunda parte del tutorial para hacer layouts sin tablas, si quieres, aquí puedes ver la primera parte.

¿Recuerdan la página de Starbucks Perú?

Ya estaba (casi) todo el marcado listo, sólo faltaba una pequeña cosa.

Luego de eso es hora del CSS!

Marcar la cabecera con un div para poder posicionar absolutamente todo, este sería el marcado:

marcado final

Como la página de Starbucks Perú está centrada en la ventana del navegador, primero habría que encerrar todo en un gran div y darle un id específico, en este caso lo he llamado página. <div id="pagina">

contenedor

Y ahora es tiempo de CSS!

Lo primero que hay que hacer es usar CSS para centrar el div página, este sería el código:

#pagina {
position: relative;
width: 760px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}

¿Que significa eso?

Aquí estoy diciendo que el div página estará en posición relativa, tendrá un ancho de 760 pixeles y estará centrada horizontalmente.

Lo que se hace para centrar ese div horizontalmente es darle esos márgenes:
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;

El margin-top y margin-bottom no son importantes al momento de centrar un elemento horizontalmente, los que importan son el margin-left y el margin-right. Al darles el valor auto lo que se logra es que el elemento quede centrado.

Bueno, ahora que tenemos el div principal es hora de posicionar los elementos dentro de él.

Hay varias técnicas para posicionar elementos la que voy a usar ahora es una de las más simples:

Usar posiciones absolutas.

¿Qué es una posición absoluta?

Es una manera de definir la posición exacta de un elemento con respecto al elemento que lo contiene (padre) por medio de coordenadas.

Para esto cada elemento debería tener un alto y ancho específicos, así que antes de empezar hay que definir también el alto del elemento div página, con 800 pixeles bastará (height: 800px;), ahora el CSS del div página se ve así:

#pagina {
position: relative;
width: 760px;
height: 800px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}

Entonces tenemos un marco de 760 pixeles de ancho por 800 pixeles de alto para posicionar todos los elementos dentro de él.

Empecemos con la cabecera:

#cabecera {
width: 760px;
height: 150px;
position: absolute;
top: 0;
left: 0;
}

Ok, el CSS del div cabecera nos dice que mide 760px de ancho y 150px de alto. la sentencia position: absolute; indica que está en una posición absoluta respecto al elemento que lo contiene (en este caso el div página).

top: 0; y left: 0; es como decir: Arriba en la posición 0 y a la izquierda en la posición 0, e indican que este elemento aparecerá en la esquina superior izquierda. (coordenada 0,0).

Ahora posicionemos el <ul> navegación:

#navegacion {
width: 180px;
height: 360px;
position: absolute;
top: 150px;
left: 0;
}

Pueden ver que el código es bastante parecido al anterior, sólo que aquí el top es de 150px.

¿Por que es de 150px?

Porque queremos que aparezca abajo de la cabecera y esta tiene 150 pixeles de alto. veamoslo con un gráfico:

ejemplo

Pasemos a darle posición al div id="contenido":

#contenido  {
width: 350px;
height: 410px;
position: absolute;
top: 150px;
left: 180px;
}

Con esto posicionamos el div contenido debajo del div cabecera y justo a la derecha del <ul> navegación.

¿Otro gŕafico?

ejemplo

Ahora tenemos que posicionar el <ul> enlaces:

#enlaces  {
width: 200px;
height: 500px;
position: absolute;
top: 150px;
left: 530px;
}

Esto es igual que los demás, sólo que aquí estamos usando un left: 530px queremos que aparezca a la derecha de los otros dos elementos y entre ellos miden 530 pixeles.

Puedes verlo más claro en este gráfico.

ejemplo

Para terminar sólo faltaría posicionar el footer:

#footer {
width: 760px;
height: 150px;
position: absolute;
left: 0;
bottom: 0;
}

¿Notas alguna diferencia con el código?

Sí, el bottom: 0; esta es otra forma de dar coordenadas.

La coordenada 0 del top está lo más arriba posible, la coordenada 0 del bottom está lo más abajo (siempre dentro del elemento padre).

Entonces es mucho más fácil definir el div footer como bottom: 0; que como top: 650px;

Aquí hay otra imagen para explicarlo:

ejemplo

Así puedes posicionar los elementos sin usar tablas, esta es la forma más facil de hacerlo con CSS, pero no la más eficiente, ya hablaré de otras formas de posicionamiento en futuros posts.

Etiquetas:

Comentarios

deja un comentario

  1. Avatar de eMulo eMulo

    Germán, hay un detalle que no me queda claro: donde explicas las posiciones absolutas, dices que "es una manera de definir la posición de un elemento con respecto al elemento que lo contiene", ¿eso no es una posición relativa? luego, en el código de "#pagina" aparece "position: relative;"

  2. Avatar de Germán Germán

    eMulo, hola, lo acabo de cambiar a "es una manera de definir la posición exacta..."

    Te explico, #pagina (que es el elemento que lo contiene todo) no puede estar en una posición absoluta para centrarlo horizontalmente, por eso es que defino una posición relativa para ese elemento en particular, y así lo centro con el margin: 0 auto;.

    El resto de elementos, que están dentro de #pagina, se posicionan absolutamente con respecto a #pagina, por eso es que a cada uno de ellos le doy un position: absolute;.

    Con position: absolute; lo que hago es decirle al elemento exactamente donde tiene que estar, por ejemplo, con top: 0; left: 0; le estoy diciendo, posiciónate en la esquina superior izquierda.

    Espero que esto haya aclarado tus dudas, si no es así, por favor escribe otro comentario o contáctame.

    Gracias por el comentario!

  3. Avatar de eMulo eMulo

    Me quedó clarito. Ahora cuéntame entonces qué significa la posición relativa porque veo que tenía los conceptos trocados.
    ...y gracias :-)

  4. Avatar de Germán Germán

    Un poco difícil explicar "position: relative;" en un comentario ;)
    Eso se merece un post (seguramente mañana o pasado mañana).

    Mientras tanto te puedo adelantar que sin esa sentencia, no se podrían posicionar absolutamente los elementos que contiene.
    (o mejor dicho, se posicionarían con respecto a la página y no al div id="pagina"

  5. Avatar de AristidesEchauri.com AristidesEchauri.com

    Buenisimo el tutorial amigo... Muchas gracias...

  6. Avatar de Adrian Adrian

    Esta buenísima la explicación. ¿Que hay de esto y la compatibilidad con los navegadores? Haré las pruebas por mi cuenta para saber si todos los navegadores lo interpretan sin problemas.
    Muchas Gracias por la ayuda!

  7. Avatar de Soy Nuevo 007 Soy Nuevo 007

    Es posible compatibilizar este tipo de layout con aspx?

  8. Avatar de Miguel Angel Miguel Angel

    Hola Germán, soy recontra-archi-principiante en esto de Html y CSS, y me encata tu página porque todo lo explicas de tal manera como si fuese para mi jejeje.

    Te escribo por que desde hace algunos días estoy luchando con una plantilla de CSS. Y creo que me puedes ayudar. Mi plantilla es igual al ejemplo en el gráfico de arriba, solo que en la sección de enlaces tengo una TV online.

    Mi problema es que al navegar en la página se carga de nuevo toda la página y esto hace que el reproductor de TV se apague y se vuelva a cargar otra vez. Lo que me encantaría es que al navegar en la página, el nuevo contenido se cargue solo en la sección de "contenido" ¿Es eso posible en CSS? Estaba pensando intentarlo con Frames, pero algunos me dijeron que eso no es bueno ¿que me aconsejas?

    Gracias de antemano.

  9. Avatar de KD KD

    Me encantas tus explicaciones German. Gracias!!
    Tengo una duda que no consigo resolver, la esctructura de mi web es similar a "aprendiendoweb" con mi menú de la derecha y el contenido a la izquierda (+cabecera y pie, claro). Quiero que mi menú a la derecha esté fijo (como los antiguos frames) y al pinchar en cualquier enlace .html que me lo habra dentro del div de la izquierda. Cómo se hace.
    El objetivo de esto, es que tengo muchas páginas y voy a cambiar periódicamente el menú de la derecha, y no quiero estar cambiándolo página por página. Hay alguna manera de cambiarlo en una sola página (padre) y se cambie en todas las demás.
    Muchíiiiisimas gracias de antemano.
    KD · Diseñadora Gráfica

  10. Avatar de Alex Alex

    Muchisimas gracias amigo.. me ayudaste muuuuucho!!

  11. Avatar de Cuauhtemoc Solis Cuauhtemoc Solis

    Hola German. Quiero felicitarte por este excelente tutorial y por este magnifico sitio lleno de informacion relevante, interesante e importante.
    Saludos!

  12. Avatar de eD eD

    Buenisima explicación de como utilizar los div en vez de tablas, sería bueno si explicaras el tema de los <ul id="navegation"> osea de una forma mas profunda de como brindarle esos stylos creo que es mucho pedir pero seria de muy buena ayuda espero que te animes gracias.

  13. Avatar de ksper ksper

    Hola, primero quería felicitarte por la claridad del artículo.
    Recién estoy empezando a "migrar" de las tablas al css.
    Quería consultarte cuàl es la mejor forma de maquetar, ya que yo lo vengo haciendo con posiciones static (es decir sin definir) y floats/clears, ya que me complica bastante el tema del position. Sin embargo despuès de leer esta explicaciòn, me surge el interrogante de si no es más sencillo hacerlo de esta forma.
    Querría saber cuàles serían las desventajas de esta forma.
    Desde ya te agradezco y tambièn por todo el material que publicás.
    Saludos.

Deja un comentario

Algunos recursos para Diseñadores Web

Firebug
Genial extensión de Firefox que permite ver y editar HTML y CSS de cualquier página, entre otras cosas.
Web Developer Toolbar
Extensión de Firefox, agrega una barra de menu con muchas herramientas utiles para diseño y desarrollo web.
YSlow
Complemento para Firebug creado por Yahoo, da estadísticas de la velocidad de carga de la página así como sugerencias para mejorarla (requiere Firebug).
W3C Markup Validation Service
Valida tu HTML o XHTML, una herramienta indispensable.

Entra a la página de recursos para diseñadores web y mira la lista completa

¿Quien escribe Aprendiendo Web?

Germán MartínezHola, soy Germán Martínez, diseñador web y fundador de PreZentit.com, la primera aplicación web 2.0 creada en Perú.

La idea de Aprendiendo Web, es ser una fuente de información en español de estándares y buenas prácticas, así como de las últimas tendencias en diseño web.

Me apasiona el (X)HTML, CSS, SEO y todo lo que tenga que ver con diseño y desarrollo web.

-12.126668, -77.029910