Ho una cartina e 4 percorsi diversi da visualizzare.

(ecco il link di esempio: prova.html)

Ho impostato la cartina come background di un div

poi ho messo 4 link e ho associato ad ognuno un bk diverso

solo che non riesco ad allinearli.

Ho una soluzione in JS per risolvere questo problema ma volevo cercare di non usare i javascript!

Vi posto i codici html e css.

html:

codice:
<style type="text/css" title="currentStyle" media="screen">
	@import "mappa.css";
</style>

<div id="mappa">

	Autostrada
	Ferrovia
	Circumvesuviana
	Mezzi Pubblici

</div>
Css:

codice:
#mappa {
	width: 500px;
	height: 300px;
	background: transparent url(img/site/mappa.jpg) no-repeat bottom left;
}
a#autostrada, a#circumvesuviana, a#ferrovia, a#mezzipubblici {
	position: absolute;
	top:0px;
	color: Black;
	display: block;
	height: 300px;
	width: 100%
}
a#autostrada {			left: 0px;  }
a#ferrovia {			left: 100px; }
a#circumvesuviana {	left: 155px;  }
a#mezzipubblici {		left: 255px; }

a:hover#autostrada {
background: transparent url(img/site/mappa-auto.gif) 
no-repeat bottom left 0px;
} 

a:hover#ferrovia {
background: transparent url(img/site/mappa-ferrovia.gif) 
no-repeat bottom left;
} 

a:hover#circumvesuviana {
background: transparent url(img/site/mappa-circumvesuviana.gif) 
no-repeat bottom left;
} 

a:hover#mezzipubblici {
background: transparent url(img/site/mappa-mezzipubblici.gif) 
no-repeat bottom left;
}