Aide pour un menu pur CSS

Bonjour,

je tiens à préciser être un grand débutant. Bien qu'une section soit réservée aux personnes dans mon cas, j'ai préféré poster ce message dans la section CSS.
J'espère ne pas causer de problèmes. Mes excuses par avance si cela était le cas.

Ma situation:

J'essaye de réaliser un menu pour mon site web.
Le menu est horizontal et, pour l'instant, le code ressemble à ça

ul#headmenu li {
display: inline;
padding-right: 12px;
margin: 0px;
font-size: 18px;
line-height: 28px;
font-family: helvetica, sans-serif;
color: #000000;
}

#headmenu a:link {text-decoration: none; color: #333333;}
#headmenu a:visited {text-decoration: none; color: #333333;}
#headmenu a:active {text-decoration: none; color: #333333;}
#headmenu a:hover {text-decoration: none; color: #880000;}

Je voudrais obtenir quelque chose de similaire à ce menu
http://css3wizardry.com/2010/08/29/css3-gradient-image-masks/

Je n'en suis pas encore à m'échiner à travailler sur 2 lignes, je verrai ça plus tard.

Pour le moment, mon double problème est le suivant:
1. Comment afficher chaque élément du menu sous forme de "bloc"?
2. Comment changer la couleur de fond au passage de la souris?

J'aimerais rester dans le domaine Pur CSS mais, pour l'instant, je n'y arrive pas. Les seuls résultats probants furent obtenus en utilisant des images.

Merci d'avance,
Laurent

a écrit :
1. Comment afficher chaque élément du menu sous forme de "bloc"?

sur "#headmenu a" un Display block ?

a écrit :
1. Comment afficher chaque élément du menu sous forme de "bloc"?

Background color dans ton #headmenu a:hover ?

Soit j'ai pas bien compris ton probleme, soit tu n'as juste pas cherché sous google

Autre chose, en utilisant un outil de devellopeur type Firebug tu pourrait voir comment ils ont fait dans ton liens.
Modifié par ptitvincent (13 Jul 2011 - 17:47)

ptitvincent a écrit :

Autre chose, en utilisant un outil de devellopeur type Firebug tu pourrait voir comment ils ont fait dans ton liens.

J'utilise Sunrise sur Mac, et on peut également accéder au code.
Mais quand le menu contient des images et/ou du JavaScript, ca n'aide pas franchement -- encore moins quand le site tourne sous WordPress, comme c'est le cas dans l'exemple.

J'ai fini par trouver un menu sur Dynamic Drive

div.horizontal
{
width:100%;
height:63px;
}
div.horizontal ul
{
list-style-type:none;
margin:0;
padding:0;
}
div.horizontal li
{
float:left;
}
div.horizontal a
{
display:block;
width:86px;
}
div.horizontal a:link,div.horizontal a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
div.horizontal a:hover,div.horizontal a:active
{
background-color:#7A991A;
}

Je vais faire des essais avec, en particulier modifier la largeur/hauteur des blocs.