Styling a list of cities as a map

• Published 2005-01-21 (3 years, 5 months ago)

When I one day stumbled over the list tutorial from Max Design, it really opened my eyes to the possibilities of CSS+XHTML. Since then I've been on the webstandards bandwagon. It is fascinating in how many ways a simple html list can be styled. In this entry I'll demonstrate how a list of cities can be styled as a map.

The three largest cities in Norway is Oslo, Bergen and Trondheim. In html we can present this as

<h2>The largest cities in Norway</h1>
<ul id = "cities">
  <li id = "oslo"><a href="#">Oslo</a></li>
  <li id = "bergen"><a href="#">Bergen</a></li>
  <li id = "trondheim"><a href="#">Trondheim</a></li>
</ul>

With no styling applied the result will look as in Figure 1. Not terribly exciting. It is time to apply some CSS.

The first step is to add a background image to the list:

ul#cities {
  background: url(img/norway.gif) no-repeat;
  width:177px;
  height:241px;
}

Note that it is necessary to set the width and height of the list to the same values of the background image. Otherwise only a part of the background image will be shown. The result is shown in Figure 2.

Wouldn't it be nice if the list items were positioned on the map according to the geographical positions of the cities? This is possible with absolute positioning. When absolute positioning is used on an element, the element is completely removed from the docment flow. You can then set the position of the element relative to a containing block with the css top, left, right and bottom properties.

Citing Eric A. Meyer's book Cascading Stylesheets: The Definitive guide, the containing block is:

For non-root elements that have a position value of absolute, the containing block is set to the nearest ancestor (of any kind) that has a position value other than static.

The obious choice for the containing block is the ul element. The final css is then:

ul#cities {
  margin:0;
  padding:0;
  list-style:none;
  position: relative;
  background: url(img/norway.gif) no-repeat;
  width:177px;
  height:241px;
}

ul#cities li {
  position:absolute;
  font-size: 12px;
}

#oslo { top : 200px; left: 54px;}
#bergen{ top: 175px; left:10px;}
#trondheim { left: 60px; top: 130px;}

The margin and padding of the ul element are set to zero to make it easier to set the position of the the cities. The pixel positions of the cities are easily found with some geographical knowledge and a drawing program. The final result is shown in Figure 3. Take a look at the source if you want to have some fun with css positioning.