Positionnement d'image pour un menu

Bonjour à tous,

j'essaye de faire mon premier site en xhtml/css... je suis donc débutant dans ce domaine....

J'essaye de faire un menu en ligne avec des images... Le problème s'est que je n'arrive pas à les positionner sans qu'elles soient alignées !

Voici mon html :

	<div id="header">
		<h1>Accueil</h1>
		<div id="menubulle">
			<ul>
				<li><a id="bulle1" title="Page d'accueil" href="index.html">Accueil</a></li>
				<li><a id="bulle2" title="Nos activités" href="activites.html">Nos<br />activités</a></li>
				<li><a id="bulle3" title="Les partenaires d' Algorithme Informatique" href="partenaires.html">Nos<br />partenaires</a></li>
				<li><a id="bulle4" title="Les coordonnées et plans d'accès" href="conctact.html">Nous<br />contacter</a></li>
			</ul>
		</div>
	</div>

et mon css :

#header h1 {
	text-indent: -5000px;
	margin:0;
	line-height: 0;
}

/* menu bulle */
#menubulle {
	position: absolute;
	left: 200px;
}
#menubulle ul, #menubulle li {
	position: relative;
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#menubulle li {
	float: left;
}
#menubulle li a {
   	display: block;
	height: 95px;
	width: 95px;
	margin: 0;
	padding: 0;
	color: #000000;
	font-size: 1em;
	font-weight: bolder;
	font-family: "Tekton Wd", "Maiandra GD", Arial, Helvetica, sans-serif;
	text-decoration: none;
	text-align: center;
}

/* bulle a */
#menubulle a#bulle1 {
	background-image: url(images/menubulle/bulle1.jpg);
	background-repeat:no-repeat;
	background-position: 5px 5px;
}
#menubulle a#bulle2 {
	background-image: url(images/menubulle/bulle2.jpg);
	background-repeat:no-repeat;
	background-position: 5px 5px;
}
#menubulle a#bulle3 {
	background-image: url(images/menubulle/bulle3.jpg);
	background-repeat:no-repeat;
	background-position: 5px 5px;
}
#menubulle a#bulle4 {
	background-image: url(images/menubulle/bulle4.jpg);
	background-repeat:no-repeat;
	background-position: 5px 5px;
}
/* bulle a:hover */
#menubulle a#bulle1:hover {
	background-image: url(images/menubulle/bulle1_big.jpg);
	background-repeat:no-repeat;
	background-position: 0;
}
#menubulle a#bulle2:hover {
	background-image: url(images/menubulle/bulle2_big.jpg);
	background-repeat:no-repeat;
	background-position: 0;
}
#menubulle a#bulle3:hover {
	background-image: url(images/menubulle/bulle3_big.jpg);
	background-repeat:no-repeat;
	background-position: 0;
}
#menubulle a#bulle4:hover {
	background-image: url(images/menubulle/bulle4_big.jpg);
	background-repeat:no-repeat;
	background-position: 0;
}

A noter que : bulle1.jpg, bulle2.jpg font 80x80 px et bulle1_big.jpg, bulle2_big.jpg font 95x95...

J'aimerais que mes bulles se soient pas alignées. En fait il faudrait que je puisse positionner les bulles comme ci-dessous (x,y) :
bulle1 : 227px, 29px
bulle2 : 373px, 56px
bulle3 : 547px, 39px
bulle4 : 665px, 51px

Pour le moment elles sont toutes les unes à cotés des autres...
Pourriez-vous m'indiquez comment faire mon menu SVP.... ?
Et éventuellement si ma façon de faire n'est pas correcte ou si mon code n'est pas bon ?

Merci d'avance et j'espère que mon premier post sera compréhensible....

@+