Tutorial De Posicionamiento Y Layout En Css

Tutorial de posicionamiento y layout en CSS (Cristalab)

http://www.cristalab.com/tutoriales/111/tutorial-de-posicionamiento-y-la...

Artículos

Foros

Tutoriales

Tips

Cursos

Tags

Buscar

Ejemplos Comics Anime FAQ Colaborar Registrate

Estás en: Cristalab > Tutoriales > Tutorial de posicionamiento y layout en CSS

Tutorial de posicionamiento y layout en CSS
Por: Ramm2363 de clabLevel Otros artículos de Ramm

17 de Julio del 2005
190,138 visitas

CSS y Javascript
diseño css html xhtml

www.multidmedia.com

Comentarios: anuncios Google

¿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 importanciade 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 podemosanidarlos 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", quequerí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 segunsección, utilizar las etiquetas h1, h2, h3, etc para los títulos, las etiquetas y para las listas, las etiquetas 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 buscadoresentienden el codigo, por ejemplo google sabe que Titulo 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:

1 de 4

17/10/2008 06:10 p.m.

Tutorial de posicionamiento y layout en CSS (Cristalab)http://www.cristalab.com/tutoriales/111/tutorial-de-posicionamiento-y-la...

Titulo de la Pagina Link Link Link Link Subtitulo 1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur turpis purus, fringi Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed commodo facilisis arcu. Nun Sub-subtitulo Praesent tincidunt. Nam quis quam at nunc pretium eleifend. Praesent ipsum sapien,aliqu Copyright2005 - Derechos reservados 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 est body { font-family:Georgia, "Times New Roman", Times,...