28220 sujets

CSS et mise en forme, CSS3

Colorier les sujets individuellement dans un menu

Bonjour à tous,

je souhaiterai garder mon choix de menu + sous-menus actuel (voir http://www.e-central.fr/test/test_index.php). En revanche j'aimerai attribuer un code couleur à chaque morceau de barre du menu (juste au dessus du texte), et que cette couleur soit appliquée aux barres supérieurs des sous-menus attachés.

Ai-je été assez clair ? Smiley ohwell

Comment faire ?

Merci d'avance.

Cdlt.
Modifié par lordbdp (11 Oct 2005 - 16:29)
Pour chaque menu met un id à la balise correspondante est dans le css met un code du style #menu1 {border-top:3px solid #fc0000;} et #menu1 div.sousmenu {border-top:3px solid #fc0000;}
Les noms sont là à titre d'exemple bien sur ! Smiley langue
As-tu vu ma CSS car il faudrait que je refasse intégralement #menu1 , puis #menu2 (nommé menuhautlist chez moi).... avec les codes identiques ?

Regardes mon code :

Partie CSS
ul#menuhautlist {
height: 51px; 
background: #CCCCFF url(namebar.jpg);
background-color:#CCCCFF; 
width: 100%; 
text-align: center; 
padding: 0; 
text-indent: 0; 
list-style-type: none;    
font-family: Arial,Sans-Serif;
margin: 0 auto; 
width: 100%;
border-bottom: 0.5px solid #39D0C6;
}
#menuhautlist li
{
padding: 0;
margin: 0;
text-indent: 0;
display: inline;
}
#menuhautlist li a
{
letter-spacing: -1px;
text-decoration: none;
color: #6699FF;
font-size: 0.9em;
padding: 0 2px;
border-top: 0.5em solid #66CCCC;
}
#menuhautlist li a:hover,#menuhautlist a#current
{
color: #333;
border-top: none;
font-size: 1.5em;
}
#menuhautlist a#current
{
color: #000000;
}
body {padding: 0;
font: 1em Arial, sans-serif;
}
#smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6, #smenu7, #smenu8, #smenu9 {
    position: absolute;
    left: 0px;
    text-align: center;
    font-size: 0.9em;
    width: 100%;
    top: 68px;
}


Partie HTML 
<ul id="menuhautlist">
<li onmouseover="javascript:montre();"><a href="?page=1" title="Retour à l'accueil" id="current">Accueil</a></li>
   <li onmouseover="montre('smenu2');"><a href="?page=2">Informatique</a></li>
       <li><ul id="smenu2">
        <li><a href="?page=3">Boutique</a></li>
          <li><a href="?page=4" title="Demandez un devis !">Devis</a></li>
          <li><a href="?page=5" title="Qu'y-a-t-il prochainement ?">Evènements</a></li>
          <li><a href="?page=6" title="Quelle hébergeur ou FAI choisir ?">Comparateurs</a></li>
          <li><a href="?page=7" title="Logiciels gratuits et aussi performants que ceux du commerce">Freewares</a></li>
          <li><a href="?page=8" title="Outils pour webmasters">Outils webmasters</a></li>
          <li><a href="?page=9" title="Comment ça marche ?">Didactitiels</a></li>
      </ul></li>
   <li onmouseover="montre('smenu3');"><a href="?page=13">Domotique</a></li>
       <li><ul id="smenu3">
.....


Je le modifie comment ? Smiley biggol
Hé bien oui je me doute que tu n'as pas encore différencié les différentes parties du menu, mais c'est obligatoire pour leur attribuer des couleurs diffèrentes à chacune !
Pour ne pas te compliquer trop la vie commence alors par mettre 

<li onmouseover="javascript:montre();" class="rouge"><a href="?page=1" title="Retour à l'accueil" id="current">Accueil</a></li>
<li onmouseover="montre('smenu2');" class="bleu"><a href="?page=2">Informatique</a></li>
<li><ul id="smenu2" class="bleu">


et 

li.rouge {border-top: 0.5em solid #fc0000;}
li.bleu  {border-top: 0.5em solid blue;}
ul.bleu li  {border-top: 0.5em solid blue;}


vérifie car c'est fait en vitesse Smiley confus
Sujet clos
Aller à