Menu CSS horizontal ou vertical ajout d'image et espacement ...

Bonjour à tous,
Je cherche à placer dans ma page le menu suivant :
menu
mais j'aimerai ajouter :
1/ des images à la place des menus principaux c'est à dire qu'à la place de Menu 1, je trouverai mon image, ainsi de suite pour Menu2 à 4;
2/ des espacements plus important entre les blocks Menu 1 à 4.
J'y arrive pas, est-ce possible.
Si une bonne âme pouvait éclairer la mienne à ce sujet ...
Merci d'avance
@+
Modifié par pbat (01 Oct 2005 - 20:41)

Bonsoir,

Pour gérer l'écartement des menus, tout dépend lequel tu choisis. En ce qui concerne l'horizontal, tu peux le gérer ici en modifiant la valeur de 1px dans le margin :

#menu dl {
float: left;
width: 12em;
margin: 0 1px;
}

Quant au menu vertical, l'espacement se gère en modifiant la valeur de 2px dans le margin ci-dessous :

dl#menu dt {
cursor: pointer;
margin: 2px 0;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid gray;
background: #ccc;
}

En ce qui concerne les titres des menus de catégorie principale, il est possible d'y placer des images. Tu peux soit définir un id pour chacun d'entre eux et leur appliquer un arrière-plan dans la feuille CSS. Si tu veux faire plus simple, tu peux remplacer le texte de ces menus par une balise <img src="l'emplacement de l'image" width="largeur" height="hauteur" alt="texte de remplacement" />. Il ne faut pas omettre de préciser un texte alternatif alt pour des raisons d'accessibilité.