Vendredi 9 Novembre 2007
Afficher un texte par simple clic
Par Jacky, Vendredi 9 Novembre 2007 à 06:15 GMT+2 dans Astuces CSS
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
