FLOAT
La posición flotante o float-position, funciona mediante la relación que existe entre los elementos de una página, en lugar de definir una ubicación específica.
Esto puede resultar un poco difícil de entender al inicio, pero una vez que domine la posición flotante será capaz de diseñar la ubicación de los elementos de toda una página web.
Ahora diseñamos un pequeño formulario sobre el cual emplearemos la posicion flotante; por el momento el código de nuestro formulario será:
Ahora diseñamos un pequeño formulario sobre el cual emplearemos la posicion flotante; por el momento el código de nuestro formulario será:
<!DOCTYPE HTML><html lang = "es"><head><title>Formulario</title><meta charset = "UTF-8" /></head><body><form action = ""><fieldset><label>Nombre</label><input type = "text" id = "txtNombre" /><label>Dirección</label><input type = "text" id = "txtDirec" /><label>Teléfono</label><input type = "text" id = "txtTel" /><button type = "button">Enviar</button></fieldset></form></body></html>
Antes de trabajar con el atributo FLOAT, revisemos unas pocas cosas sobre el formulario anteriormente visto.
- El formulario tiene un recipiente fieldset. La mayoría de los elementos del formulario son elementos en línea por lo tanto el formulario se mostrará de la siguiente manera
- En la práctica común nosotros queremos hacer que la disposición de un formulario sea en forma de una tabla, sin embargo las buenas prácticas nos indican no utilizar las tablas como tal, por lo tanto debemos ocupar las reglas que CSS nos proporciona para crear esta disposición.
Para esto existen tres maneras de tratar las disposiciones de los elementos en un navegador.
- INLINE: Coloca el texto tal cual los implementamos en el código sin saltos de linea o cambios.
- BLOCK: Los elementos cobran independencia y se colocan en su propia linea, es decir uno debajo del otro.
- ALTERNATIVE: Especifica una disposición distinta de os elementos, el elemento float es un ejemplo de ello.
Disposición en bloque "block"
Conociendo estas disposiciones, veremos como aplicar a nuestro formulario del ejemplo anterior una vista así:
Para esto simple basta colocar una disposición en bloque a los elementos input y button y nuestro código quedará de la siguiente manera.
Los cambios realizados se encuentran en azul.<!DOCTYPE HTML><html lang = "es"><head><title>Formulario</title><meta charset = "UTF-8" /><style>input {display: block;}button {display: block;}</style></head><body><form action = ""><fieldset><label>Nombre</label><input type = "text" id = "txtNombre" /><label>Dirección</label><input type = "text" id = "txtDirec" /><label>Teléfono</label><input type = "text" id = "txtTel" /><button type = "button">Enviar</button></fieldset></form></body></html>
Vista en dos columnas usando "float"
El atributo "float" nos permite remover la disposición normal de un elemento y aplicarle una posición flotante diferente.
El atributo "float" describe la relación entre un elemento y sus vecinos
Veamos un ejemplo:
Para este ejemplo,debemos sustituir los estilos del código anterior por estos:
<style>label {float: left;width: 30%;}input {display: block;}button {display: block;}
</style>
En este ejemplo mandamos los elementos "label" a la izquierda y les damos un tamaño de 30% respecto al tamaño de la página.
Al darle un ancho de 30% a los elementos label y un "display: block" a los elementos input, hacemos que los elementos input se posicionan en la derecha.
Al darle un ancho de 30% a los elementos label y un "display: block" a los elementos input, hacemos que los elementos input se posicionan en la derecha.
En la imagen de arriba veremos en el recuadro azul el elemento label, correspondiente al estilo "float" y en el recuadro naranja veremos el elemento correspondiente al estilo en bloque, el cual ocupa el espacio restante del lado derecho, es decir, el 70% restante y al no haber mas espacio, el siguiente elemento label se posiciona debajo y así sucesivamente.
No hay comentarios:
Publicar un comentario