| Artículos | 01 ABR 1998

Posición de elementos HTML mediante estilos

Tags: Histórico
Jaime Peña.

Hasta el presente, uno de los problemas más incómodos de solventar, en los documentos HTML, era el posicionamiento de elementos -textos, imágenes, formularios, etc . - . Para solventarlo, se acude masivamente al uso y abuso de las tablas, algo poco recomendable y desaconsejado por el W3C ( World Wide Web Consortium ) en cuanto haya sistemas alternativos . Por ello, las hojas de estilo, mediante su extensión al posicionamiento dinámico de elementos, son la tecnología elegida por el W3C para ampliar las capacidades de formateo, de manera que será factible fijar con precisión el lugar que ocupará la información en los documentos HTML .

El último borrador, en el momento de escribir el artículo, acerca del posicionamiento de elementos en documentos HTML, mediante hojas de estilo ( Cascade StyleSheets ) , es el denominado W3C Working Draft 19-Aug-1997, que está publicado en la dirección de Internet del World Wide Web Consortium ( W3C ) ( http://www . w3 . org/ TR/WD-positioning-19970819 ) . En el foro de W3C se advierte que este documento es un borrador intermedio, producido por el W3C CSS Working Group cómo una parte del denominado StyleSheets Activity, un proyecto más ambicioso acerca de las hojas de estilo en su conjunto . En él nos basaremos en el presente artículo .

Los autores del borrador han sido un equipo conjunto de Microsoft Corp . y Netscape Communications Corp . , lo que debe satisfacernos a todos, ya que estamos demasiado frustrados por implementaciones particulares, dependientes de los navegadores . Pero, desafortunadamente, hasta el presente Netscape ( hasta la versión Navigator 4 ) , no es capaz de manejar ningún código JavaScript que trate de modificar estilos dinámicamente y, en el caso de los posicionamientos, resultan en presentaciones de muy mala apariencia, sin respetar los fondos en toda el área, sólo los muestra en la parte de área definida que contiene texto o cualquier otro elemento . Esperemos que pronto se solventen estos fallos .

Posicionamiento y coordenadas

Un documento HTML se trata, mediante hojas de estilo, como una plantilla de coordenadas que tiene como origen su borde superior izquierdo . De ahí partirán todas las referencias, sean las que sean las unidades de medida . Las coordenadas de posicionamiento se indicarán mediante las propiedades top ( borde superior ) , left ( borde izquierdo ) , width ( ancho del área ) y height ( alto del área ) . Por ejemplo:

#izquierda{top: 20px; left: 10px;

width: 100px; height: 600px}

demarcaría un área cuyo borde superior izquierdo se encuentra en el punto ( 10,20 ) y tiene un ancho de 100 y un alto de 600 . Observe que indicar px a la derecha fija las unidades, en este caso pixeles o puntos de pantalla . Alternativamente pueden utilizarse pulgadas, mediante la unidad in ( por ejemplo 1 . 25in ) , o centímetros mediante cm ( por ejemplo 2 . 5cm ) . Muchas veces puede ser conveniente indicar tamaños porcentuales, en la forma X% ( por ejemplo 10% ) ; seguro que menos útil resultará utilizar puntos, mediante Xpt, que es la unidad adecuada en la medida de fuentes de caracteres .

Para aplicar los estilos de posicionamiento, se pueden utilizar las etiquetas < SPAN > o < DIV > , como en las declaraciones de estilos ( véanse los artículos anteriores acerca de hojas de estilo que hemos publicado en PC World ) . La diferencia estriba en que < SPAN > se utiliza para agrupar contenido inline y < DIV > para contenido a nivel de bloques . Por otra parte, los navegadores suelen incluir automáticamente una nueva línea antes y después de < DIV > y no así con < SPAN > . Si pasamos ya a ver el Listado 1, tenemos una muestra simple de un documento con dos bloques de contenido, posicionados mediante los estilos izquierda y derecha, definidos en la etiqueta < STYLE > inicial . Observe cómo se especifican los tamaños de las cajas, el color del texto y el del fondo . Por otra parte, la propiedad position será comentada más abajo e indica a partir de dónde se medirán las posiciones top y left dentro de la ventana del navegador .

