|
|||||
|
|
|
|
|
|
|
|
||||
|
|
||||
|
|||||
formularios con estilo (II)
* posicionamiento de elementos de formulario.
Lo que sigue ahora es también exclusivo de Explorer, y es una aplización directa de las Hojas de Estilo en Cascada y del hecho de que este navegador reconoce cualquier elemento HTML como un objeto en sí mismo. Como consecuencia de ello podemos usar los atributos de posicionamiento de CSS para situar relativa o absolutamente un elemento en pantalla. Esto ofrece la gran ventaja de que no nos vemos sometidos a casi ninguna limitación en el diseño, pudiendo situar nuestros elementos donde queramos.
Para posicionar elementos de formulario dentro de la ventana de nuestro navegador deberemos introducir los parametros position (absolute / relative), top. (normalmente en píxeles, y define la posición de la esquina superior izquierda del elemento respecto al borde superior de la ventana del navegador) y left (normalmente en píxeles, que determina la distancia respecto al borde izquierdo de la ventana del navegador) dentro del atributo style del elemento.
La sintaxis general sería del tipo:
<form>
<input type="Text" style="width:100px;height:20px;background-color:red;color:yellow;font-size:10pt;
font-family:Verdana;text-align:center;position:absolute;top:50px;left:200px;">
</form>
que nos situaría la caja de texto a 50 píxeles por debajo del borde superior de la ventana del navegador y a 200 píxeles del borde izquierdo.
ver resultado.
En el caso de que varios elementos se superpusieran aparecería aquel que estuviera situado antes en la estructura del código HTML de la pagina. Esto se puede cambiar mediante el atributo z-index, que define una coordenada z o de profundidad de los elementos en la pagina.
<form action="cgi-bin/control.cgi"
method="post" enctype="text/plain" name=
"miform">
<textarea name="comentario2" cols="20" rows="10"
style="position:absolute;top:50px;left:50px;z-index:1;">
</textarea>
<textarea name="comentario2" cols="20" rows="10"
style="position:absolute;top:70px;left:70px;z-index:2;">
</textarea>
</form>
ver resultado.
* posicionamiento mediante capas.
El gran inconveniente de posicionar elementos de formulario mediante estilos directos es que aquellos visitantes que usen Nestcape Navigator no veran una pagina agradable entonces. ?Qué podemos hacer si queremos posicionar un elemento para que sea visible en ambos navegadores?.
La solución pasa por colocar los elementos dentro de una capa, creada mediante las etiquetas <DIV> y/o <SPAN>, con sus respectivas de cierre. Con esto, podemos posicionar estas capas, y con ellas los elementos que contienen, en nuestra pagina, y esto sera comtemplado adecuadamente por los dos navegadores.
Un ejemplo de esto sería, basandonos en el anterior:
<form action="cgi-bin/control.cgi" method="post"
enctype="text/plain" name= "miform">
<div
style="position:absolute;top:50px;left:50px;width:200px;height:200px;clip:rect(0,200,200,0);z-index:1;">
<textarea
name="comentario1" cols="20" rows="10"></textarea>
</div>
<div
style="position:absolute;top:90px;left:90px;width:200px;height:200px;clip:rect(0,200,200,0);z-index:2;">
<textarea name="comentario2" cols="20"
rows="10"></textarea>
</div>
</form>
ver resultado.
Y así y todo seguimos con las pegas en Nestcape, ya que las capas se activan al coger el foco el textarea que contienen, con lo que se produce una situación liosa. Ademas, para que funcione esto bien deberemos introducir en cada capa la pareja de etiquetas <form>...</form>, lo que nos va a ocasionar bastantes quebraderos de cabeza a la hora de recoger los datos para enviarlos y de validar y acceder mediante JavaScript a todos los elementos que tengamos. Con Explorer esto no ocurre, ya que siempre la primera textarea estara debajo de la segunda, aunque reciba el foco.
De todas formas lo dicho en este capítulo sobre elementos superpuestos es sólo orientativo, ya que pocas veces vamos a necesitar utilizar este efecto.
 |
 |