Posez votre question Signaler

Menu actif en CSS [Résolu]

photomartin 176Messages postés 28 août 2006Date d'inscription 7 juillet 2011Dernière intervention - Dernière réponse le 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
Lire la suite 

Menu actif en CSS »

10 réponses
Réponse
+0
moins plus
Bonjour,

Quelques chose comme ça Go and check DOMtab version 3.1415927 now ?
Alors, il faut gérer ça en Javascript, par exemple.
CSS ne suffisent plus.

--
Ajouter un commentaire
Réponse
+0
moins plus
bonsoir à vous,

Gihef, tu m'as pas mal aidé en css mais, là, je crains de devoir te contredire...

observe mon menu:

<a href='http://www.emarketstudy.com' target='_blank' rel='nofollow'>mon site en construction</a>
Ajouter un commentaire
Réponse
+0
moins plus
Oui, j'ai regardé ton menu et je ne vois pas de contradiction.
Mais des précisions.

La question était je voudrais que dans mon menu (lorsqu'on choisis un des "onglets") l'onglet sélectionné reste avec un fond différent (gris à #404040 )
Cet exemple le fais.
Mais les CSS ne suffisent plus.
Il faut leur adjoindre du script.
Et adapter.


++
http://www.onlinetools.org/tools/domtab.php

--
Ajouter un commentaire
Réponse
+0
moins plus
Gihef? es-tu encore dans les parages, stp?
Ajouter un commentaire
Réponse
+0
moins plus
Ça m'a turlupiné au coucher.

Et je me réveille en me souvenant avoir vu passer des réponses à ce sujet dans ce forum.
Et en effet, elles donnaient, me semble-t-il, des solutions en PHP.
Tu as raison, Javascript ne suffit pas.

As-tu cherché dans ce sens ?

--
Ajouter un commentaire
Réponse
+0
moins plus
ben, à mon sens, tu peux très utiliser mon menu dans l'autre sens:

tu agrandis les champs hormis le bouton de menu de manière à vraiment avoir un écran plutôt qu'un bouton et pour éviter la gêne de sortie du hover, tu l'élimines, ne laissant plus que l'occasion, pour le fermer, de hover un autre onglet ou changer de page...

peu commun, je pense, mais y a de l'idée, non?


ps: pourrais-tu jeter un oeil à mon topic sur le css, stp? merci
Ajouter un commentaire
Réponse
+0
moins plus
celui-ci: http://www.commentcamarche.net/forum/affich 4960265 comment decentrer un div#0
Ajouter un commentaire
Réponse
+0
moins plus
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
Ajouter un commentaire
Réponse
+0
moins plus
Ça ne pose pas de problème.
Ça se fait couramment.

Il faut simplement ne pas oublier de les charger.

--
Ajouter un commentaire
Réponse
+0
moins plus
Excellent, merci encore une fois pour ta réponse, rapide et claire !!!

Amicalement,

PhotoMartin
Ajouter un commentaire
Ce document intitulé « Menu actif en CSS » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?