Menu actif en CSS

Résolu/Fermé
photomartin Messages postés 174 Date d'inscription lundi 28 août 2006 Statut Membre Dernière intervention 7 juillet 2011 - 8 févr. 2008 à 21:00
photomartin Messages postés 174 Date d'inscription lundi 28 août 2006 Statut Membre Dernière intervention 7 juillet 2011 - 10 févr. 2008 à 15:04
Bonjour,

je suis en train de faire mon site web; pour le moment tout va bien =) Cependant il y a un petit "détail" qui me tracasse: en fait je voudrais que dans mon menu (lorsqu'on choisis un des "onglets") l'onglet sélectionné reste avec un fond différent (gris à #404040 ). Est-ce que vous pouvez m'aider?

Voila le code CSS de ma barre de navigation (style.css):

-------------------------------------------------------------------------------

#menu
{
width: 950px ;
height: 35px ;
margin: 0 auto ;
}

#navcontainer ul
{
padding: 0;
margin: 0;
float: right;
width: 100%;
}

#navcontainer ul li
{
display: inline;
}

#navcontainer ul li a
{
padding: 6px 10px;
font-family: Papyrus, "Trebuchet MS", helvetica, tahoma, sans-serif ;
color: #FFF;
font-size: 120%;
font-weight: bold ;
text-decoration: none;
float: right;
}

#navcontainer ul li a:hover
{
background-color: #FFF;
color: #FF8800;
}

-------------------------------------------------------------------------------


Et voila le HTML (index.html):


-------------------------------------------------------------------------------

<div id="menu">

<div id="navcontainer">

<ul id="navlist">

<li><a title="Liens" href="homefr.html">Liens</a></li>
<li><a title="Contact" href="homefr.html">Contact</a></li>
<li><a title="Portfolio - Book - Travaux Photographiques" href="homefr.html">Portfolio</a></li>
<li><a title="Biographie - Curriculum" href="homefr.html">Bio</a></li>
<li><a title="Accueil" href="homefr.html">Accueil</a></li>

</ul>

</div>

</div>

-------------------------------------------------------------------------------


Merci d'avance,

PhotoMartin

10 réponses

photomartin Messages postés 174 Date d'inscription lundi 28 août 2006 Statut Membre Dernière intervention 7 juillet 2011 19
10 févr. 2008 à 14:07
Bonjour et merci pour vos messages...

Voila, j'ai fait plusieurs essais et j'ai trouvé une solution en CSS.

En fait ce que j'ai fait c'est ajouter ceci au fichier CSS:

-------------------------------------------------------------------------------

#navcontainer li#active
{
background-color: #f0b000 ;
color: #ffffff ;
}

#navcontainer li#active a:link
{
background-color: #f0b000 ;
color: #ffffff ;
}

#navcontainer li#active a:visited
{
background-color: #f0b000 ;
color: #ffffff ;
}

PhotoMartin

-------------------------------------------------------------------------------

et au fichier HTML j'ajoute un "active" comme ceci:

-------------------------------------------------------------------------------

<div id="navcontainer">

<ul id="navlist">

<li><a title="Liens" href="linkfr.html">Liens</a></li>
<li><a title="Contact" href="contactfr.html">Contact</a></li>
<li><a title="Portfolio - Book - Travaux Photographiques" href="pportfoliofr.html">Portfolio</a></li>
<li><a title="Biographie - Curriculum" href="biofr.html">Bio</a></li>
<li id="active"><a title="Accueil" href="homefr.html">Accueil</a></li>

</ul>

</div>

-------------------------------------------------------------------------------

Maintenant j'ai une autre question: étant donné que mon fichier CSS devenais TROP long j'ai séparé mon code et ai crée trois fichiers CSS différents; à savoir: style.css (pour la mise en page générale), form.css (pour le formulaire qui s'affiche dans ma page de contact) et menu.css (pour la barre de navigation du site).
Ce que je voudrais savoir est si cela peut poser des problèmes ou s'il veut mieux de tout laisser dans un unique et même fichier CSS???

Merci encore une fois,

Martin
1