28172 sujets

CSS et mise en forme, CSS3

Problème menu en image et css

Bonjour,

Je suis en train de développer un nouveau site en joomla et j'ai les différents menus de navigation composé chacun de 2 images (une gauche longue et une petite droite), l'ensemble formant mon bouton (cartouche avec une pointe à droite).

upload/22765-menu.png

Mon souci : le rollover fonctionne mais quand on clique je voudrais que l'image de droite soit affiché comme pour le bouton en active_menu-nav mais ça marche pas sur le 'li'.

voilà mon code :

<php>
<div class="menu">
<div id="pillmenu">
<table cellpadding="0" cellspacing="0">
<tr>
<td style="text-align: left; vertical-align: middle;">
<jdoc:include type="modules" name="user3" />
<div class="clr"></div>
</td>
</tr>
</table>
</div> <!--pillmenu-->
</div> <!--menu-->


et mon css :

#pillmenu {
text-align: left;
padding: 0 0 0 10px;
margin:0 auto;
}

#pillmenu ul {
margin: 0 0 0 190px;
padding: 0;
list-style: none;
}

#pillmenu li{
float: left;
margin: 0 16px 0 0;
padding: 0 10px 0 0;
}

#pillmenu li:hover{
float: left;
margin: 0 16px 0 0;
padding: 0 10px 0 0;
background: url(../images/menu_back_d.png) center right no-repeat;
}

#pillmenu li a {
font-family: Helvetica,Arial,sans-serif;
text-transform: uppercase;
font-size: 11px;
float: left;
display: block;
line-height: 24px;
padding: 0 5px 0 10px;
margin: 0;
color: #fff;
text-decoration: none;
font-weight: bold;
height: 27px;
}

#pillmenu li a:hover {
font-family: Helvetica,Arial,sans-serif;
font-size: 11px;
float: left;
display: block;
line-height: 24px;
padding: 0 5px 0 10px;
margin: 0;
color: #fff;
text-decoration: none;
font-weight: bold;
height: 27px;
background: url(../images/menu_back_g.png) center left no-repeat;
}

#pillmenu li#current {
float: left;
margin: 0 16px 0 0;
padding: 0 10px 0 0;
background: url(../images/menu_back_d.png) center right no-repeat;
}

#pillmenu li a#active_menu-nav {
font-family: Helvetica,Arial,sans-serif;
font-size: 11px;
float: left;
display: block;
line-height: 24px;
padding: 0 5px 0 10px;
margin: 0;
color: #fff;
text-decoration: none;
font-weight: bold;
background: none;
height: 27px;
background: url(../images/menu_back_g.png) center left no-repeat; 
}


si quelqu'un peut m'aider ou me dire ça peut fonctionner ou pas.
merci
Bon je n'ai pas très bien compris ce que tu veux mais pour que ton menu ait un comportement classique il faut que tu renseignes les classes suivantes (et dans cet ordre, sinon certains navigateurs (hum) posent des problèmes):

:link -> état de base
:visited -> état de base, mais déjà visité auparavant
: hover -> ça tu as compris
: active -> quand le lien est cliqué (donc dure à peine une seconde)

Tu peux rajouter aussi

:focus - > gère la décoration lors de la navigation au clavier.
la position link et hover, c'est ok
la class visited ne m'interesse pas

ce qui pose problème c'est la classe active.
ça marche avec le lien a mais directement avec la class li
sur l'image ci jointe (1er post), en position active, seul l'image de gauche est active mais pas l'image de droite qui a pour class #pillmenu li#current

malheureusement, active_menu-nav ne fonctionne pas directement sur la class #pillmenu li Smiley ohwell
c'est là mon problème.
Tu peux poster une page en ligne ?

PS: la classe :active, même si elle ne t'intéresse pas, intéressera pour sûr le navigateur de tes visiteurs. Renseigne la pour éviter les mauvais surprises Smiley cligne
en ce moment je travaille en local, un peu difficile de mettre en ligne

si, la classe active m'intéresse !
c'est la classe visited qui ne m'intéresse pas trop pour une barre de navigation
Sujet clos
Aller à