28221 sujets

CSS et mise en forme, CSS3

[résolu]Class multiples sur un élément HTML est-ce autorisé

Bonjour,
J'ai remarqué sur le script menu dynamique de Suckerfish l'utilisation de class ajouté à une class éxistante, précédée d'un espace.

J'ai utilisé cette possibilité sur l'infobulle CSS ici pour différencier un lien fictif : "#" d'un vrai. Cela marche mais est-ce supporté par les standards ? Smiley lol 
<html>
<style type="text/css">
a img{border:0;vertical-align:middle;}
a.info{;color:green;text-decoration:none}
a.info:hover,a.info:active,a.info:focus {
  background:none /* correction d'un bug IE */;
  color:white;background-color:green}
a.info:visited{color:pink}
a.nA:visited{color:black} /* sans lien */
a.info span{display:none;}
a.info:hover span,a.info:active span,a.info:focus span {
  display:inline;position:absolute;z-index:99;margin:2em 0;
  background:orange;text-align:center;color:white;padding:3px;border:0
  }
a.nA,a.nA:hover,a.nA:focus,a.nA:active{cursor:default;border-bottom:1px gray dashed;
text-decoration:none;color:black;background-color:white} /* sans lien */
</style>

<p>Survolez le mot <a class="info nA" href="#"><span><img src="http://www.legendemania.com/motifs/gif/OplusOegalToto.gif" alt="" width="32" height="32" /> un petit garçon sympathique. </span>"Toto" </a> ou utilisez la touche "TAB" .</p>
<p>pour obtenir des explications ou survolez le mot <a class="info nA" href="#"><span><img src="http://gib.squat.net/blues/rash/_bilda/sorciere.gif" alt="" width="26" height="21" /> une vilaine madame !</span>"Ginette" </a>
.</p>
<p>Code CSS trouvé sur la <a class="info" href="http://forum.alsacreations.com/faq/#item11"><span><img src="http://forum.alsacreations.com/avatars/1-rafcv.jpg" width="80" height="80" alt="" /></span>FAQ d'alsacréation</a>, un peu modifié parce que la bulle passait derrière le texte.</p>
<p>Super de simplicité et d'accéssibilité, je pense que ça mérite d'être partagé.</p>
<h2>Tests sur les navigateurs avec win98:</h2>
    <ul>
      <li>IE5.0, IE6, Firefox : navigation souris et clavier = RAS.</li>
      <li>NS6, Mozilla1.1 : navigation souris et clavier OK, la bulle apparait bien sous le curseur mais toujours collée au bord gauche. Si on ajoute "position:relative" dans "a.info:hover" en modifiant "margin" en "left" et "top", l'infobule prends bien sa place.</li>
      <li>Opéra 7.23 : navigation souris OK. Au clavier avec la touche "A", la bulle refuse de se montrer. Si on fait la modif qui marche sur Mozilla, alors plus rien ne fonctionne.</li>
      <li>NS4.7 pas d'infobulle mais rien n'est perdu, son contenu apparait devantle lien.</li>
  </ul>
<h3>Si un féru de CSS voit une amélioration, je suis preneur</h3>
</html>

Modifié par chmel (23 May 2005 - 22:09)
Bonjour chmel !

Désolé, mais j'ai rien pigé de ce que tu racontes.
Tu pourrais reformuler ta question ? Smiley ohwell

Bon, apparemment djfeat a compris Smiley decu

Donc oui, tu peux faire ceci :

p.verdana {font-family: Verdana sans-serif;}
p.gras {font-weight: bold;}
p.rouge {color: red;}

<p class="verdana gras rouge">Ceci est du Verdana gras rouge</p>

Ça fait partie des Trucs et astuces CSS traduits de l'anglais par Normand Lamoureux.
Modifié par Stephan (22 May 2005 - 05:19)
Merci djfeat pour la solution .
Stephan, en fait, le but était d'alléger le code CSS et faire comme dans le source que j'ai fourni :
<a class="info nA" href="#">

ou info et nA sont 2 class différentes.

Je ne mets pas résolu, car j'ai formulé une 2ème question dans le source: Y a-t'il une solution pour que ça fonctionne correctement dans Mozilla et Opéra pour éviter le javascript?
Encore merci à vous et à celui qui aura résolu ma 2é question.
J'ai trouvé ma solution :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>infobulle</title>
<!--[if IE]><style type="text/css">
a.info:hover{background:none;z-index:99}
</style><![endif]-->
<style>
a img{border:0}
a.info {text-decoration:none;color:black;border-bottom:1px gray dotted;position:relative;}
a.info span {position:absolute;left:-999px;z-index:99;
background:orange;color:white;padding:3px;top:2em;margin:0;}
a.info:hover span {left:0;}
</style>
</head>
<body>

<p>Survolez le mot <a class="info" href="#"><span>un petit garçon sympathique</span>"Toto" </a></p>
<p>ou survolez le mot <a class="info" href="#"><span>une vilaine madame !</span>"Ginette" </a>
pour obtenir des explications.</p>

</body>
</html>


Mais je ne vois pas l'icone éditer pour marquer "résolu"
a écrit :

Mais je ne vois pas l'icone éditer pour marquer "résolu"

Tu dois être enregistré pour cela.
Administrateur
bouquins a écrit :

Mais je ne vois pas l'icone éditer pour marquer "résolu"

Tu dois être enregistré pour cela.
S'il poste, il est enregistré.

Il n'y a pas d'icône pour le résolu, par contre la méthode est expliquée dans l'Aide du forum et dans la FAQ Smiley smile
Sujet clos
Aller à