28221 sujets

CSS et mise en forme, CSS3

[Résolu] Liens et affichage de texte fixe

Bonjour,

J'ai réalisé un menu avec des liens. Lorsqu'on clique sur un lien, un texte s'affiche au dessous et reste tant que l'on n'a pas cliqué sur un autre lien.
Mon essai marche correctement sous WinIE 5 à 6. Par contre, sous Firefox 1.0, dès que j'enlève mon pointeur de souris du lien, le texte disparait (on dirait un a:hover) au lieu de rester affiché comme sous IE. Je n'arrive pas à trouver la solution.

Pouvez-vous m'aider ?
Merci.

La page et son code : ici.
PS : ne pas prendre en compte le code inséré après </html> (ajouté par Club-internet pour ses pubs).

Ou code ICI :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 

<style type="text/css">
html, body {height: 100%; width: 100%; background: white}
body {margin: 0;padding: 0;}

#menu {position: absolute; left: 300px; background: silver; width: 200px; height: 200px; top: 30px}
div#links {text-align: center;}
div#links a {display: inline;text-decoration: underline;color: blue;}
div#links a:active {color: red;background: green;}
div#links a span {display: none;}
div#links a:active span {display: block; position: absolute; top: 75px; left: 5px; width: 180px; color: blue; text-align: center; text-decoration: none;}

</style>
</head>
<body>

<div id="menu">
	<div id="links">
	<a href="#">Onglet 1<span>bla bla bla bla bla bla bla bla bla bla bla </span></a> 
	<a href="#">Onglet 2<span>grr grr grr grr grr grr grr grr grr grr grr grr grr grr grr grr </span></a> 
	<a href="#">Onglet 3<span>hello hello hello hello hello hello hello hello hello hello hello hello hello </span></a>
	</div>
</div>

</body>
</html>

Modifié le 12 Dec 2004 - 19:18
Firefox, Opera et Netscape respectent la Recommandation CSS2.
Apparemment, c'est IE qui prolonge l'effet de la pseudo-classe :active

Recommandation CSS2 a écrit :

Les agents utilisateurs interactifs changent parfois l'aspect du rendu en réponse aux actions de l'utilisateur. CSS2 propose trois pseudo-classes pour un usage courant :

* La pseudo-classe :hover, qui est appliquée quand l'utilisateur désigne un élément (au moyen d'un appareil de pointage) sans l'activer. Par exemple, un agent utilisateur visuel pourrait appliquer celle-ci quand le pointeur (d'une souris) survole la boîte produite par un élément. Les agents utilisateurs qui n'ont pas de capacités interactives ne sont pas tenus d'appliquer cette pseudo-classe. Certains agents utilisateurs conformes dotés de ces capacités interactives peuvent être incapables de l'appliquer (ex. un crayon optique) ;

* La pseudo-classe :active, qui est appliquée quand l'utilisateur active un élément. Par exemple, entre le moment où l'utilisateur presse le bouton de la souris et le relâche.

* La pseudo-classe :focus, qui s'applique quand un élément reçoit l'attention (celui-ci acceptant les événements du clavier ou d'autres formes d'entrées de texte).

http://www.yoyodesign.org/doc/w3c/css2/selector.html#dynamic-pseudo-classes
Sorry, pour l'erreur de forum.

Ok Stephan...
Je crois avoir compris. J'en ai conclu que cette façon de faire n'était pas la bonne pour le but que je m'étais fixé. Aussi, j'ai changé de solution et je me suis inspiré de "Alsa : menu horizontal déroulant 2". J'ai modifié le "onmouseover" en "onclick", et autres modif° pour avoir ce que je recherchais sous IE et Firefox.

Voir le résultat

Merci
Sujet clos
Aller à