Bueno, vamos a hablar de la propiedad OVERLOFW y de como solucionar algun problemilla que ésta puede llegar a darnos con OPERA (si, con operta… Aún siedo reconocido como uno de los mejores navegadores, Opeta tb tiene sus pequeñas pegas).
Usamos la propiedad OFERFLOW para poder construir estructuras de aspecto idéntico a los IFRAMES, pero medainte CSS, sin tener que hacer uso de ningun FRAME, que como bien se sabe, entorpece enormemente al posicionamiento y a la accesibilidad.
Así pues, si queremos tener algo muy similar a un IFRAME pero usando css, haremos lo siguiente:
__________________________________________________________________________________
<div style="width:180px; height:75px; overflow-y:auto; overflow-x:hidden;"><ul> <li>1</li> <li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
__________________________________________________________________________________
Vereis que hemos introducido una lista dentro del div, para poder tener algun elemento dentro que "desborde" y poder ver el efecto del Overflow. El resultado es el siguiente: Vereis que hemos introducido una lista dentro del div, para poder tener algun elemento dentro que "desborde" y poder ver el efecto del Overflow.Vereis que hemos introducido una lista dentro del div, para poder tener algun elemento dentro que "desborde" y poder ver el efecto del Overflow.Vereis que hemos introducido una lista dentro del div, para poder tener algun elemento dentro que "desborde" y poder ver el efecto del Overflow.
Vereis que hemos introducido una lista dentro del div, para poder tener algun elemento dentro que “desborde” y poder ver el efecto del Overflow.
__________________________________________________________________________________
El resultado es el siguiente:
__________________________________________________________________________________
Como vereis, si estais navegando con IE o Firefox, el aspecto del DIV es identico a lo que podría ser un IFRAME… Sin embargo, si lo intentais ver con OPERA, vereis que la cosa no va tan bien!!!
Lo que sucede es que OPERA no acepta las propiedades OVERFLOW-Y o OVERLOW-X (con las que podríamos dar una caracteristica distinta al SCRLOLL vertical y el horizontal). Así que la única forma de que funcione es utilizar OVERFLOW: SCROLL; o OVERFLOW: AUTO; . Ésto tiene una pega, y es que la barra horizontal siempre se mostrará, ocupando su espacio, pero por el momento es la única forma para que ello funcione bien en todos los navegaores.
Además se tiene que tener en cuenta que, aún que actualmente el OVERFLOW-Y / OVERLOW-X funcionen en IE y en MOZILLA, no son características CSS validables, al menos no para CSS 2.1 , aún que si lo serán para CSS 3 (que nos guarda muchas sorpresas!).
Y ahora, cuando parece que ya no queda nada mas que decir, hablemos de lo que pasa si un div con un OVERLOW contiene, por ejemplo, peliculas FLASH (como por ejemplo aquí www.npicasso.com/multimedia.php ). La cuestión es que, para que el comportamiento sea el mismo hay que añadir a cada película el parámetro wmode=”transparent” . De lo contrario os pararía esto: www.npicasso.com/multimedia_mal.php (seguimos hablando del comportamiento de OPERA).Y ahora si... ENJOY!
Compártelo
meneame - May 19th, 2008
