Sredny M. Buitrago C Miguel A. Cardenas S.

[POSICIONAMIENTO Y VISUALIZACIN DE ELEMENTOS EN CSS]

ndice

1.- Introduccin 2.- Ingredientes CSS Sintaxis de CSS Elementos de CSS Definiciones y terminologa. 3.- Recetas Receta 1 Cmo establecer posicionamiento normal o esttico o Paso 1: Cree un documento HTML. o Paso 2: Cree una hoja de estilo. o Paso 3: Posicione de forma normal o Paso 4:Prubelo Receta 2 Cmo establecer posicionamiento relativo o Paso 1:Cree un documento HTML o Paso 2:Cree una hoja de estilo o Paso 3:Posicione de forma relativa o Paso 4: Prubelo Receta 3 Cmo establecer posicionamiento absoluto o Paso 1:Cree un documento HTML o Paso 2:Cree una hoja de estilo o Paso 3:Posicione de forma absoluta o Paso 4:Prubelo Receta 4 Cmo establecer posicionamiento fijo o Paso 1:Cree un documento HTML o Paso 2:Cree una hoja de estilo o Paso 3:Posicione de forma fija o Paso 4:Prubelo Receta 5 Cmo establecer posicionamiento flotante o Paso 1: Cree un documento HTML o Paso 2: Cree una hoja de estilo o Paso 3: Posicione de forma flotante o Paso 4: Prubelo Receta 6 Ocultando elementos haciendo uso de visibility o Paso 1:Cree un documento HTML o Paso 2:Cree una hoja de estilo o Paso 3: Ocultando un elemento con visibility

o Paso 4:Prubelo Receta 7 Ocultando elementos a travs de display o Paso 1:Cree un documento HTML o Paso 2:Cree una hoja de estilo o Paso 3:Oculte el elemento o Paso 4:Prubelo Receta 8 Cmo activar scrolling a contenidos que se sobresalen o Paso 1:Cree un documento HTML o Paso 2:Cree una hoja de estilo o Paso 3:Active el scrolling o Paso 4:Prubelo Receta 9 Estableciendo posicin en el eje Z a elementos divs o Paso 1:Cree un documento HTML o Paso 2:Cree una hoja de estilo o Paso 3:Establezca el nivel sobre las dems cajas o Paso 4:Prubelo

Introduccin El presente Cookbook tiene como objetivo educar al lector en cuanto se refiere a visualizacin y mtodos de posicionamiento de elementos a travs de CSS (Cascade Style Sheet), haciendo uso de las propiedades position, display,visibility y overflow. Adems se pretende informar al usuario de las capacidades ofrecidas por estas propiedades para que sean aprovechadas en el desarrollo exitoso de pginas webs dinmicas y creativas sin necesidad de poner en riesgo la accesibilidad web, as como aportar los conocimientos necesarios en el uso de estar herramientas para que el lector pueda solucionar problemas en la distribucin de los elementos de la pagina web en desarrollo. A continuacin se presentan 9 recetas que abarcan temas de posicionamiento (flotante,esttico,relativo ,absoluto) y visualizacin (display, visibility,overflow).

Ingredientes: Definiciones y terminologa CSS (Cascading Style Sheets u Hojas de Estilo en Cascada): es la tecnologa desarrollada por el World Wide Web Consortium (W3C) con el fin de separar la estructura de la presentacin. El lenguaje CSS se basa en una serie de reglas que rigen el estilo de los elementos en los documentos estructurados, y que forman la sintaxis de las hojas de estilo. Cada regla consiste en un selector y una declaracin. Vale destacar que se trata de una tecnologa ampliamente soportada por los navegadores actuales ms utilizados, lo que nos permitir realizar pginas altamente usables y accesibles. Sintaxis de CSS: La sintaxis en una declaracin de regla CSS consta de 2 partes fundamentales como lo son el selector y la declaracin Selector { Propiedad 1: valor 1; Propiedad 2: valor 2; Propiedad N:valor N;}
Declaracin 1 Declaracin 2 Declaracin N

