💥 TRENDING: Fr:Trouver votre style de CSS - Full Gallery 2025

Ce qui suit ne traite pas du choix d'un Thème WordPress (en anglais), mais plutôt de trouver les styles CSS à l'intérieur de votre Thème courant. Souvent le problème survient dans la disposition ou le modèle (en anglais). Par exemple, une bordure indésirable entre le menu de barre latérale et le reste de la page. Vous avez beau chercher et chercher, vous ne trouvez aucune référence à cette bordure. Que faire ?

Jouer au Détective des CSS

Commençons en jouant le détective des CSS. Vous savez quel est le problème, mais vous n'arrivez tout simplement pas à le trouver. Dans l'exemple ci-dessus, vous chassez la bordure errante.

Commencez par examiner attentivement une page affichée (ou la page de test) et repérez un texte significatif dans la barre latérale, près de la bordure errante. Imaginons que parmi la liste de la barre latérale, vous avez un article intitulé "Tout sur Harry". Vous savez que vous allez trouver ce titre dans la barre latérale quand vous allez visualiser le code source de la page.

Pour voir le code source d'une page, dans la barre de menu de votre navigateur et choisissez Affichage > Code source de la page ou Affichage > source. Une fenêtre affichant le code source de la page apparaîtra.

Utilisez votre panoplie de détective, Ctrl+F, pour lancer une recherche. Saisissez "tout sur harry" et cliquez sur Suivant ou Occurrence suivante. Vous devez y être, à moins que vous n'ayez plusieurs fois les mots "tout sur harry" dans votre article. Cela vous emmène à la première occurrence de la phrase "tout sur harry" qui est probablement dans votre barre latérale. Sinon, cliquez sur Suivant ou Occurrence suivante jusqu'à ce que vous trouviez la bonne phrase au bon endroit.

Si vous utilisez le navigateur Firefox, vous pouvez installer l'incontournable extension "Web Developer" en français, qui fera s'afficher à volonté les attributs CSS d'une page.

Si vous utilisez Internet Explorer, une autre alternative est d'utiliser la Barre d'outils de Développement d'Internet Explorer, qui vous permet de visualiser et sélectionner les éléments, IDs, et classes de la page. Il affiche les éléments selon leur hiérarchie dans la page avec leurs attributs CSS, et il peut mettre en évidence les balises DIVs, les tables, etc. Vous pouvez télécharger cette barre d'outils à : http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&DisplayLang=en.

Une fois que vous avez trouvé la phrase, il est temps de jouer au détective dans le CSS. Examinez le code autour de la phrase "Tout sur Harry" pour trouver ce que nous cherchons. Cela devrait ressembler à quelque chose comme un des exemples suivants, contenant des mots comme sidebar, menu, ou sidecolumn :

<div id="sidebar">

or

<div class="sidebar">

Ceci est la section principale contenant votre barre de menu latérale. Vous tenez votre premier suspect.

Maintenant, ouvrez le fichier style.css et faites une nouvelle recherche du mot sidebar ou quelque soit le nom de ce que vous venez de trouver. On peut généralement l'identifier de deux façons:

#sidebar

ou

.sidebar

Regardez dans les styles de ces définitions de CSS et vérifiez s'il n'est pas question d'une bordure (border), cela ressemble souvent à quelque chose comme cela :

#sidebar {position: relative; float: right; width: 170px;
    color: blue; font-size: 90%; border-right: solid 1px blue; }

La voici la bordure, la coupable ! Si c'est bien la partie en cause, supprimez la référence à la bordure (border) et tout devrait rentrer dans l'ordre.

Sinon continuez à chercher...

Parfois le coupable est celui que l'on soupçonne le moins. Peut-être que la bordure n'est pas causée par le suspect le plus évident, la barre latérale, mais par la section contenu (content). Retournez sur le code source de la page et cherchez les premiers mots de votre article. Cherchez quelque chose comme ça :

<div id="content">

Cela peut être nommé content, page. post, maincolumn, widecolumn, ou d'autres manières encore, mais cela doit être un contenant CSS qui englobe l'information de l'article. Ensuite, revenez à la feuille de style et vérifiez qu'il y a bien une bordure dans cette section.

Parcourir la Feuille de Style

Si tout cela n'a rien donné, le détective des CSS n'abandonne jamais sa traque. Retournez à la cachette de tous les styles, le fichier style.css, parcourez-le en faisant une recherche avec le terme "border" et examinez attentivement tous les suspects. Notez le nom de l'identifiant, comme sidebar, menu, content et page, et retournez au code source de la page générée pour vérifier s'il s'agit bien du coupable.

Vous pouvez également sélectionner la bordure suspecte que vous avez trouvée dans la feuille de style, la couper/coller dans un fichier texte (avec le bloc-notes par exemple) qui restera ouvert sur votre ordinateur. Indiquez à l'aide d'un commentaire l'endroit d'où vous l'avez retiré.

Retiré border: solid 2px green de #content

Ensuite sauvez le style.css modifié et téléchargez-le sur votre site. Actualisez le texte de la page de l'article et vérifiez si la bordure a disparu. Si oui, vous avez trouvé votre coupable. Sinon, retournez au bloc-notes pour récupérer le code que vous avez retiré de style.css pour l'y remettre et recommencez ailleurs.

Si vous avez trouvé votre coupable, effectuez une petite danse, poussez des cris aigus et acclamez-vous, et rendez les autres suspicieux et nerveux à votre vue. Le détective des CSS a encore frappé !

Autres Sources d'Aide pour Corriger vos Problèmes de CSS

• Corriger les Bugs de CSS du Navigateur (en anglais)
• Dépannage des CSS (en anglais)

Retour à la Page d'Accueil