Creating clouds of links instead of long lists


Beautiful colours and clouds

I admit I tend to do more back-end programming than front-end website design, but I have picked up a lot of little tricks. One such trick is instead of displaying links in a dry vertical list, to display lists of links in so called "clouds". This has the benefit of using a tiny fraction of the vertical screen real estate, and they look cooler!

For example, here's a cloud list of the links from the blogroll of this site here. If these links were displayed as a plain list, it would take up over 30 lines!

The key is to use a regular unordered list of links as you would for a plain vertical list of links, but then use CSS to display the list items inline instead.

For example, this is an example of a basic unordered list of links:

<ul class="cloud_list">
  <li><a href="#">K-On</a></li>
  <li><a href="#">Code Geass R2</a></li>
  <li><a href="#">Sola</a></li>
  <li><a href="#">Strike Witches</a></li>
  <li><a href="#">Zero No Tsukaima</a></li>
  <li><a href="#">Grilled Cheese Sandwich</a></li>

To display them as a cloud, you use CSS to change each link into an inline element which will cause them to group together, along with a few other properties to clean up their appearance:

.cloud_list li {
  display: inline;       /* DISPLAY LINKS ON SAME LINE */
  margin-right: 1em;     /* SPACE LINKS OUT */
  white-space: nowrap;   /* DON'T START NEW LINES IN LINKS */
  list-style-type: none; /* REMOVE BULLETS IN IE6 */

And this is only scratching the surface! With CSS you could also theoretically use different classes to define different font sizes and styles for certain links to create more of tag cloud look.

And here's the appended CSS showing the different classes we can add to links to differentiate them, in this case my criteria is my opinions of the shows contained in the list:

.cloud_list .love  { font: x-large Georgia; }
.cloud_list .like  { font: medium; }
.cloud_list .weird { font: medium "Courier New"; }

Anyway that's just one possible use for CSS and lists, there are certainly many more!

Author bio and support


Ruben Schade is a technical writer and infrastructure architect in Sydney, Australia who refers to himself in the third person. Hi!

The site is powered by Hugo, FreeBSD, and OpenZFS on OrionVM, everyone’s favourite bespoke cloud infrastructure provider.

If you found this post helpful or entertaining, you can shout me a coffee or send a comment. Thanks ☺️.