Problèmes techniques et solutions

Gardez vos cheveux !

La conception de pages Web soulève parfois des problèmes techniques complexes. Cette page recense les solutions aux problèmes les plus courants

Sélection de liens concernant les problèmes techniques liés au design des pages Web

Le site CSS-Faciles propose une liste d'astuces bien sympathique concernant l'utilisation des CSS

Centrer un design de largeur fixe

Si vous faites partie de ceux qui optent pour une largeur de page fixe (voir notre article "Design fluide ou design fixe ?"), vous souhaiterez sans doute centrer votre page à l'intérieur de la fenêtre du navigateur.

La solution consiste à ajouter une balise <div> juste aprés la balise <body> avec le style suivant :

N'oubliez pas de refermer cette balise en ajoutant </div> juste avant </body>.

Notre exemple est conçu pour une page ayant une largeur de 800px. Si vous modifiez cette largeur, pensez à modifier également la valeur de margin-left qui doit toujours être égale à la moitié de la largeur de votre page, avec un signe moins.

Cette solution a l'avantage d'être compatible avec lnternet Explorer 5, 5.5 et 6.

Diminuer le "poids" (la taille) des images utilisées sur votre site

Le site RankSpirit consacre un excellent résumé aux divers formats d''images et à la façon de réduire leurs taille.

Vérifier la compatibilité d'un page avec tous les navigateurs existants

Il est possible d'installer plusieurs versions d'Internet Explorer ou de FireFox sur votre machine afin de pouvoir faire vos tests. Pour y parvenir, vous devrez télécharger des versions "standalone" de ces navigateurs. Pour vous faciliter la tache, Wikistuce propose une archive incluant IE 5.5, IE 6 SP2, IE 7, Firefox 1.5.0.7, Firefox 2.0, Opera 8.5, Opera 9 et Netscape 7.

Les sites BrowserCam et Browsershots vous donneront des captures d'écran de vos pages vues à travers un grand nombre de navigateurs. Vous pouvez également utiliser DejaVu pour tester votre site avec des anciens navigateurs ou Danvine pour tester votre site avec Safari Macintosh ou Internet Explorer 7.0 ainsi que Scapture pour les navigateurs du monde Linux.

Avoir un menu fixe sans recourir aux "frames" (cadres)

Le système des frames présentent de très graves inconvénients concernant le référencement des sites et nous vous déconseillons vivement de l'utiliser.

Si vous souhaitez toute même pouvoir bénéficier d'un menu fixe (ne défilant pas avec le contenu de la page), il existe plusieurs techniques compatibles avec lnternet Explorer 5, 5.5 et 6. et permettant d'obtenir ce résultat :

Le site CSS-Faciles propose des mises en page à base de CSS permettant d'obtenir un menu fixe aussi bien avec un design de largeur fixe qu'avec un design de largeur variable. Ce site propose par ailleurs une excellente introduction aux CSS et de nombreuses astuces utilisant cette technique.
Le site JeJavascript propose un menu qui se repositionne à un emplacement fixe avec l'aide d'un script javascript. Cette solution génére cependant un "sautillement" assez désagréable du menu lors du défilement du contenu.

Créer un menu déroulant

Gérer un menu déroulant (avec des sous-menus apparaissants lors du survol de la souris) est malheureusement assez compliqué à réaliser. Heureusement, des hommes courageux ont réglé ce problème à votre place !

Le site CSS-Faciles propose la solution la plus simple possible à ce problème. L'avantage du code proposé est qu'il fonctionne sans javascript sur tous les navigateurs modernes et n'utilise le javascript que pour IE 5.5 et IE 6.
Fairy Tells propose un script de menu extrêmement sophistiqué permettant la navigation au clavier. Le code est un peu complexe à comprendre mais il est de toute beauté.

Présenter le menu sous forme d'onglets

Menu à onglets Si votre site comporte peu de pages ou si vous ne voulez faire ne ressortir que ses thèmes principaux, la présentation sous formes d'onglets est particulièrement élégante.

Douglas Bowman a fait une longue étude sur ce système et s'est attaché à éliminer tous les bugs et toutes les difficultés que présente notamment IE 6 pour ce type de présentation.

Le résultat de son travail est traduit en français sur le site Pompage.

Un "rollover" rapide, sans "preload"

Lorsqu'on gère un "rollover" (changement de l'apparence d'un bouton quand la souris le survole) en CSS, deux ou trois images doivent être chargées, chaque image correspondant à un état du bouton : 1-normal, 2-survolé, 3-cliqué.

Le temps de chargement de ces images peut être pénalisant pour l'internaute. Plutôt que de les charger indépendament et plutôt que de les charger en "preload", pour gagner du temps, il est possible de regrouper ces 3 images en une seule. Cette option permet un gain de temps appréciable et ne nécessite plus de "preload".

Prenons un exemple simple : celui d'une image-bouton associée à un lien. Ce cas peut être géré à l'aide d'une seule image qui comporte les 3 états possibles de ce bouton :normal, :hover, et :active.

Voici ce à quoi ce bouton ressemblera (passez votre souris au dessus, et cliquez dessus, pour voir le résultat) : Bouton exemple

Et voici comment on le fait fonctionner :

Habituellement, en CSS, ont utilise les images de fond (background-image) comme ceci :

#monbouton a {background: url("button.gif") top left no-repeat;}
#monbouton a:hover {background-image: url("button-over.gif");}
#monbouton a:active {background-image: url("button-active.gif");}

Cette fois-ci, au lien de changer d'image, on va se contenter de la décaler vers la gauche. Etant donné que la taille du bloc ne permet d'afficher qu'une portion de l'image, cette astuce va nous permettre d'afficher successivement les 3 trois états du bouton grâce à ce simple "glissement".

#monbouton a {
    background: url("3states-button.gif") 0 0 no-repeat;
    display:block;
    width : 120px; /* on limite la largeur à 120px afin de n'afficher qu'une portion de l'image. */
}
#monbouton a:hover {background-position: -157px 0;}
#monbouton a:active {background-position: -314px 0;}

Et voilà, c'est aussi simple que ça. Un bouton géré de cette façon sera beaucoup plus réactif qu'un bouton utilisant 3 images distinctes.

Et pour ne rien gâcher, cette façon de procéder est compatible avec tous les navigateurs actuels (IE5+, Mozilla, Opera, Safari etc.)

Cette astuce est une traduction de la page "Fast Rollovers Without Preload" du site "wellstyled" sur lequel vous trouverez également une version supprimant le clignotement du bouton sous IE6.

Ce site vous a plu ? Visitez aussi : et