Afficher un texte par simple clic
Cliquez hors du cadre pour cacher la réponse.
Pour les utilisateurs de IE, cliquez sur la question et déscendez légèrement vers le bas.
Vous avez déjà peut-être lus l'article "Rollover sur un lien", qui vous expliquait comment afficher un texte
en sélectionnant un mot. Vous allez apprendre à présent, comment afficher un texte par simple clic
et celà sans inserer un tableau ni en utilisant du javascript.
Rendez-vous dans votre feuille de style et introduisez ce code:
| a.questionary, a.questionary:visited{ display:block; display:inline-block; color:#fff !important; > Pour IE text-decoration:none; z-index:50; outline-color:#800080; outline-style:solid; outline-width:1px; } a.questionary em{ display:none; color:#ffff00 !important; >Pour IE } a.questionary:hover{ display:block; } .contain_right { position:relative; margin:9px; padding: 0px; } .contain_right .answer{ position:absolute; width:240px; } .contain_right a.questionary:active em,.contain_right a.questionary:focus em{ display:block; position:absolute; z-index:50; margin-left: 150px; font-style:normal; } |
Ensuite dans votre article:
<div class="contain_right">
<div class="text">
<a href="#nogo" class="questionary answer">
<em>Votre réponse</em>
Votre question</a></div></div>
Ceci pour chaque question-réponse
Note: " a.questionary, a.questionary:visited " outline-color masque le cadre pointillé sous Firefox,
mettez à la place la couleur de votre fond de page.
Pour un long texte, modifiez dans " contain_right - contain_right answer ", en mettant margin et padding à 0px; augmentez " width " à 400px et dans " .contain_right a.questionary:active em,.contain_right a.questionary:focus em ", au lieu de " margin-left " mettez " top: 28px ".
Regardez un exemple sur cette page: Devinettes
Par Jacky, Vendredi 9 Novembre 2007 à 06:15 GMT+2 dans Astuces CSS (article, RSS)