El selector es el elemento al cual se le quiere aplicar la regla. La declaracin es qu se le quiere aplicar al selector, consta de una propiedad y un valor, la propiedad de refiere a la caracterstica que se desea modificar, y el valor es la forma como esa caracterstica ser expresada al momento de visualizar la pgina. Propiedades: las propiedades que usaremos a lo largo de este cookbook se definen a continuacin: Background-color: Establece el color de fondo de un div. Position: a partir de sta propiedad podemos establecer el modo en que una caja es mostrada en el navegador, hay 4 diferentes modos que podemos manejar : o Posicionamiento normal o esttico: es el posicionamiento que utilizan los navegadores si no se indica lo contrario, el valor de position para este modelo ser stactic. o Posicionamiento relativo: variante del posicionamiento normal que consiste en posicionar una caja segn el posicionamiento normal y despus desplazarla respecto de su posicin original, el valor de position para este modelo ser relative. o Posicionamiento absoluto: la posicin de una caja se establece de forma absoluta respecto de su elemento contenedor y el resto de elementos de la pgina ignoran la nueva posicin del elemento, el valor de position para este modelo ser absolute.

o Posicionamiento fijo: variante del posicionamiento absoluto que convierte una caja en un elemento inamovible, de forma que su posicin en la pantalla siempre es la misma independientemente del resto de elementos e independientemente de si el usuario sube o baja la pgina en la ventana del navegador, el valor de position para este modelo ser fixed. Float: a travs de esta propiedad establecemos el tipo de posicionamiento flotante que queremos, el desplazamiento necesario lo controlamos con las siguientes propiedades: o Top: indica el desplazamiento respecto al borde superior. o Bottom: indica el desplazamiento respecto al borde inferior. o Right: indica el desplazamiento respecto al borde derecho. o Left: indica el desplazamiento respecto al borde izquierdo. Height: propiedad que controla la altura de un elemento. Width: propiedad que controla la anchura de un elemento.

Recetas Receta 1: Cmo establecer posicionamiento normal o esttico de Elementos Esta receta hace uso de las propiedades position, background-color, width, height y 2 elementos divs. Paso 1: Cree un archivo html con los elementos que considere necesarios. En este caso crearemos dos (2) contenedores de la siguiente manera:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Receta 1</title> </head> <body> <div id="caja1"> Caja 1 </div> <div id="caja2"> Caja 2 sin posicionamiento </div> </body> </html>

Vale destacar que en el ejemplo en cuestin solo se aplicar propiedades de posicionamiento a un solo div, a fin de notar los efectos sobre los dems elementos que lo rodean. Paso 2: Cree las hoja de estilos con las propiedades necesarias, a continuacin creamos una hoja de estilo para cada caja o elemento:
<style type="text/css"> #caja1{ background-color:yellow; width:300px; height:200px; mas propiedades } #caja2{ background-color:green; width:200px; height:200px; mas propiedades } </style>

Paso 3: Ahora estableceremos al elemento en cuestin con posicionamiento normal, para esto el valor de la propiedad position ser static quedando nuestra hoja de estilo de la forma siguiente:

<style type="text/css"> #caja1{ position:static; background-color:yellow; width:300px; height:200px; mas propiedades } </style>

Paso 4: En este punto ya tenemos un elemento configurado con posicionamiento normal o esttico, es el momento de probarlo y el resultado debera ser el siguiente:

Receta 2: Cmo establecer posicionamiento relativo de elementos La presente receta hace uso de las propiedades position, top, left, width, height y 2 elementos divs. Paso 1: Cree un archivo html con los elementos que considere necesarios. En este caso crearemos dos (2) contenedores de la siguiente manera:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Receta 1</title> </head> <body> <div id="caja1"> Caja 1 sin posicionamiento relativo </div> <div id="caja2"> Caja 2 con posicionamiento relativo </div> </body> </html>

Vale destacar que en el ejemplo en cuestin solo se aplicar propiedades de posicionamiento relativo a un solo div, a fin de notar los efectos sobre los dems elementos que lo rodean. Paso 2: Cree las hoja de estilos con las propiedades necesarias, a continuacin creamos una hoja de estilo para cada caja o elemento:
<style type="text/css"> #caja1{ background-color:yellow; width:300px; height:200px; mas propiedades } #caja2{ background-color:blue; width:200px; height:200px; mas propiedades } </style>

Paso 3: Ahora estableceremos al elemento en cuestin con posicionamiento relativo, para esto el valor de la propiedad position ser relative, se diferencia del posicionamiento normal ya que en este modelo se toma en cuenta propiedades de desplazamiento como son top, right, bottom y left. Por consiguiente nuestra hoja de estilo quedar de la forma siguiente:
#caja2{ position:relative; top:200px; left:150px; background-color:blue; width:200px; height:200px; }

Paso 4: ya tenemos el elemento con posicionamiento relativo, el resultado de este ejemplo es el siguiente:

