J'ai récemment reçu un email me demandant si je savais centrer une boîte de liens sur une page comme celle vue sur cet exemple de page : http://www.thomasjanotta.de/blulink1.php
Parce que la question était vraiment à propos du centrage de la boîte, j'ai pensé que je pourrais essayer de tenter le coup de débarrasser la table utilisée pour créer et héberger les liens.
Centrer la boîte
La partie centrale est plutôt simple. Parce que la
boîte a une largeur, vous avez simplement besoin de donner
une valeur auto aux marges gauche et droite. La CSS
pour la DL ressemble à cela :
dl#links {
font: 12px/16px verdana, arial, helvetica, sans-serif;
width: 230px;
margin: 2em auto;
/* C'est ce qui centre la boîte
la première valeur est pour la marge haut et bas
La seconde valeur (auto) éclate la différence
entre les marges droite et gauche */
}
Ceci fonctionne dans les dernières versions des navigateurs les plus connus. Quelques plus vieux navigateurs ne centreront pas la boîte. Il existe quelques moyens de contourner, mais je laisserai cela comme un exercice pour le lecteur qui veut pouvoir supporter ces navigateurs.
Recréer les liens
Il n'y a probablement pas de surprise que je choisisse d'utiliser une liste pour baliser les liens. En fait j'ai décidé d'utiliser une liste de définitions parce que chaque lien a deux parties, le lien et le nombre de hits obtenus par le lien. Aussi le lien devient la DT et le nombre de hits la DD.
En ayant décidé cela, c'était simplement
une question de remplacement du balisage de TABLE avec une DL.
Compte tenu de la façon dont l'original était
balisé ce ne fût qu'un simple processus de chercher
et remplacer pour y parvenir, permettant même
l'extraclass sur chaque lien pour obtenir un
arrière-plan en gris.
La CSS est vraiment franche, aussi. J'ai adapté la technique dans mon article 7-10 Split, en appliquant les règles à la DT et à la DD plutôt que d'ajouter des SPANs et des DIVs. Et une fois que CSS 3 sera supporté par suffisamment de navigateurs, nous pourrons aussi ajouter l'extra class sur chaque autre ligne.
Voilà la boîte centrée avec liens via CSS (Visualiser le source pour voir la CSS).
Un article original de Mark Newhouse posté le 4 août 2004. Seul le lien original fait office de référence. Traduction Christophe Ducamp
NDT : Pour une initiation au centrage CSS, lisez cet excellent article de Laurent Denis sur OpenWeb
