Probleme pour meler du texte et du hover

Bonjour,

Je suis en train de réaliser un site Internet et je rencontre le problème suivant :

Je souhaiterai créer des boutons utilisant la fonction hover (l'image de fond changerai) et y ajouter dessus du texte.
Cependant je n'y arrive pas, le texte se positionne à coté de ma boite.

Par ailleurs je souhaite que les boutons s'accolent entre eux, j'ai tenté avec un float left mais ça ne marche pas non plus.

Voici le code :

HTML :

<div class="menuprincipal">

<img src="Fichiers/Images/bandeauhaut/logopart2.gif" /> 
<img src="Fichiers/Images/Boutons/Menu/plandusite.gif" />
<a> <span class="boutonassociation"> &nbsp;&nbsp;&nbsp;l'Association  </span> </a>
<a> <span class="boutonmissions"> &nbsp;&nbsp;&nbsp;Nos missions  </span> </a>

</div>

CSS :

.menuprincipal {
width: 1025px;
height: 25px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
color: #FFFFFF;
float: left;
}

#boutonassociation {
background-image:url(../Fichiers/Images/Boutons/Menu/lassociation.gif);
width: 115px;
height: 25px;
float:left;
}

#boutonassociation a:hover {
background-image:url(../Fichiers/Images/Boutons/Menu/lassociation2.gif);
}

#boutonmissions {
background-image:url(../Fichiers/Images/Boutons/Menu/missions.gif);
width: 200px;
height: 25px;
float:left;
}

#boutonassociation a:hover {
background-image:url(../Fichiers/Images/Boutons/Menu/missions2.gif);
}

Je vous remercie pour l'attention que vous porterez à ce message,

Atomics