Receta 3: Cmo establecer posicionamiento absoluto Esta receta hace uso de las propiedades position, top, left, background-color, width, height y 2 elementos divs. Paso 1: Cree un archivo html con los elementos que considere necesarios. En este caso crearemos dos (2) contenedores de la siguiente manera:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Receta 1</title> </head> <body> <div id="caja1"> Caja 1 sin posicionamiento relativo </div> <div id="caja2"> Caja 2 con posicionamiento relativo </div> </body> </html>

Vale destacar que en el ejemplo en cuestin solo se aplicar propiedades de posicionamiento absoluto a un solo div, a fin de notar los efectos sobre los dems elementos que lo rodean. Paso 2: Cree las hoja de estilos con las propiedades necesarias, a continuacin creamos una hoja de estilo para cada caja o elemento:
<style type="text/css"> #caja1{ background-color:yellow; width:300px; height:200px; mas propiedades } #caja2{ background-color:green; width:200px; height:200px; mas propiedades } </style>

Paso 3: Ahora estableceremos al elemento en cuestin con posicionamiento absoluto, para esto el valor de la propiedad position ser absolute. Por consiguiente nuestra hoja de estilo quedar de la forma siguiente:

#caja2{ position:relative; top:200px; left:150px; background-color:blue; width:200px; height:200px; }

Paso 4: ya tenemos el elemento con posicionamiento absoluto, el resultado para el ejemplo en cuestin es el siguiente:

Receta 4: Cmo establecer posicionamiento fijo Esta receta hace uso de las propiedades position, top, left, background-color, width, height y dos (2) elementos divs.

Paso 1: Cree un archivo html con los elementos que considere necesarios. En este caso crearemos dos (2) contenedores de la siguiente manera:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Receta 1</title> </head> <body> <div id="caja1"> Caja 1 sin posicionamiento relativo </div> <div id="caja2"> Caja 2 con posicionamiento relativo </div> </body> </html>

Vale destacar que en el ejemplo en cuestin solo se aplicar propiedades de posicionamiento fijo a un solo div, a fin de notar los efectos sobre los dems elementos que lo rodean. Paso 2: Cree las hoja de estilos con las propiedades necesarias, a continuacin creamos una hoja de estilo para cada caja o elemento:
<style type="text/css"> #caja1{ background-color:yellow; width:300px; height:200px; mas propiedades } #caja2{ background-color:green; width:200px; height:200px; mas propiedades } </style>

Paso 3: Ahora estableceremos al elemento en cuestin con posicionamiento fijo, para esto el valor de la propiedad position ser fixed, Nuestra hoja de estilo quedar de la forma siguiente:
#caja2{ position:fixed; top:200px; left:150px; background-color:blue; width:200px; height:200px; }

Paso 4: ya tenemos el elemento con posicionamiento fijo, es hora de probarlo.

Receta 5: Cmo establecer posicionamiento flotante Esta receta hace uso de las propiedades float, top, left, background-color, width, height y dos (2) elementos divs. Paso 1: Cree un archivo html con los elementos que considere necesarios. En este caso crearemos dos (2) contenedores de la siguiente manera:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Receta 1</title> </head> <body> <div id="caja1"> Caja 1 sin posicionamiento relativo </div> <div id="caja2"> Caja 2 con posicionamiento relativo </div> </body> </html>

Vale destacar que en el ejemplo en cuestin solo se aplicar propiedades de posicionamiento flotante a un solo div, a fin de notar los efectos sobre los dems elementos que lo rodean. Paso 2: Cree las hoja de estilos con las propiedades necesarias, a continuacin creamos una hoja de estilo para cada caja o elemento:
<style type="text/css"> #caja1{ background-color:yellow; width:300px; height:200px; mas propiedades } #caja2{ background-color:green; width:200px; height:200px; mas propiedades } </style>

Paso 3: Ahora estableceremos al elemento en cuestin con posicionamiento flotante a la derecha, para esto el valor de la propiedad float ser right (left en caso de necesitar posicionamiento flotante a la izquierda). Nuestra hoja de estilo quedar de la forma siguiente:
#caja2{ float:right; top:200px; left:150px; background-color:blue; width:200px; height:200px; }

Paso 4: ya tenemos el elemento con posicionamiento flotante a la derecha.

Receta 6: Ocultando Elementos haciendo uso de Visibility Esta receta hace uso de las propiedades visibility, top, left, background-color, width, height y dos (2) elementos divs. Paso 1: Cree un archivo html con los elementos que considere necesarios. En este caso crearemos dos (2) contenedores de la siguiente manera:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Receta 1</title> </head> <body> <div id="caja1"> Caja 1 sin posicionamiento relativo </div> <div id="caja2"> Caja 2 con posicionamiento relativo </div> </body> </html>

