How to create a nice map using CSS and unordered list

For one of my personal projects, I needed to create a nice-looking map and position the elements in it. In the past, I would use Photoshop, and sketch the elements on layers that I can move, but today I will use (definitely) CSS. We will create an unordered list to achieve that. Nothing complex, just pure simplicity (and it will look nice too :)

CSS map

There are so many things we can accomplish using CSS positioning. For example, we could provide the background image of a map, and put the elements (in our example — cities) in it. The cities will be absolutely positioned on our map to the places there actually belong. I used a map of my region Istra for this example, and a few cities.

The code comes first

The code is very simple. Just one DIV with ID #map, and an unordered list with the names of the cities. Every list item should have its own ID, so we can position it on the map. Here is the code.

And then CSS

Now, its time for some magic. The important part is to define width and height of your map, give it a background image and the most important — give it a relative position. In case this DIV wasn’t positioned relatively, list items would be positioned absolutely to the page, instead to the DIV. We added a overflow:hidden; property to the #map so everything that goes outside the area, doesn’t show.


#map {
	width:465px;
	height:533px;
	background:url(karta-istre.gif) no-repeat;
	border:1px solid #CCC;
	position:relative;
	overflow:hidden;
}

Next, we will do some standard things. We will remove the bullets with list-style:none; and will tell to the browser that every list-item will be positioned absolutely.


ul { list-style:none; }
li { position:absolute; }

We used links in our example, not because its essential too, but because I wanted to give you an example of how to use it. In case we didn’t use link to control the text inside a list, we would simply styled the LI element. Because we have links, we will style them instead (and it will look prettier with hover effect :)

Let’s get on with it. The link will be displayed as block, because if we don’t, the IE will look rather differently. We used paddings to remove the text from the borders. With the paddings used we will create all the “buttons” with the same look. Next few styles are here just to make the button look prettier. I won’t explain the hover effect, because it is explained by itself, sorry guys :).


a {
	display:block;
	padding:2px 10px;
	font-size:1.1em;
	background:#fff;
	color:#3B3B3B;
	border:1px solid #CCC;
	text-decoration:none;
}
a:hover {
	background:#000;
	color:#CCC;
}

Finally, we will position the cities on the map. Because ever list-item is positioned absolutely, and the parent DIV is positioned relatively, we will use the top and level coordinates to position the cities.


#pula {	top:430px; left:150px; }
#porec { top:230px; left:50px; }
#pazin { top:240px;	left:200px; }
#opatija { top:190px; left:330px; }
#rovinj { top:330px; left:70px; }
#umag { top:100px; left:30px; }
#labin { top:330px; left:280px; }
#emanuel { top:455px; left:110px; }

Take a look at the CSS map example


Comments

8 responses to “How to create a nice map using CSS and unordered list”

  1. That’s a pretty cool idea/technique. Well explained too :)

  2. Thanks Matt. I’m glad you like it.

  3. Good tutorial – It’s a handy technique to have in your toolbox – I did exactly the same on http://www.airflow.com a while ago.

  4. Yes, it is very handy when you are developing a larger site. It’s great you attach an ID to every single city, which you can call out on different pages (i.e. when displaying certain region, you display only cities from that region).

    It’s easy to develop and mantain later when building a large site.

  5. Great tehnic Emanuel!

  6. Thanks Marko :).
    Appreciated.

  7. Great solution..very nice :-)

    (sjajno Emanuel)

  8. Excellant work thank you this will really come in useful to me

Leave a Reply

Your email address will not be published. Required fields are marked *