| E-Mail: |  jan.heinicke@online.de |
| Homepage-URL: |  http://css.fractatulum.net/ |
Il s'agit ici d'un article traduit de l'allemand par la rédaction de SELFHTML actuel. Veuillez poser vos questions relatives à cet article uniquement à son auteur, prenant compte que celui-ci ne maîtrise peut-être pas la langue française!
  |
Dans cet exemple, il s'agit de mettre en place un bouton qui modifie sa taille au passage de la souris et qui affiche un texte d'informations supplémentaires là où se trouve le lien ou à un autre endroit au choix dans la page.
Ceci est réalisé exclusivement grâce à la mise en œuvre des CSS et de HTML. JavaScript n'est pas nécessaire. Comme c'est souvent le cas lors de la mise en œuvre des CSS, il faut également tenir compte ici de la conduite des navigateurs plus anciens. S'il y a des problèmes de représentation, un 
aiguillage CSS pour navigateurs peut constituer la solution.
 |
L'élément de base de la boite d'informations ouvrante est un
passage <div> qui est positionné de façon absolue sur la page. Si le passage était positionné dans le flux de texte, cela aurait pour conséquence un glissement de son contenu sous la boite. Ce passage se voit affecter un ID qui reçoit dans la feuille de style les formatages correspondants. Dans le passage <div> se trouvent un élément <a> ainsi que le texte à afficher, inséré dans un élément
<span>. Celui-ci est tout d'abord défini comme invisible grâce à display:none.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<title>boite d'informations</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
#box {
position:absolute; top:50px; left:50px;
z-index:3;}
#box a {
color:#ffffff;
background:#b3b06c;
font:bold 16px verdana, sans-serif;
text-decoration:none;
display:block;
padding:5px;
border:1px solid black;}
#box a:hover {
color:black;
background:#ddd8b7;
width:400px;}
#box a span {display:none;}
#box a:hover span {
color:black;
background:#ffffff;
font:normal 16px courier, sans-serif;
border:1px solid black;
display:block;
padding:10px;}
-->
</style>
</head>
<body>
<div id="box"><a href="#">BOITE D'INFORMATIONS<span>Lorem ipsum dolor sit amet</span></a></div>
</body>
</html>
|
Dans cet exemple, l'ID box a été affecté à un passage <div>, grâce au sélecteur ID #box la position ainsi que l'apparence sont arrêtées. L' élément<div> est positionné de façon absolue, il est ainsi retiré du flux des éléments.
Avec le sélecteur enfant #box a,
le format de base de l'élément <a> placé dans un passage Div avec l' ID box est fixé. Avec le sélecteur enfant #box a:hover, la conduite du pseudoformat
de l' élément <a> lors d'un contact avec la souris est définie.
Pour l'apparition et la disparition du texte d'information, c'est l'élément <span> qui est déterminant dans cet exemple. Au départ, le texte d'information n'est pas visible, cela s'obtient grâce à la mention display:none dans le sélecteur #box a span. La valeur none fait en sorte que le texte disparaisse, le pseudo-format :hover fait en sorte que le texte apparaisse lorsque le lien est survolé avec la souris.
Avec ce genre de formatage, le problème se pose pour les navigateurs plus anciens (et pour Opera jusqu'à la version 6) qui ne soutiennent pas ce formatage. Il s'agit en particulier de sélecteurs tels que #box a:hover span. Le texte d'information n'est donc pas affiché. Afin que les visiteurs qui utilisent un tel navigateur puissent malgré tout accéder à l'information, il est possible de référencer une page, qui contient elle aussi l'information, dans l'élément <a>.
| |
En alternative, le texte à faire apparaître peut aussi s'afficher sur la page à un endroit fixe au choix. Pour ce faire, il est nécessaire de mentionner la position dans le sélecteur enfant #box a:hover span, ce qu'on obtient au moyen de position:absolute.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head>
<title>boite d'informations</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
#box a {
color:#ffffff;
background:#b3b06c;
font:bold 16px verdana, sans-serif;
text-decoration:none;
display:block;
width:150px;
padding:5px;
border:1px solid black;}
#box a:hover {
color:black;
background:#ddd8b7;}
#box a span {display:none;}
#box a:hover span {
position:absolute; top:10px; right:10px; z-index:3;
display:block;
width:300px;
color:black;
background:#ffffff;
font:normal 16px courier, sans-serif;
border:1px solid black;
padding:10px;}
-->
</style>
</head>
<body>
<div id="box"><a href="#">BOITE D'INFORMATIONS<span>Lorem ipsum dolor sit amet.</span></a></div>
</body>
</html>
|
Dans cet exemple, le passage <div> lui-même n'est pas positionné de façon absolue, il se trouve dans le flux normal du document. Cependant, le texte à faire apparaître est positionné ici de façon absolue et apparaît ainsi à un endroit déterminé de la page. Exception faite de cela, le principe de cette construction est le même que dans l'exemple 1.
| |
Dans cet exemple, c'est à nouveau lors du contact de la souris avec un élément qu'une information complémentaire apparaît. La différence avec les exemples précédents réside en ce que le Pseudoformat :hover n'est pas ici affecté à l'élément <a>, mais à un autre élément HTML , en l'occurrence à un <div>.
Ce genre de formatage présente l'avantage que ce n'est pas seulement un élément incorporé qui peut apparaître mais aussi un élément de bloc, lequel peut à son tour contenir des éléments de bloc. L'inconvénient en est que seuls les navigateurs supportant suffisamment les CSS maîtrisent ce genre de formatage, ainsi ce n'est pas le cas de l'Explorer Internet y compris la version 6. En revanche, les versions actuelles de Netscape, Mozilla et Opera ne rencontrent aucun problème ici.
Afin que les informations à faire apparaître soient accessibles à tous les utilisateurs quelque soit le navigateur utilisé, la petite image dans cet exemple est pourvue d'un lien qui pointe sur une page contenant elle aussi les informations.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head>
<title>boite d'informations</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
img {
border:none;
}
#box{
height:80px;
width:80px;
padding:0;
margin:20px;
border:1px solid black;
font:bold 14px verdana, sans-serif;}
#box div{display:none;}
#box:hover div{
display:block;
width:300px;
position:absolute;top:20px;right:20px;
border:1px dashed black;
padding:15px;
font:normal 14px verdana, sans-serif;}
-->
</style>
</head>
<body>
<div id="box"><a href="info.htm"><img src="image.png" width="80" height="80" alt=""></a>
<div>
<p><strong>INFORMATIONS</strong></p>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
</body>
</html>
|
Avec l'apport de l'élément <a>, tous les utilisateurs avec des navigateurs graphiques seront servis. Il existe cependant aussi des logiciels qui ne soutiennent pas du tout ou de façon très limitée les CSS, comme par exemple des navigateurs texte ou Netscape jusquà la version 4. Dans ces navigateurs, le passage qui en réalité est caché, se retrouve affiché au beau milieu du reste du contenu. Afin que les contenus de la page soient affichés également correctement sur ces navigateurs, tous les éléments de la page doivent être disposés ou distingués de telle façon qu'aucune grosse pagaille ne s'ensuive. Si la page est encore construite logiquement après avoir ôté toutes les feuilles de style, elle est correctement faite.
| |
Les adresses qui suivent sont recommandées pour mieux comprendre les exemples ci-dessus ou pour approfondir et apprendre d'autres possiblités.
W3C: Les sélecteurs CSS2
W3C: Les sélecteurs CSS2
SelectORacle: déchiffrer les selecteurs
Eric Meyer: pure CSS menus
Lynx-Viewer
|
 SELFHTML actuel Articles spécialisés Feuilles de style CSS |