Los elementos pueden tener definiciones de posicionamiento anidadas, esto es, declaraciones < SPAN ? > ? < /SPAN > dentro de otras . Por ejemplo, en el Listado 2 se muestra cómo crear un bordeado alrededor de una caja de posicionamiento, de manera que se asemeje a un borde . Si observa el código, ahora se declaran tres estilos derecha, izquierda y rodearizquierda . Al especificar:

< span id=rodearizquierda >

< span id=izquierda >

Texto alineado a la izquierda

< /span >

< /span id=rodearizquierda >

< span id=derecha >

Texto alineado a la derecha

< /span >

La caja de estilo izquierda tomará como referencia para su posicionamiento la caja de estilo rodearizquierda, ya que se encuentra declarada dentro de esta . Por tanto, observará un borde alrededor de izquierda, que es lo que sobresale rodearizquierda .

Posicionamientos absolutos y relativos

Dentro de una definición de estilos, cabe especificar posicionamientos de elementos absolutos o relativos, que se indicarán como position:absolute o mediante position:relative . El tipo predeterminado, si no se especifica nada, es posicionamiento relativo . Por ejemplo:

< STYLE >

#izquierda {position:absolute;

top: 20px; left: 10px;

width: 100px; height: 600px}

< /STYLE >

indicaría un área de inicio ( 10,20 ) , tomada como referencia el área cliente de la ventana del navegador y del ancho y alto especificado . Por contra:

< STYLE >

#izquierda {position:relative;

top: 20px; left: 10px;

width: 100px; height: 600px}

< /STYLE >

indicaría un área de inicio ( 10,20 ) , tomada como referencia el área que ocupa el elemento inmediatamente anterior en el documento HTML .

Las indicaciones de posiciones también pueden ser negativos, así por ejemplo top: -20px, significa que este área se encontrará veinte puntos de pantalla por encima de dónde acaba la posición del elemento anterior en el documento HTML .

Si se anidan especificaciones de posicionamiento, como hemos comentado en el apartado anterior, aunque se especifique position:absolute en el estilo interno, se posicionará tomando como referencia el borde superior izquierdo del estilo dentro del cual se haya declarado . En las figuras adjuntas se ilustran esquemáticamente cómo se posicionarían dos elementos que tengan estilos con propiedades position absolutas y relativas . Observe que el posicionamiento relativo toma cómo origen, el final del elemento justamente anterior en el flujo del documento HTML; en este caso, la primera caja de textos, la de la izquierda .

Visibilidad de los elementos

La visibilidad de los elementos de un documento HTML indica si éstos serán mostrados o permanecerán ocultos; se trata de una propiedad que puede ser cambiada dinámicamente, de manera que sirve para mostrar elementos alternativos que ocupen un mismo espacio dentro del documento . Las declaraciones de estilos como visible u oculto se realizan, en una hoja de estilo o en una definición de estilo inline, de la forma: visibility:hidden y visibility:visible .

Imagine dos elementos que contengan valores de las propiedades top, left, width y height iguales . Mediante código JavaScript, podremos indicar cuál de ellos se mostrará en un momento determinado; sólo deberemos crear un script de forma que, en código JavaScript, podremos mostrarlos u ocultarlos con órdenes cómo:

onClic

Contenidos recomendados...

Comentar
Para comentar, es necesario iniciar sesión
Se muestran 0 comentarios
X

Uso de cookies

Esta web utiliza cookies técnicas, de personalización y análisis, propias y de terceros, para facilitarle la navegación de forma anónima y analizar estadísticas del uso de la web. Consideramos que si continúa navegando, acepta su uso. Obtener más información