|
Class : ID Admin
Posts : 1011
Registered on : 12/11/2007
Age : 25
Sex : Female
Offline Mail Www
|
Lorsque l'on crée son site en XHTML/CSS, l'un des atouts pour faciliter la navigation à vos visiteurs est l'utilisation des liens d'évitement permettant de passer directement au menu, au contenu, à la recherche pour ceux qui n'ont pas de souris. En effet, plus le menu et long, plus ça prend du temps à ces personnes pour parvenir au contenu à cause du nombre de fois où ils doivent appuyer sur la touche "Tab" sur le clavier. Ces liens permettent donc d'économiser du temps pour ceux qui ne peuvent pas faire autrement que de naviguer au clavier, notamment les aveugles pour qui la souris est complètement inutile.
Si vous voulez savoir comment j'ai fait pour mettre les liens d'accès rapide (aller au menu, aller au contenu) sur le site, voici comment j'ai fait.
Note : Cette astuce suivante n'a été testée que sur un design extensible.
Premièrement, vous devez mettre les liens rapides avant le header, voire avant même le div conteneur si vous en utilisez un.
Un exemple avec ce code XHTML simplifié pour vous le montrer :
<!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" >
<head>
<title>Mon super site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="styles.css" media="screen" type="text/css" title="design" />
</head>
<body>
<!-- Liens d'accès rapide -->
<div id="accessbar"><a href="#menu">Aller au menu</a> | <a href="#contenu">Aller au contenu</a></div>
<!-- Début du conteneur -->
<div id="conteneur">
<!-- Ma bannière -->
<div id="header"><h1>Ishimaru Design</h1></div>
<!-- Menu -->
<div id="menu">
<h3><a href="#" name="menu"> </a>Menu</h3>
<ul>
<li>Lien 1</li>
<li>Lien 2</li>
<li>LIen 3</li>
</ul>
</div>
<!-- Contenu de la page -->
<div id="contenu">
<h2><a href="#" name="contenu"> </a>Mon super site</h2>
<p>Bienvenue sur mon super site que j'ai appris à coder grâce à tonton M@teo du site du zéro et à grande soeur Ishimaru.</p>
</div>
<!-- Pied de page -->
<p id="footer">© Machin Truc, tous droits réservés</p>
<!-- Fin du conteneur -->
</div>
</body>
</html>
Bien que je vous montre tout ce code, on va se concentrer seulement sur nos liens d'accès rapide au niveau du CSS. De toute façon, vous devez normalement avoir les bases en xHTML/CSS pour lire ce tuto.
Maintenant, on se penche sur le CSS
En premier, j'avais essayé avec l'utilisation d'un flottant, mais au moment de faire les tests sous Internet Explorer 6 et 7 pendant le revampage du design vert, je me suis rendue compte que ça tassait la partie droite de ma bannière sous ces deux versions de IE. J'ai donc dû changer de technique pour rendre ça compatible sur tous les navigateurs.
La technique que j'ai trouvée est celle du positionnement absolu. Notez que cette technique fonctionne mieux si vous avez réinitialisé les marges internes et externes pour vos éléments HTML avec la ligne *{margin:0; padding:0;}, ceci permettant d'éviter les décalages entre le bord de la bannière et les liens selon le navigateur.
Maintenant, voici le code CSS :
#accessbar
{
font-size: 0.6em;
text-align: right;
margin: 0px;
padding-right: 5px;
position: absolute;
right: 20px;
top: 20px;
}
Je commence par mettre une police assez petite, de préférence avec une valeur relative, puis ensuite, je l'aligne à droite et je m'assure que les marges sont à zéro.
Ensuite, je règle le positionnement avec position:absolute; et positionné à 20 pixels à partir du haut et à 20 pixels à partir de la droite. Comme finition, je mets un petit padding pour tasser encore un petit peu le texte.
Maintenant, vos liens sont bien positionnés ! Vous pouvez ajuster les valeur de top et left selon le graphisme de votre bannière.
Bien que je n'ai pas encore testé sur un design fixe, il me manquerait juste la confirmation à savoir si ça fonctionne sur les designs fixe en enlevant le right: 20px; et en réglant le padding-right à 25px. Si quelqu'un peut tester et me donner les résultats sous FF, IE6 et IE7, ce serait apprécié. Et suite à ça, j'éditerai ce post.
|
