Bonjour
je viens de réaliser une barre de navigation sur laquelle je souhaiterais que lorsque les gens sélectionnent une rubrique, celle-ci reste sélectionner avec une image que j'aurai définie.
Je viens donc de mettre en place mon code que voici ci-dessous :
Pour le fichier html :
Pour le fichier CSS :
#nav-bar {
padding:0;
clear:both;
width: 1000px;
margin-left: auto;
margin-right: auto;
padding-top: 27px;
}
#nav-bar a {font-weight:bold; color:#FFFFFF; text-transform:uppercase; font-size:11px; text-decoration:none; }
#nav-bar ul#navigation li {float:left; list-style:none; padding:0; height:30px; padding:0; margin-right:15px; width:114px;}
#nav-bar ul#navigation li a { height:25px; width:114px; display:block; padding-top:5px; text-align:center; outline-style: none; }
#nav-bar ul#navigation li a:hover {background: url(../img/navigation-btn1.png) center; color:#a1dbe6;}
#nav-bar ul#navigation li.current {background: url(../img/navigation-btn2.png);}
malgré mon code, lorsque l'on clic sur forum par exemple, l'image ne reste pas fixée
merci d'avance
Modifié par stephane72 (27 Sep 2010 - 15:02)
je viens de réaliser une barre de navigation sur laquelle je souhaiterais que lorsque les gens sélectionnent une rubrique, celle-ci reste sélectionner avec une image que j'aurai définie.
Je viens donc de mettre en place mon code que voici ci-dessous :
Pour le fichier html :
<div id="nav-bar">
<ul id="navigation">
<li class="page current">
<a title="Home" href="<{xoAppUrl}>index.php"> Home</a>
<li class="page">
<a title="Forum" href="<{xoAppUrl}>modules/newbb">Forum</a>
<li class="page">
<a title="News" href="<{xoAppUrl}>modules/news">News</a>
<li class="page">
<a title="Contact" href="<{xoAppUrl}>modules/contact">Contact</a>
</ul></div>
</div>
Pour le fichier CSS :
#nav-bar {
padding:0;
clear:both;
width: 1000px;
margin-left: auto;
margin-right: auto;
padding-top: 27px;
}
#nav-bar a {font-weight:bold; color:#FFFFFF; text-transform:uppercase; font-size:11px; text-decoration:none; }
#nav-bar ul#navigation li {float:left; list-style:none; padding:0; height:30px; padding:0; margin-right:15px; width:114px;}
#nav-bar ul#navigation li a { height:25px; width:114px; display:block; padding-top:5px; text-align:center; outline-style: none; }
#nav-bar ul#navigation li a:hover {background: url(../img/navigation-btn1.png) center; color:#a1dbe6;}
#nav-bar ul#navigation li.current {background: url(../img/navigation-btn2.png);}
malgré mon code, lorsque l'on clic sur forum par exemple, l'image ne reste pas fixée
merci d'avance
Modifié par stephane72 (27 Sep 2010 - 15:02)