[resolu]Onglet vers le bas

bjr,

je viens vers vous car je vais devenir fou ...
je tourne en rond depuis deux jours sur un probléme d'onglets. En me basant sur le systeme des portes coulissantes je voulais obtenir cela

http://www.crealine.com/onglet/modele.html

(l'onglet actif passe bioen devant)

la seule chose que je réussise a obtenir ressemble à ca

http://www.crealine.com/onglet/test.html

comment puis je y arriver en css ??

merci

jacques
Modifié par jacques (19 Feb 2007 - 18:47)

bah l'onglet actif est bien mis en évidence dans ton cas nan?

Il n'y a pas de notion de "page active" ou de "page inactive" en CSS. Il y a, pour les liens, des mises en valeur du lien lors du survol, via la pseudo-classe :hover.

a {background: url(onglet-inactif.png);}
a:hover {background: url(onglet-actif.png);}

Si on veut aller plus loin, c'est à dire identifier quel lien correspond à la page en cours, et quels liens correspondent à d'autre pages, il faut coder ça directement dans le HTML. Ce que tu fais par ailleurs en utilisant un id="current". Donc la page en cours est bien mise en valeur.
Qu'est-ce que tu voudrais exactement ?

tiens

je pensais que l'on pouvais avoir

a {background: url(onglet-inactif.png);}

a:hover {background: url(onglet-survolé.png);}

a:focus {background: url(onglet-actif.png);}

ça marche pas ça ?


tiens juste pour voir, rajoute ça dans ta css pour voir

#header #current a:hover {
background: #000;
}

#header #current a:focus{
background: #000;
}

chez moi, ça donne ça sous firefox


Modifié par Philippe (25 Jan 2006 - 22:00)

Philippe a écrit :
Je pensais que l'on pouvais avoir

a {background: url(onglet-inactif.png);}
a:hover {background: url(onglet-survolé.png);}
a:focus {background: url(onglet-actif.png);}

Ça marche pas ça ?

Je pense que non.

L'état focus est obtenu lorsqu'on clique sur un élément, où en le sélectionnant avec TAB (navigation au clavier). Il suffit de cliquer ailleurs dans la page pour que l'élément perde le focus.

Du coup il me semble que l'intérêt principal de la pseudo-classe :focus est de pouvoir doubler la pseudo-classe :hover. En effet, tout le monde ne peut pas naviguer à la souris.