HTMLpointHTMLpoint HTMLpoint.com


 Colocación con DHTML 2/3

 por Massimiliano Valente

Examinemos, antes de nada, el código que gestiona la formatación del contenido del documento a través de las hojas de estilo. Este código está comprendido entre las marcas <HEAD> y contiene información fundamental para la colocación de los elementos en la página:


Muestra el ejemplo práctico

La colocación prevista por el borrador de trabajo CSS-P se divide en: estática, absoluta y relativa.

La colocación estática (position:static) no tiene ningún efecto sobre la formatación del documento, que se gestiona como si se tratara de un normal hipertexto en HTML estático.

La colocación relativa (position:relative) se refiere a las propiedades que el elemento asume respecto a los demás objetos presentes en el documento, a través de las propiedades "top" y "left".

La colocación absoluta hace referencia a la distancia del margen superior (top) y del margen izquierdo (left) y coloca los elementos fuera del diseño de página tradicional HTML. Dicho de otro modo, la colocación del elemento no depende de los otros objetos presentes en la página, sino exclusivamente de valores absolutos. Este tipo de colocación prevé el uso de SPAM o DIV que, como se verá, se insertan sucesivamente.

Absolute impide que el navegador aplique sus algoritmos de colocación y, por tanto, si la ventana es redimensionada, la posición de los elementos no cambia.

Z-INDEX define la posición de un elemento en la página en relación con el eje z. A diferencia de los ejes x (que definen la posición de derecha a izquierda) e y (de arriba hacia abajo), los ejes y se refieren a la tercera dimensión, es decir, a la que va de detrás hacia adelante. De esta manera, es posible gestionar varios layer y obtener una serie de hojas superpuestas y que pueden verse individualmente. en el código examinado el elemento "Z-INDEX:10" está superpuesto respecto a "Z-INDEX:20", si bien esté colocado en modo absoluto en la misma porción de página (LEFT:180px; TOP:70px;).

La propiedad VISIBILITY determina qué layer tiene que visualizarse al cargar la página y cuáles, por el contrario, quedarán escondidos y se visualizarán tan sólo cuando se verifiquen ciertos eventos. En este ejemplo, la propiedad del primer layer es inmediatamente "visible", al contrario de las otras impostadas en "hidden".

La propiedad "overscroll" gestiona los contenidos que exceden las dimensiones del layer. Dicha propiedad asume distintos valores: visible (visualiza todo el contenido), hidden (visualiza sólo los contenidos que entran en las dimensiones del layer), auto (inserta el scroll cuando el contenido excede las dimensiones) y scroll (inserta siempre el scroll de página).

Las propiedades TOP, LEFT, WIDTH y HEIGHT definen respectivamente: la distancia del margen superior, del margen izquierdo, la anchura y altura del layer. Si no se imposta ningún valor para las dos últimas propiedades, el layer se adapta automáticamente a las dimensiones efectivas del contenido. Las distancias se expresan generalmente en píxel (px), aunque pueden utilizarse también porcentajes u otras unidades de medida previstas por las hojas de estilo.

La posición de los layer es siempre la misma (180-70px) para generar el efecto de superposición característico de este ejemplo.

Los colores de fondo de cada uno de los layer pueden modificarse gracias a "background-color" para MSIE, y "layer-background" para Netscape. Es posible impostar una imagen de fondo insertando "background-image(nomefile.gif)" para MSIE, y "layer-background-image:URL(nomefile.gif)" para Netscape:

#layer2 {POSITION:absolute; Z-INDEX:20; VISIBILITY:hidden; LEFT:180px; TOP:70px; width:250px; height:220px; background-image:URL(fondo2.jpg); layer-background-image:URL(fondo2.jpg);}

El código:

P {font-size:50px; font-weight:bold; font-family:IMPACT; color:#000000;} prevé la formatación de las partes de texto precedidas por la marca <P>. Por su parte, el código:

A:lenk, A:visited { text-decoration:none; color:blue; }
A:hover { text-decoration:underlene;)


define el color que se asignará a los enlaces textuales así como que no deben ir subrayados más que cuando el ratón pasa por encima. Esta última característica funiciona correctamente sólo con MSIE 4, mientras que Netscape permite sólo evitar el subrayado.


  Vuelve a principio de página