Comunidad de diseño web y desarrollo en internet online

Tutorial de posicionamiento y layout en CSS

¿A qué le llamamos posicionamiento?

Obviamente no me refiero a los buscadores como Google o Yahoo, posicionamiento en CSS consiste en ubicar los elementos HTML en la pagina, el "layout" o distribución de la pagina. Basicamente esto se logra ordenándole desde CSS a los elementos que tengan cierto tamaño y posición, además de obtener una buena organización del código HTML o XHTML.

El posicionamiento con CSS nos permite control total sobre los elementos de la pagina, además con documentos muy livianos y completamente válidos ante W3C.

Los Divs

Antes de comenzar con el CSS quiero exponer aqui la importancia de usar los divs, un div es basicamente un contenedor, en el podemos meter cualquier clase de contenido, con la gran ventaja de que los podemos manipular a nuestro antojo con CSS, colocarlo en cualquier parte de la pagina, de cualquier tamaño, de cualquier color, con bordes o sin ellos, con imagenes de fondo o sin ellas, a diferencia de las tablas, los divs no se dividen por dentro, pero podemos anidarlos y organizarlas casi como las tablas (en caso de ser necesario).

Para lograr que el posicionamiento no se vuelva complicado, debemos tener en cuenta que la organización en el codigo HTML es muy importante, tener bien estructurados los elementos nos facilitará el trabajo con CSS, con esto quiero decir que debemos contar con un código semántico.

Semántica
Proviene del griego "semantikos", que quería decir "significado relevante", derivada de "sema", lo que significaba "signo") Se dedica al estudio del significado de los signos lingüísticos y de sus combinaciones, desde un punto de vista sincrónico o diacrónico. (definición de wikipedia)

Esto significa que a la hora de hacer el codigo HTML, este bien organizado jerárquicamente, o sea anidar los divs segun importancia, agrupados segun sección, utilizar las etiquetas h1, h2, h3, etc para los títulos, las etiquetas <ul> y <li> para las listas, las etiquetas <p> en los parrafos, ayuda a organizar mejor el contenido, ademas de que estan ahi para eso. La mayoria se ha olvidado del uso de estas etiquetas por trabajar en entornos gráficos para diseñar, o porque solo le dan importancia a lo que se ve. Otras ventajas son que los buscadores entienden el codigo, por ejemplo google sabe que <h1>Titulo</h1> es un titulo y le da la importancia necesaria, si alguien usa Lynx para navegar, o cualquier navegador de texto, podra ver un contenido ordenado y lógico y es mucho más fácil de mantener/modificar. Un ejemplo de una estructura sencilla:

<!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=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
</head>

<body>
<div id="contenedor">
<div id="encabezado">
 <h1>Titulo de la Pagina</h1>
 </div>
 <div id="menu">
 <ul> 
 <li><a href="#">Link</a></li>
 <li><a href="#">Link</a></li>
 <li><a href="#">Link</a></li>
 <li><a href="#">Link</a></li>
 </ul>
 </div>
 <div id="contenido">
 <h2>Subtitulo 1 </h2>
 <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur turpis purus, fringilla at, tristique vitae, venenatis vel, arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus eget orci nec risus posuere facilisis. Proin sit amet nisl. Curabitur lectus felis, interdum vitae, vestibulum ultrices, vehicula vitae, nibh. Aliquam augue mi, viverra quis, fermentum id, mattis vitae, quam. In neque. Integer wisi metus, tempor vitae, tempus vitae, luctus a, enim. Mauris justo. Nulla rutrum sapien nec mi. Proin dolor neque, auctor ut, pulvinar ut, mattis eu, erat.</p>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed commodo facilisis arcu. Nunc semper. Donec in risus at tortor semper commodo. Integer porttitor, mauris in tempor congue, nisl erat imperdiet mi, non consequat wisi est in est. Aenean lobortis, wisi ac varius malesuada, lorem est varius enim, sit amet ultrices quam risus sed quam. Maecenas euismod adipiscing diam. Sed dui tortor, pellentesque at, vehicula et, gravida vel, magna. Integer condimentum dignissim erat. </p>
 <h3>Sub-subtitulo</h3>
 <p> Praesent tincidunt. Nam quis quam at nunc pretium eleifend. Praesent ipsum sapien, aliquam a, scelerisque sit amet, consectetuer in, arcu. Maecenas at wisi in augue tempor tincidunt. Fusce viverra ante gravida quam. Vestibulum varius lacus vitae lorem. Sed malesuada. Maecenas non urna vitae metus elementum imperdiet. Donec justo enim, pulvinar ultricies, dapibus aliquam, laoreet sed, libero. Ut odio purus, ultricies in, condimentum non, tincidunt ac, odio. Nulla eget velit. Suspendisse massa. </p>
 <div id="footer">Copyright2005 - Derechos reservados</div>
 </div></div>
 </body>
 </html>

Asi se ve el ejemplo sin estilos

De aqui en adelante vamos con lo que nos interesa, lo primero que haremos será centrar nuestro div "contenedor" en la ventana del navegador, y darle un tamaño específico

