HTMLpointHTMLpoint HTMLpoint.com


 Colocación dinámica



Debido a las consecuencias negativas de la "guerra de los navegadores", muchos de los ejemplos de este tutorial son compatibles exclusivamente con Internet Explorer. La carrera por la "tecnología propietaria" ha llevado a Netscape y Microsoft a adoptar soluciones incompatibles y, a menudo, contrapuestas, sobre todo en el caso del HTML dinámico no es raro que demo para Explorer creen errores en los script de Netscape y viceversa). Las hojas de estilo son también víctimas de este duelo, aunque no faltan puntos y tecnologías sobre los que se ha alcanzado un acuerdo. Las especificaciones de la colocación dinámica, por ejemplo, ven de acuerdo a Microsoft y Netscape, las cuales, a través de sus representantes en el W3C, han colaborado en la redacción de un borrador de trabajo llamado CSS-P (CSS positioning). Gracias a esta colaboración, tanto Netscape 4 como Explorer 4 y 5 reconocen e interpretan correctamente la colocación dinámica dentro de la página. Pero ¿qué entendemos por colocación dinámica?.
Los documentos HTML se colocan dentro de la página según un esquema de flujo de datos. Esto significa que se parte del margen superior izquierdo del documento y cada elemento se coloca en base al anterior, sin posibilidad de superponer objetos. Las especificaciones de las CSS-P permiten, sin embargo, tres tipos distintos de colocación:

  • estática: se trata de la colocación predefinida por el navegador, es decir la tradicional de HTML, por la que cada elemento se coloca según el flujo de datos del documento;

  • absoluta: este tipo de colocación permite abstraer la CSS del flujo de datos, permitiendo su colocación en cualquier punto de la página de manera completamente independiente de los demás elementos, los cuales pueden además superponerse por encima o por debajo.

  • relativa: dicha colocación no sale del flujo de datos ni produce ninguna modificación respecto a los elementos colocados de manera estática. Asume características propias de la colocación dinámica cuando se impostan las propiedades left y right, que mueven el elemento a la izquierda y arriba del que lo precede.

    La colocación absoluta y relativa permiten a los elaboradores sistemar con precisión elementos en el documento, superponerlos y, mediante los script, moverlos. De esta manera, los diseñadores web tiene un control sobre el documento similar al que poseen los gráficos tradicionales sobre los documentos tradicionales.

    El borrador de trabajo de CSS-P define las propiedades de las hojas de estilo relativas a la colocación dinámica. Muchas de estas propiedades son ya conocidas por HTML clásico (las propiedades width y height, por ejemplo), mientras que otras son, sin embargo, inéditas. Para comprender mejor de qué estamos hablando, conviene poner que veamos algún ejemplo práctico con su correspondiente código.
    Digamos antes de nada que aquí haremos uso de hojas de estilo en línea,ya que es más fácil definir la colocación para cada elemento. Nada impide que se usen las CSS incorporadas o externas para crear estructuras de página complejas.

    He aquí un ejemplo de colocación absoluta con uso de las propiedades top y left:

    <DIV STYLE="position:absolute; top:100px; left:100px">
    <IMG SRC="elemento01.gif" border=0>
    </DIV>


    Las medidas se expresan en píxel (px), pero se pueden expresar también con otros valores: puntos (pt), centímetros (cm), pulgadas (in), etc. Todas hacen referencia al margen superior izquierdo.
    El ejemplo que consideramos crea una hoja de estilo con colocación absoluta (position:absolute) distanciada del margen superior e izquierdo de 100 píxel. Todo lo que se encuentra dentro de la CSS (la imagen elemento01.gif) se colocará de esta manera.

    Muestra el ejemplo práctico


    Para comprender la diferencia práctica entre colocación absoluta y relativa, póngamos otro ejemplo. Se trata de un sencillo te sin ningún tipo de formatación, que el documetno interpreta como flujo de elementos. Dentro de este texto, impostamos una hoja de estilo con colocación relativa de las palabras "sitio italiano", con una distancia del elemento a la izquierda más cercano de 10 píxel:

    HTMLpoint es el <SPAN STYLE="position:relative; top:10px; left:10px"><B>sitio italiano></B></SPAN> de web publishing más visitado y con mayor autoridad. Decenas de tutorial, centenares de Javascript, de applet Java, de demo para Dynamic HTML.

    Hemos usado la marca SPAN en lugar de DIV ya que esta última es más apropiada para secciones de texto de una cierta envergadura, mientras que la primera se adapta mejor a frases breves como ésta. Otra consideración se refiere al salto de línea que DIV impone a los elementos.
    En el ejemplo práctico que sigue hemos usado ambas con resultados distintos.

    Muestra el ejemplo práctico


    Otros parámetros que pueden impostarse son width y height que establecen, respectivamente, la anchura en horizontal y la altura en vertical de la hoja de estilo. También en este caso pueden usarse indiferentemente las medidas permitidas por las hojas de estilo:

    <DIV STYLE="position:absolute; top:100px; left:100px; width:150px; height:150px">
    HTMLpoint es el sitio italiano de web publishing más visitado y con mayor autoridad. Decenas de tutorial, centenares de Javascript, de applet Java, de demo para Dynamic HTML.
    </DIV>


    El texto se recoge en una hoja de estilo de dimensiones equivalentes a 100px de alto e igual de ancho. La distancia del margen superior izquierdo es la expresada precedentemente.

    Muestra el ejemplo práctico


    La propiedad visibility determina la visibilidad de un elemento. Puede estar impostado en hidden o visible

    <DIV STYLE="position:absolute; top:100px; left:100px; width:150px; height:150px; visibility:hidden">
    <IMG SRC="elemento01.gif" border=0>
    </DIV>


    hidden hace invisibles los elementos, mientras visibile los hace visibles:

    <DIV STYLE="position:absolute; top:100px; left:150px; width:200px; height:150px; visibility:visible">
    <IMG SRC="elemento02.gif" border=0>
    </DIV>


    Muestra el ejemplo práctico


    Se ha dicho al inicio que las CSS-P permiten superponer imágenes, texto y elementos de unos y otros. La jerarquí con la cual se superponen dichos elementos depende, si no se establece de otra forma, de la colocación en el código HTML. Un elemento colocado detrás de otro se superpondrá a éste, como en el ejemplo que sigue

    <DIV STYLE="position:absolute; top:30px; left:100px; width:200px; height:200px; visibility:visible">
    <IMG SRC="elemento01.gif" border=0>
    </DIV>


    <DIV STYLE="position:absolute; top:150px; left:150px; width:200px; height:200px; visibility:visible">
    <IMG SRC="elemento02.gif" border=0>
    </DIV>

    Muestra el ejemplo práctico


    Es posible modificar la impostación por defecto por la que un elemento escrito sucesivamente en el código se superpone a los elementos precedentes, mediante la propiedad z-index. Esta propiedad define el orden gráfico de los elementos mediante valores numéricos. El elemento principal se imposta como valor positivo "1", mientras los otros, que están en posición inferior, lo hacen con valor negativo "-1". Retomando el ejemplo precedente y dejando inalterado el orden jerárquico, es posible superponer el segundo elemento al primero gracias a la propiedad z-index:

    <DIV STYLE="position:absolute; top:30px; left:100px; width:200px; height:200px; visibility:visible z-index:1">
    <IMG SRC="elemento01.gif" border=0>
    </DIV>


    <DIV STYLE="position:absolute; top:150px; left:150px; width:200px; height:200px; visibility:visible z-index:2">
    <IMG SRC="elemento02.gif" border=0>
    </DIV>

    Muestra el ejemplo práctico


    La propiedad overflow permite gestionar, mediante el uso de scroller, los contenidos de los documentos que sobrepasan el área impostada con height y width. Para ello, es necesario que la propiedad overflow se imposte en "scroll" y no en "hidden". En este segundo caso, de hecho, los elementos se visualizan con los límites del tamaño del área de recorte pero sin el scroller lateral:

    <DIV STYLE="position:absolute; overflow:scroll; float:left; top:10px; left:10px; width:150px; height:100px">
    HTMLpoint es el sitio italiano de web publishing más visitado y con mayor autoridad. Decenas de tutorial, centenares de Javascript, de applet Java, de demo para Dynamic HTML.
    </DIV>


    <DIV STYLE="position:absolute; overflow:hidden; float:left; top:150px; left:10px; width:150px; height:100px">
    HTMLpoint es el sitio italiano de web publishing más visitado y con mayor autoridad. Decenas de tutorial, centenares de Javascript, de applet Java, de demo para Dynamic HTML.
    </DIV>


    Muestra el ejemplo práctico


    Todos los elementos soportan la colocación estática y relativa; la colocación absoluta sólo los siguientes:

  • Applet
  • Button
  • Div
  • Fieldset
  • IFrame
  • IMG
  • Input
  • Object
  • Select
  • Span
  • Table
  • Textarea


  • Para aprovechar lo visto hasta ahora de colocación dinámica, podemos pasar a exponer la utilización práctica de dicha tecnología. Crear títulos con efecto sombreado se podía hacer en HTML clásico exclusivamente recurriendo a imágenes (creadas con los correspondientes programas de gráfica web y retoque de fotos. Nada que decir sobre esta elección, pero es obvio que la presencia de imágenes hace que la página sea pesada en términos Kb. Con las CSS-P podemos obtener el mismo resultado usando simple texto en lugar de imágenes. No se trata de un procedimiento complejo, sino sencillo y, en algunos aspectos, podríamos decir que incluso banal. Se crea un texto asignándole un estilo, un tamaño y una cierta colocación absoluta en la página:

    <DIV STYLE="position:absolute; font-size:100px; font-family:impact; top:10px; left:10px; color:black; z-index:1">
    HTMLpoint
    </DIV>


    Para el texto se ha usado la fuente impact de tamaño igual a 100 píxel y color negro, distanciado 10 píxel del margen izquierdo y superior . La propiedad z-index está impostada en el valor positivo 1. Hasta aquí nada de particular, visto que se trata de un texto negro sin sombreado. Para insertar la sombra, tenemos que añadir este código:

    <DIV STYLE="position:absolute; font-size:100px; font-family:impact; top:15px; left:15px; color:gray; z-index:-1">
    HTMLpoint
    </DIV>


    El texto queda del mismo tamaño y con el mismo estilo pero cambia el color (del black precedente al gray actual). La distancia del estilo del margen superior e izquierdo aumenta respectivamente 5 píxel y la propiedad z-index está impostada en el valor negativo -1. Todo esto crea el primer texto superpuesto al segundo, el cual al estar distanciado 5 píxel pero ser de igual dimensión, crea un efecto sombreado.

    Muestra el ejemplo práctico


  •   Vuelve a principio de página