devo fare un menù dove ogni voce di menu corrisponde ad un img posizionata ad una certa coordinata della pagina e questa immagine ovviamente è likabile
invece che disporsi dove dico io le mie immagini si mettono tutte in riga orizzontale
sono ore che ci sto dietro al codice ma non riesco a capire dove sbaglio

questo è il css:

body {
background:url("img/bkground.jpg") black;
color:white;
font-family:verdana;
text-align:center;
}





#contenitore {
width:1000px;
border:0px;
text-align:left;
margin:auto;
}

a {
color:white;
font-family:verdana;
font-size:20px;blog
text-align:center;
}

a:hover {
color:black;
}


a#blog {display:block;
width:415px;
height:213px;
float:left;
padding-left: 4,1px;
padding-top: 0px;
background:url("img/blog.png");
}

a#about {display:block;
width:472px;
height:164px;
float:left;
padding-left: 31,8px;
padding-top: 10,8px;
background:url("img/about.png");
}

a#portfolio {display:block;
width:953px;
height:257px;
float:left;
padding-left: 0,8px;
padding-top: 20,9px;
background:url("img/portfolio.png");
}

a#link {display:block;
width:351px;
height:163px;
float:left;
padding-left: 27,4px;
padding-top: 35,6px;
background:url("img/link.png");
}

a#contact {display:block;
width:748px;
height:156px;
float:left;
padding-left: 19,6px;
padding-top: 46,1px;
background:url("img/contacts.png");
}

span {display:none;}



è questo è l'xhtml:


e questo è l'xhtml


<head>
<link href="style.css" rel="stylesheet" type="text/css">
<title>indexill</title>
</head>

<body>
<div id="contenitore">
<h1><span>pxisel portfolio</span></h1>
<h2><span>psixel index</span></h2>
<ul>[*] <span> blog </span> [*] <span> about </span> [*] <span> portfolio </span>[*] <span> link </span> [*] <span> contact </span> [/list]




<span>this is the box</span>

</p>
</div>
</body>
</html>

qualcuno riesce a darmi una mano?