Añadir listas largas en un espacio pequeño

 Para mostrar una lista larga en un espacio más reducido del que normalmente ocuparía, lo más sencillo es incluir dicha lista en un bloque contenedor al que se han de aplicar las propiedades overflow, height y width, con sus respectivos valores:

<div style="height: 145px; overflow: auto; width: 300px;"><ul>
<li>AQUÍ TEXTO1.</li>
<li>AQUÍ TEXTO2.</li>
<li>AQUÍ TEXTO3.</li>
<li>AQUÍ TEXTO4.</li>
</ul></div>

• Castillo Santuario de Javier.
• Castillo de Marcilla.
• Castillo Palacio de Olite.
• Colegiata de la Fortaleza de Alquézar.
• Castillo de Íscar.
• Castillo de Loarre.
• Castillo de Monzón, Huesca.
• Torre del Castillo de Samitier.
• Patio de armas del Castillo de Aínsa.
• Castillo de Coca.
• Entrada del Castillo de Mombeltrán.
• Castillo del Condestable Dávalos.
• Castillo de Arévalo.
• Castillo de La Mota.
• Castillo de Turégano.
• Castillo de Cuéllar.
• Castillo de Pedraza.
• Castillo de Monleón.
• Alcázar de Segovia.
• Castillo de Tiedra.
• Castillo de Ucero.

 Lo mismo que hemos hecho con una lista no ordenada lo podemos hacer con imágenes. En este ejemplo, las imágenes utilizadas aparecen centradas:

<div style="text-align: center;"><div style="height: 218px; margin: auto; overflow: auto; text-align: center; width: 200px;"><a href="http://AQUÍ URL1" onclick="this.target='_blank'" rel="nofollow" title="AQUÍ TÍTULO1"><img alt="AQUÍ TÍTULO breve1" src="http://AQUÍ URL de IMAGEN1" title="AQUÍ TÍTULO visible al pasar CURSOR1" /></a> 
<a href="http://AQUÍ URL2" onclick="this.target='_blank'" rel="nofollow" title="AQUÍ TÍTULO2"><img alt="AQUÍ TÍTULO breve2" src="http://AQUÍ URL de IMAGEN2" title="AQUÍ TÍTULO visible al pasar CURSOR2" /></a> 
<a href="http://AQUÍ URL3" onclick="this.target='_blank'" rel="nofollow" title="AQUÍ TÍTULO3"><img alt="AQUÍ TÍTULO breve3" src="http://AQUÍ URL de IMAGEN3" title="AQUÍ TÍTULO visible al pasar CURSOR3" /></a></div></div>