Paso 2: Cree las hoja de estilos con las propiedades necesarias, a continuacin creamos una hoja de estilo para cada caja o elemento:
<style type="text/css"> #caja1{ background-color:yellow; width:300px; height:200px; mas propiedades } #caja2{ background-color:green; width:200px; height:200px; mas propiedades } </style>

Paso 3: Ahora pondremos la caja 2 como oculta, haciendo uso de la propiedad visibility como se muestra a continuacin:

#caja2{ visibility:hidden; top:200px; left:150px; background-color:blue; width:200px; height:200px; }

Paso 4: ya tenemos el elemento oculto, es hora de probarlo.

Receta 7: Ocultando Elementos a travs de Display Esta receta hace uso de las propiedades display, top, left, background-color, width , height y dos(2) elementos divs. Paso 1: Cree un archivo html con los elementos que considere necesarios. En este caso crearemos dos (2) contenedores de la siguiente manera:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Receta 1</title> </head> <body> <div id="caja1"> Caja 1 sin posicionamiento relativo </div> <div id="caja2"> Caja 2 con posicionamiento relativo </div> </body> </html>

Paso 2: Cree las hoja de estilos con las propiedades necesarias, a continuacin creamos una hoja de estilo para cada caja o elemento:

<style type="text/css"> #caja1{ background-color:yellow; width:300px; height:200px; mas propiedades } #caja2{ background-color:green; width:200px; height:200px; mas propiedades } </style>

Paso 3: Ahora pondremos la caja 2 como oculta, haciendo uso de la propiedad display como se muestra a continuacin:
#caja2{ display:none; top:200px; left:150px; background-color:blue; width:200px; height:200px; }

Paso 4: ya tenemos el elemento oculto, los valores mas usados para sta propiedad son none (oculta), inline (muestra un elemento como si fuera de linea), block (muestra un elemento como si fuera de bloque).

Receta 8: Cmo activar scrolling a contenidos que se sobresalen Esta receta hace uso de las propiedades overflow, background-color, width, height y un(1) elemento div con texto. Paso 1: Cree un archivo html texto en un elemento que lo contenga, de la siguiente manera:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Receta 1</title> </head> <body> <div id="caja1"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras vitae dolor eu enim dignissim lacinia. Maecenas blandit. Morbi mi. </div> </body> </html>

Paso 2: Cree las hoja de estilos con las propiedades que considere necesarias:
<style type="text/css"> #caja1{ background-color:yellow; width:100px; height:150px; mas propiedades } </style>

Paso 3: Active el scrolling , haciendo uso de la propiedad overflow a la que le daremos valor: scroll
#caja1{ overflow:scroll; background-color:yellow; width:100px; height:150px; }

Paso 4: es hora de probarlo, en este ejemplo se muestra lo siguiente:

Receta 9: Estableciendo posicin en el eje Z a elementos divs Esta receta hace uso de las propiedades position, z-index, top, left y tres(3) elementos divs con texto. Paso 1: Cree un archivo html que contenga las cajas necesarias, en este ejemplo se harn 3 cajas como se ve a continuacin:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Receta 1</title> </head> <body> <div id="caja1">Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 Caja 1 - Caja 1 - Caja 1 - Caja 1</div> <div id="caja2">Caja 2 - Caja 2 - Caja 2 - Caja 2 - Caja 2 - Caja 2 Caja 2 - Caja 2 - Caja 2 - Caja 2 - Caja 2 - Caja 2 - Caja 2 - Caja 2 Caja 2 - Caja 2 - Caja 2 - Caja 2</div> <div id="caja3">Caja 3 - Caja 3 - Caja 3 - Caja 3 - Caja 3 - Caja 3 Caja 3 - Caja 3 - Caja 3 - Caja 3 - Caja 3 - Caja 3 - Caja 3 - Caja 3 Caja 3 - Caja 3 - Caja 3 - Caja 3</div> </body> </html>

Paso 2: Cree las hoja de estilos con las propiedades que considere necesarias. Paso 3: Establezca el nivel sobre las dems cajas haciendo uso de la propiedad Z-index en la hoja de estilo, como se indica a continuacin:
div { position: absolute; } #caja1 { z-index: 5; top: 1em; left: 8em;} #caja2 { z-index: 15; top: 5em; left: 5em;} #caja3 { z-index: 25; top: 2em; left: 2em;}

Paso 4: es hora de probarlo.