Bonjour à tous,
C'est ma première question sur la liste après découverte de spip il y a
seulement quelques jours.
J'utilise l'excellent squelette Epona que je suis en train de personnaliser.
Etant aussi débutant avec les feuilles CSS je piétine un peu.
Je souhaite modifier le menu dynamique fait en css pour pouvoir avoir la
première lettre de chaque rubrique du menu d'une couleur différente.
J'ai trouvé pour cela le pseudo-élément "first-letter" qui me parait pouvoir
faire ce que je veux mais je ne sais pas comment l'implémenter dans ma
feuille de style epona.css dont voilà ci-dessous ce qui concerne le menu.
Est-ce que quelqu'un parmi vous saurait m'aider à modifier ça ?
Merci d'avance.
************************************************************
Fabrice Cizeron
38, rue Jeanne Hachette
69003 LYON
Tél : 04-72-91-43-44 ou 08 71 76 12 05 (tarif FT local sur toute la France)
Email : fabrice.cizeron@laposte.net
************************************************************
/*
* Le menu de navigation
*/
ul#menu li ul{
display:none; }
ul#menu li:hover>ul{
display:block; }
ul#menu {
font-family: Comic Sans MS, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 13px; /* Mod 11px */
color:#ffffff;
}
ul#menu, ul#menu ul {
border:solid 1px #000000;
list-style:none;
padding:0;
margin:0;
width:14.5em; /* Mod 13em */
_width:14.5em; /* Mod 13em */
background-color:#000080; /* Mod #cc4f4f; /* PERSO */
color:#ffffff;
}
ul#menu ul{
position:absolute;
top:-5px;
left:14em; /* Mod 12.5em */
}
ul#menu li{
position:relative;
margin:0px;
padding:0px;
_display:inline;
}
ul#menu a{
display:block;
width: 14.5em; /* Mod 13em */
text-decoration: none;
text-indent: 1em;
padding: 5px 0;
}
ul#menu li:hover, ul#menu li a:hover {
color:#000000;
background-color:#3399ff; /* Mod #a04f4f; /* PERSO */
}
ul#menu li.smenu {
background-image: url(arrow.gif) !important;
background-position: 12.9em; /* Mod 11.4em */
background-repeat: no-repeat;
}
ul#menu li.smenu:hover, ul#menu li.smenu>a:hover {
background-image: url(arrowb.gif) !important;
background-position: 12.9em; /* Mod 11.4em */
background-repeat: no-repeat;
background-color:#3399ff; /* Mod #a04f4f; /* PERSO */
}
ul#menu a {
color:#ffffff;
text-decoration: none;
}