Rubenerd

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!

• Australian Greens
• Bruce Schneier
• Dale Clapperton
• Dave Wares
• Doug Kaye
• Duttingston Arcade
• Electronic Frontiers Australia
• Esther Golton
• Felix Tanjono
• Frank Nora
• Geek Mummy
• Guido van Rossum
• J-Walk
• James Ross
• JD Lasica
• Jonathan Schwartz
• Julee Ng
• Little Sue
• Mark Parnell
• Mary Wallace
• Nimiiiiiiii
• Randy Fullerton (Atuuschaaw)
• Richard Dawkins
• Roel Weijer
• Sam Harris
• Scott O’Brein
• Singapore Democrats
• Steve Gillmor
• THE Stephen Fry
• Todd Tyrtle
• W3C
• Whole Wheat Radio

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>
</ul>

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.

• K-On
• Code Geass R2
• Sola
• Strike Witches
• Zero No Tsukaima
• Grilled Cheese Sandwich

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!