Topmenu:chaque liens de couleurs différentes?

ah oui ! et n'oubliez pas de rajouter la div dans le fichier .php aussi !

<div id="menucouleur">
<jdoc:include type="modules" name="top" />
</div>

à l'endroit où vous voulez qu'il soit dans votre structure ;-)

<font> est une balise dépréciée...

merci mais non je ne peux pas faire cela car je veux pouvoir le faire via le css.
cette solution fonctionne si tu as une page avec du html, hors j'ai précisée que j'utilise Joomla, donc des pages html structurée avec des includes php liées à une base de donnée. Pas de possibilité d'intervenir dans le code directemet, sauf dans le css, ou oui dans les articles mais je tiens vraiment à faire ça propre dans le css.

Je précise que cela n'est pas moi qui l'ai créé, d'ailleurs je trouve cette façon de faire pas propre du tout, je l'ai juste récupéré d'un template existant:

structure de mon topmenu (fichier.php)

<div id="tabarea">
<div id="tabarea_l">
<div id="tabarea_r">
<div id="tabmenu">

<table cellpadding="0" cellspacing="0" class="pill">
<tr>
<td class="pill_l"> 
<!-- capsule de gauche --!>
</td>

<td class="pill_m">
<!-- capsule du centre --!>
<div id="pillmenu">
<jdoc:include type="modules" name="user3" />
</div>
</td>

<td class="pill_r"> 
<!-- capsule de droite --!>
</td>
</tr>
</table>
<!-- fin de la capsule entière --!>

</div>
</div>
</div>
</div>

css de mon topmenu (fichier.css)

div#tabarea {
width: 900px;
background: url(../images/bandeaufond.jpg) 0 0 repeat-x;
margin: 0px;
}
div#tabarea_l {
margin: 0px;
padding: 0px;
}
div#tabarea_r {
height: 42px;
margin: 0;
padding: 0;
}
table.pill {
background: ;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
padding: 0;
}
td.pill_l {
background: ;
width: 0px;
height: 0px;
padding: 0;
margin: 0;
}
td.pill_m {
background: ;
padding: 0;
margin: 0;
width: auto;
}
td.pill_r {
background: ;
width: 0px;
height: 0px;
padding: 0;
margin: 0;
}
#pillmenu {
white-space: nowrap;
height: 42px;
float: left;
margin: 0;
padding: 0;
}
#pillmenu ul {
margin: 0;
padding: 0;
list-style:none;
}
#pillmenu li {
float: left;
background: url(../images/mw_menu_separator.png) top right no-repeat;
margin: 0;
padding: 0;
}
#pillmenu a#2 {
background-color: red;
}
#pillmenu a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
float:left;
border: solid 1px black;
display:block;
height: 41px; /* hauteur de l'espace text (et de l'espace du cadre donc) (calculer à partir du padding-top) */
line-height: 40px;
padding: 0 18px; /* espace autour des mots */
margin: 0;
color: #000; /* couleur du texte */
text-decoration: none;
}
#pillmenu a:hover {
color: grey
}
#pillmenu a#active_menu-nav {
margin-top:2px;
height: 21px;
line-height: 21px;
background-position: 0 0;
}

Ce qu'il faut repérer, ce sont les noms des classes des cellules

<table cellpadding="0" cellspacing="0" class="pill">
<tr>
<td class="pill_l"> 
<!-- capsule de gauche --!>
</td>

<td class="pill_m">
<!-- capsule du centre --!>
<div id="pillmenu">
<jdoc:include type="modules" name="user3" />
</div>
</td>

<td class="pill_r"> 
<!-- capsule de droite --!>
</td>
</tr>
</table> 

Le code CSS à compléter est donc celui des background de ces sélecteurs :

td.pill_l {
background: ;
width: 0px;
height: 0px;
padding: 0;
margin: 0;
}
td.pill_m {
background: ;
padding: 0;
margin: 0;
width: auto;
}
td.pill_r {
background: ;
width: 0px;
height: 0px;
padding: 0;
margin: 0;
} 

Oui, je suis d'accord j'avais remarqué cela, mais regarde bien :

"l" "m" et "r" ne correspondent pas à trois liens différents = "l" (comme left) est une div pour insérer une image à gauche du menu, "m" lui est bien le topmenu, d'ailleurs l'"include" de mon module joomla se fait là, et donc je peux personnaliser le fond de TOUT mes liens en même temps, or je veux différencier les fonds de CHACUNS de mes liens, et "r" (comme right) est une div pour insérer une image à droite du menu.

Donc, encore une fois, comment faire pour séparer les différents liens de mon topmenu ???
Car td class="pill_m" représente TOUT le topmenu, donc tous les liens en même temps.

Les balises et les attributs dépréciés sont appelés à ne plus être interprétés par les navigateurs. Il faut donc éviter de les utiliser au profit de leurs équivalents CSS.

à la saint glinglin ces balises/attributs ne seront plus interprétés par les navigateurs...sauf à utiliser un doctype strict (définition de strict : Qui ne laisse aucune latitude, étroit, rigoureux.). Non merci !

C'est ce qui est prévu, à quelle échéance, mystère.

En dehors de ça, le jour où vous voudrez modifier le design de vos pages, il va falloir que vous repassiez chacune de vos pages pour tout modifier : galère !!
Avec les CSS, on ne change qu'un seul fichier, c'est plus cool.

Pour info, voici la liste de toutes les balises et attributs :
https://www.la-grange.net/w3c/html4.01/index/elements.html
https://www.la-grange.net/w3c/html4.01/index/attributes.html

Tous ceux qui sont notés "D" dans la colonne "Dec" ne doivent plus être utilisés.