Existen creadores de proyectos para internet con desconocimiento del modelo de cajas flotantes, por ende, emplean tablas para organizar elementos de una página web, motivo por el cual obtienen códigos redundantes. Debido a ello, identificaremos el proceso de posicionamiento de los elementos cuando se les aplica cajas flotantes.

A fin de aplicar la técnica de cajas flotantes de CSS, diseñaremos páginas web con el modelo Float Box, acorde a las recomendaciones oficiales de este lenguaje de diseño.

Es común encontrar páginas web, conformadas por diferentes elementos, en el siguiente ejemplo está conformada básicamente por tres cajas. Con el lenguaje HTML es posible diferenciar una delimitada por la etiqueta div, y las otras dos con la etiqueta p.

061-01_0808_ilu01. Código de CSS y HTML de página web

061-01_0808_gra01. Vista final de la página web

Como apreciamos en la vista anterior cuando se trata de elementos de bloques, el navegador web los muestra uno debajo del otro hasta ocupar toda la pantalla. Sin embargo, para páginas llamativas es preciso realizar diseños con mayor precisión, por este motivo se utilizan elementos flotantes, a fin de reubicarlos en diferentes posiciones de la pantalla, sin importar su clasificación de bloque o en línea.

A fin de especificar un elemento como flotante utilizamos la propiedad float, y le asignamos el valor left para mostrar el elemento a la derecha, y right para moverlo hacia la izquierda. Como se observa en el ejemplo, la imagen es visualizada en la posición especificada y el texto al lado contrario.

061-01_0808_ilu02. Tipos de flotantes para elementos

Veamos el siguiente código CSS:

061-01_0808_ilu03. Código HTML para posicionar elementos flotantes

En él tenemos la especificación para mostrar diferentes posicionamientos de elementos flotantes:

• El primero es un div, con position absolute, a fin de mostar este bloque de texto de forma independiente al resto de elementos aplicamos un margen del 30% de la pantalla a la derecha, mediante la propiedad margin-left.
• El segundo es la clase uno con definición de elemento flotante a la derecha, con un tamaño del 30% de ancho, mediante la propiedad width.
• El tercero es la clase dos con definición de elemento flotante a la izquierda, con un tamaño igual al bloque anterior.

Con los elementos definidos anteriormente, observamos en la ilustración siguiente la división en tres columnas de la pantalla a fin de mostrar los tres elementos del bloque en el mismo nivel. Cuando utilizamos elementos flotantes, es importante considerar las etiquetas de posicionamiento, margen, ancho, y alto, así como otras para especificar el comportamiento del nuevo estilo de la caja CSS.

061-01_0808_gra01. Vista del usuario con posicionamiento específico

Keynotes 

• Cuando se trata de elementos de bloques, el navegador web las muestra una debajo de la otra hasta ocupar toda la pantalla.
• Para páginas llamativas es preciso realizar diseños con mayor precisión, por este motivo se utilizan elementos flotante, a fin de reubicarlos en diferentes posiciones de la pantalla, sin importar su clasificación de bloque o en línea.
• Para especificar un elemento como flotante utilizamos la propiedad float, y le asignamos el valor left para mostrar el elemento a la derecha, y right para moverlo hacia la izquierda.
• Cuando utilizamos elementos flotantes, es importante considerar las etiquetas de posicionamiento, margen, ancho, y alto, así como otras para especificar el comportamiento del nuevo estilo de la caja CSS.

Misión

A fin de utilizar correctamente la técnica de cajas flotantes de CSS, implementa un diseño de páginas web con el modelo Float Box, según las recomendaciones oficiales de este lenguaje.

Pasos a seguir:

• Crea un documento HTML o utiliza uno antiguo.
• Ubica el estándar oficial de CSS y lee las recomendaciones sobre float box.
• Crea un diseño básico de página web con el modelo Float Box.
• Ubica un experto en la materia mediante vKonnect y muéstrale el código creado a fin de tomar nota de sus sugerencias.

Sabrás que has tenido éxito cuando el documento se ejecute correctamente en el navegador web.

Ingresa las modificaciones necesarias luego de tu presentación y comparte el resultado final en tu vPages. Pide a tus compañeros sugerencias de optimización.

Tiempo disponible: 3 horas.

Mediante el diseño de páginas web con el modelo Float Box, según las recomendaciones oficiales de CSS, organizamos eficientemente los elementos en la presentación de un proyecto para internet. También, aplicamos correctamente la técnica de las cajas flotantes de CSS. Con paciencia y práctica constante definiremos y ubicaremos cajas flotantes correctamente.