Template Saga 2.0 - Blog Oficial
Aprovecha OpenCms 8 al máximo

Inicio  »  blog  »  Articulos

Maquetación del Recurso Template SAGA: Caja Múltiple

La principal ventaja que ofrece el recurso Caja Múltiple (Caja Multiple) de Template SAGA, es que permite anidar en un elemento contenedor dos o más recursos cajas, con el fin de alinearlos a la misma altura. Al ofrecer un control de elementos a mostrar, nos desvincula del número limitado de columnas de nuestro Template. De este modo podemos ampliar en cierta medida la configuración y disposición de cajas en nuestra web.

A la hora de editar nuestro recurso, tendremos que enlazar el recurso a mostrar mediente una ruta absoluta, y añadirle una clase de estilo que englobe a esta entrada. Del mismo modo el recurso contenedos Caja Múltiple contará con otra clase específica, fundamental para maquetar de forma correcta.

A continuación explicaremos cómo usar dichas clases y los estilo que aplicaremos a ellas, para que nuestro recurso quede correctamente visible en los distintos navegadores.

Uno de los principales problemas al que nos enfrentamos a la hora de aplicar estilos a este recurso es el control de los elementos que anida y a su vez flota para que queden bien alineados.

La solución más común consiste en usar un elemento vacío, como por ejemplo una etiqueta div, con un estilo 'clear:left;' tras los elementos flotantes o la inclusión de un 'clearfix' a la envoltura.

Pero, en nuestro caso vamos a emplear una solución alternativa mediante el empleo de la clase css 'overflow:hidden', junto con algunos consejos para solventar el problema con los estilos en Internet Explorer 6.

Al aplicar un estilo'float:left;' a nuestras cajas anidadas, además de un ancho, tendremos el problema de que la caja contenedora (Caja Múltiple), no será capaz de recoger a ambos elementos flotantes, expandiéndose, por lo que el flujo de maquetación hará que el elemento que se encuentre tras ella no respete su alto y flote también a su lado.

Caja Multiple

Si aplicamos a la caja contenedora celeste la propiedad 'overflow:hidden;', conseguiremos que se expanda hasta incluir ambas cajas anidadas:

blog-maquetación-caja-multiple02

Con esta propiedad aplicada a la clase de la Caja Múltiple habremos solucionado el problema, pero si vemos este ejemplo en Internet explorer 6, observaremos como no ha hecho nada, y la caja de nuevo se ha contraido. Para ello tendremos que introducir un hack propio de este navegador junto con la propiedad anterior: '_height:1%';.

El código de estilos que tendremos que aplicar a la contenedora será el siguiente:

. {overflow:hidden; _height:1%;}

Con este truco no tendremos problemas en los navegadores y la caja contendrá en su totalidad el número de elementos anidados y flotados, sin que se desmaquete la estructura.

Calidad Calidad

©Saga Soluciones Tecnológicas
T. 954 45 72 75 / F. 954 45 75 72
Inscrita en el registro mercantil de Sevilla. Tomo 3662, folio 76 , hoja numero SE-52019

Política de calidad y MMAA
Powered by OpenCms 7.5 & Template Saga

© Saga Soluciones Tecnológicas
T. 954 45 72 75 / F. 954 45 75 72
Inscrita en el registro mercantil de Sevilla. Tomo 3662, folio 76 , hoja numero SE-52019