/*empezamos por esto, para evitar resultados extraños en distintos navegadores, y algo de estilo al texto*/
body {
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:12px;
    color:#666666;
    text-align:center; /*aqui mandamos a centrar todo el contenido*/ 
}


y luego al div:

#contenedor {
    width:600px; /*ancho total de la pagina*/ 
    border:1px solid #333333; /*encadeno los 3 atributos claves del borde en una sola linea, ahorrando codigo XD*/ 
    background-color:#FFF8F0;
    margin:10px auto; /*10px arriba y abajo, y auto a los lados, para los navegadores nuevos es suficiente para centrar la pagina*/ 
    text-align:left; /*aqui alineamos todo de nuevo a la izquierda, pero dentro del contenedor*/ 
}

Bien, ya tenemos el div contenedor centrado en la pagina, ahora vamos con el "encabezado":

Aquí, vemremos como funciona float. Así como suena, float nos permite "flotar" elementos hacia la izquierda o la derecha de la pagina, haciendo que los demas elementos fluyan alrededor

#encabezado {
    margin:10px; /*para que no se pegue al borde*/ 
    padding:10px; /*algo de relleno*/
    width:224px; /*este ancho es para que cuadre con el texto*/ 
    height:50px; /*idem*/ 
    border:1px solid #333333; /*decoracion*/ 
    background-color:#CC6600; /*more*/ 
    float:left; /*lo flotamos a la izquierda*/ 
    display:inline; /*(*)*/ 
}

(*)display:inline; se usa en este caso para corregir un error en IE, en la interpretación del margin y el padding, si flotamos a la izquierda, y hay 10px de margin a la izquierda, IE sumara el doble de ese margen. Con esta linea corregimos eso.

Ahora algo de estilo para el titulo:

#encabezado h1 { /*encadenamos el identificador del div, con la etiqueta par areferirnos solo al h1 dentro del div encabezado, asi no afectara otros h1 en el resto del documento.*/ 
    font-size:18px;
    font-weight:bold;
    width:224px;
    border-bottom:16px solid #FFFFFF;
    color:#FFFFFF;
    margin:0; /*los h1 vienen con margen, con esto se lo quito*/ 
    text-transform:uppercase; /*convierte todas en mayusculas*/ 
    padding-bottom:10px;
}

Seguimos con el menu:

#menu {
    float:left;
    margin:10px 10px auto 0;
    border:1px solid #333333;
    width:320px;
    height:24px;
} 

Y luego con la lista. las listas traen varios pre-formatos desde HTML, como las viñetas, margen, saltos de línea a cada item, padding, etc... Aqui vamos a cambiar completamente el aspecto de una lista, con sus vinculos dentro.

ul {
    list-style-type:none; /*con esto quitamos las viñetas*/
    margin:0; /*le quitamos el margen a la lista*/ 
    padding:0; /*y el relleno*/
}
li {
    margin:0; /*le quito el margen al elemento de la lista*/ 
    float:left; /*y los floto a la izquierda para eliminar el salto de linea*/ 
}
li a {
    display:block; /*con esto el vinculo tendra un area rectangular, asi no sera solo el texto*/ 
    background-color:#CC3300; /*algo de color*/ 
    color:#FFFFFF; /*mas*/ 
    width:58px; /*defino el ancho del rectangulo del vinculo*/
    padding:4px 0 5px 22px; /*sumamos el relleno al ancho y alto del rectangulo para obtener el div #menu completamente ocupado con los ítems del menú*/ 
    text-decoration:none; /*elimino el subrayado del vínculo*/ 
    font-weight:bold; /*decoración*/ 
    text-transform:uppercase; /*decorare los vinculos en mayusculas*/
}
li a:hover {
    background-color:#999900; /*decoración para el evento hover (mouse encima)*/ 
}

Esto es suficiente para cambiar el aspecto de la lista, y los vinculos en el menu. Así podemos jugar con los anchos y rellenos para lograr menúes mas complejos, poniendole bordes, etc ...

Ahora el contenido:

#contenido {
    width:580px; /*el ancho mas el padding me da 600px de ancho que es loque mide la pagina */
    clear:both; /*con esto nos aseguramos de que no se ponga nada a los lados*/ 
    padding:10px;
} 

Algo de estilo para los titulos:

#contenido h2 {
    font-size:16px;
    color:#CC3300;
    width:246px;
    text-transform:uppercase;
    border-bottom:1px dotted #CC3300;
}
#contenido h3 {
    width:246px;
    font-size:14px;
    color:#999900;
    border-bottom:1px dotted #999900;
}

Y terminamos con el footer:

#footer {
    width:560px; /*menos porque debemos sumar el padding del div contenido*/ 
    text-align:right;
    padding:10px;
    font-size:80%; /*mas pequeño el texto*/ 
    font-style:italic;
    color:#999999;
}

Los comentarios en el codigo explican lo que hace cada uno de los atributos clave usados en el ejemplo.

Y con esto terminamos nuestra pagina, obteniendo este ejemplo terminado , una pagina semántica, facilmente entendible por los navegadores, los buscadores y por nosotros mismos.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate