Scroll Box ~ Tube trucos

¿Cómo podemos poner una lista de cosas como textos imagenes etc, 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

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ática mente agregará unas barras de desplazamiento en el sentido que se requiera.

Basic Vertical Scroll Box

Ejemplo:

aqui va lo decees poner

<div style="border: 1px solid black; width: 200px; height: 100px; overflow-y: scroll; overflow-x: hidden;">

aquí va lo decees poner

</div>

Basic Horizontal Scroll Box

Ejemplo:

aquí va el texto o lo que decees

<div style="border: 1px solid black; width: 200px; height: 100px; overflow-y: hidden; overflow-x: scroll;">

aqui va el texto o lo que decees

</div>

Picture Scroll Box

Ejemplo:

<div style="height: 221px; width: 330px; overflow: scroll;"><img src="http://dl.dropbox.com/u/25944020/paisaje.jpgespaciogratis" border="0" alt="Sample picture for scroll box:" width="330" height="221" /> <img src="http://dl.dropbox.com/u/25944020/catarata.jpgespaciogratis" border="0" alt="Sample" width="330" height="221" /><img src="http://dl.dropbox.com/u/25944020/paisajes.jpgespaciogratis" border="0" alt="Sample" width="330" height="221" /></div>

Background Pictures

Ejemplo:

aqui pueden escribir todo lo que quieran.

<div style="height:220px;width:325px;overflow:scroll;font:35px/45px cursive;color:#A6120D;background:url('http://i516.photobucket.com/albums/u323/natural_pics/milford_sound.jpg');">aquí pueden escribir todo lo que quieran.
</div>

Background Color

Ejemplo:

aquí se le añadió este color pero ustedes pueden cambiarlo a su gusto con el color que mas les guste

<div style="height: 90px; width: 160px; overflow: scroll; background-color: rgb(103, 241, 82);">aquí se le añadió este color pero ustedes pueden cambiarlo a su gusto con el color que mas les guste</div>

Text Color

Ejemplo:

aquí se le añadio este color pero ustedes pueden cambiarlo a su gusto con el color que mas les guste.

<div style="height: 90px; width: 160px; overflow: scroll; background-color: rgb(103, 241, 82); color: rgb(166, 18, 13);">aquí se le añadió este color pero ustedes pueden cambiarlo a su gusto con el color que mas les guste.</div>