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.
CierreMediante 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.
