JMiur [E]

¿Cómo podemos poner una lista de cosas en una página web sin ocupar mucho espacio en la pantalla?

La solución es muy simple, simplemente se necesita utilizar la propiedad overflow en un bloque cualquiera.



La propiedad overflow permite controlar qué se va a hacer cuando un elemento sobrepasa el área de su contenedor:
overflow: visible | hidden | scroll | auto
overflow-x: visible | hidden | scroll | auto
overflow-y: visible | hidden | scroll | auto
Lo más simple, vamos a poner una lista de texto dentro un bloque de esta manera:

<div style="overflow:auto; width:ancho; height:alto;">
....... la lista .......
</div>

donde ancho y alto se miden en pixeles y corresponden al tamaño del bloque contenedor (el que va a contener la lista).

Normalmente, cuando el tamaño del contenedor es menor que el contenido y este "no entra", el bloque se redimensiona, ignorando el tamaño que establecimos. Pero le hemos "ordenado" que respete nuestras medidas y por lo tanto, automáticamente agregará unas barras de desplazamiento en el sentido que se requiera.

LOS ULTIMOS 20 POSTS DE VAGABUNDIA

01 ¿Acepto las condiciones?
02 Sitios inútiles
03 Colorinches
04 Goodbye Qumana
05 Probando Qumana
06 Bienvenido a la Unión
07 El que busca, encuentra
08 Los últimos serán los primeros
09 Legales o ilegales
10 Windows Live Writer me sorprendió
11 Probando Windows Live Writer
12 A dormir la siesta
13 Los que aman a Google
14 w.bloggar apesta
15 Probando w.bloggar (otra vez)
16 El personaje del año (la saga)
17 Esperando visitas
18 Los que odian a Google
19 Adivina adivinador
20 PCs sin sistema operativo

El contenido del bloque puede ser cualquier tipo de instrucción HTML: una lista de vínculos como en el primer ejempo, o una tabla:

0123
10111213
100101102103
1000100110021003
10000100011000210003
100000100001100002100003
100000100001100002100003
10000100011000210003
1000100110021003
100101102103
10111213
0123

También es posible poner una lista al lado de la otra, para eso nos valemos de la propiedad float:

<div style="float:left; overflow:auto; width:ancho; height:alto;">
....... la lista de la izquierda .......
</div>
<div style="float:left; overflow:auto; width:ancho; height:alto;">
....... la lista de la derecha .......
</div>

Manzanas
Frutillas
Bananas
Peras
Duraznos
Ciruelas
Naranjas
Pomelos
Blanco
Marrón
Azul
Amarillo
Verde
Gris
Celeste
Rosa

Esta técnica puede resultar interesante de mostrar grupos de imágenes en un espacio pequeño:











12 comentarios:

steppenwolf  

Muy buena data como de costumbre. Lo que sí, dejo una corrección.

El parámetro width maneja el ancho y el height, la altura.

Por cierto, me vino fantástico esta nota. Ya la pongo en práctica.


Un abrazo

Responder
JMiur  

Si, claro, amigo. ¡Qué verguenza!. Ya mismo lo corrijo. gracias, como siempre.

PD: equivocado pero coherente. Puse TODAS al revés.

Responder
k_nelita  

Hola otra vez, viste yo sabía que tendría que volver a escribirte, lo que buscaba era esto, para poner los banners de los blogs amigos, en los que estás incluido, aunque no encontré el banner de este blog.
Bueno la cuestión es que son muchos y queda muy desprolijo, y ocupan mucho espacio en la sidebar, y quería una cajita como esa que tu dices, pero ya probé y no me funciona, no salen las barras laterales, bueno, no sale nada solo los banners y tal y como estaban.
No sabes que estoy haciendo mal? Puse el código que vos pusiste, con las medidas w:180 x h:200, la lista de los banner y el /div al final, pero nada...
Bueno si puedes contestarme te agradecería y si tienes un banner de este blog me gustaría ponerlo también.
Un saludo

PD: En realidad lo que quería era un script que hiciera que los banners fueran pasando de abajo hacia arriba, o sea con movimiento, pero no encontré en ningún lado.

Responder
JMiur  

Entiendo tu idea. El código no tiene nada raro y debería funcionar en cualquier lado pero claro, desconozco las limitaciones de miarroba. En todo caso, podrías dejar colocado un ejemplo online para que pudiera verlo.

Hay otras posibilidades y te doy algunos lugares donde puedes mirar.

Lo que quieres es lo que se llama MARQUEE, aquí explico de qué se trata y, en el Blog de Gema hay un ejemplo que me parece que es exacto lo que quieres hacer. Algo similar, también tiene AQUI pero sin movimiento.

Un poco más complejo y usando un script, puedes ver en DynamicDrive.

Responder
Bernardo Socha Acosta  

Pues mi estimado señor y amigo: Solo nos resta decirle que Dios lo bendiga y le de toda la suerte del mundo. Se merece mucho más pero con esto ya es algo. Siga adelante enriqueciendo a los internautas.
www.bersoa.com
bersoa@hotmail.com

Responder
JMiur  

Grcias por el comentario, Bernardo :)

Responder
taichicoslada  

Hola JMiur, estoy empezando en blogspot despues de mi experiencia en spaces que como sabes cierra. Estoy tratando de poner una tabla de mas de 100 filas con 2 columnas. En la columna de la izquierda están las fotos en miniatura con el enlace al album de skydrive correspondiente y en la derecha el enlace en texto. Utilice el codigo de esta entrada y otro que he vista en el blog de Gema y el problema que no logro resolver es el siguiente:
cualquiera de los codigos utilizados funciona bien en firefox pero en Ie8 la tabla desliza bien pero las fotos se quedan fijas y se salen del div. Mi plantilla es "viajes", el fondo estatico con un gif en mosaico. Gema lo ha visto y no le encuentra explicación y me remite a tus conocimientos. La pagina aun no es publica y si necesitas verla me dices como te autorizo a verla. Un saludo y felicidades por tu blog.

Responder
JMiur  

Sí. Lo mejor sería ver el ejemplo online para tratar de entender qué ocurre y cómo se puede solucionar.

Responder
taichicoslada  

Gracias, te añado al blog. No se si el problema está en la plantilla. No he querido cambiarla hasta que me aconsejes.

Responder
JMiur  

Yo creo que resolverías el problema agregando la propiedad position:relative; en todos los divs:

<div style="height: 200px; overflow: auto; width: 400px;position:relative;">

#scroll {
height: 200px;
overflow: scroll;
width: 750px;
position:relative;
}

Responder
taichicoslada  

Gracias Doctor ha curado usted mis males, perfecto consejo. Se solucionó. Muy agradecido.

Responder
JMiur  

Perfecto, taichicoslada :D

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR