Menu actif en CSS

Résolu
photomartin Messages postés 174 Date d'inscription   Statut Membre Dernière intervention   -  
photomartin Messages postés 174 Date d'inscription   Statut Membre Dernière intervention   -
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   Statut Membre Dernière intervention   19
 
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