Gérer la position de contenus ajoutés en CSS

J’étais tranquillement en train de développer un site lorsque j’eus besoin d’utiliser les pseudo-éléments :before et :after en CSS. Pour rappel, ces pseudo-éléments permettent en général d’ajouter du contenu avant ou après n’importe quelle balise de cette façon :

.classeDeLElement:before {

content: "Madame la Marquise a dit : ";

}

Ce contenu a la fâcheuse tendance à ne pas accepter de HTML, ce qui ne laisse pas libre cours à toutes les folies non validées par le W3C. Il est tout de même possible de faire des choses assez rigolotes comme rajouter une image, mettre un compteur qui s’incrémente (pour pouvoir faire de la numérotation, par exemple).

On peut tout mettre en même temps comme ceci :

.classeDeLElement:before {

content: url('images/icone.png') counter(compteur1);

padding-right: 5px; /* éloigner le rajout de 5 pixels */

}

Ainsi, on peut jouer avec quelque chose d’intéressant, qui peut nous donner une belle image et être repositionnée par rapport au contenu de la balise concernée. En réalité, il y a un problème, c’est qu’une image n’est pas toujours forcément bien alignée avec le texte. On peut croire être sorti(e) d’affaire en utilisant un coup de padding, mais la propriété CSS padding-bottom ne marche pas avec les pseudo-éléments before et after, du moins avec Gecko… Et on ne va pas mettre une balise img en plein dans notre code HTML, ça serait blasphématoire pour le principe de séparation du contenu et de la présentation (en admettant que les petites images qu’on mettra avant ou après ces balises sont des trucs uniquement tape-à-l’oeil, comme des petits points d’interrogation ou des petites icônes sympa, et non pas des images porteuses de contenu). Ce qu’il y a de pratique avec ce genre de balises img c’est la possibilité d’aligner verticalement l’image au contenu textuel l’englobant directement avec un paramètre de la balise, en bourrinant avec du HTML dont la conformité aux standards actuels émet plus que l’ombre d’un doute. Comment remplacer cette fonctionnalité en utilisant des :before ou des :after ?

J’ai cherché çà-et-là sur toute une tripotée de sites et pas un seul site n’a été foutu de cracher le morceau sur cette histoire. En attendant de réviser mes compétences en recherche sur goo – le – site – le – presque – plus – vu – au – monde – et – dont – les – possesseurs – seront – bientôt – les – maîtres – du – monde – gle, j’ai décidé de me mettre à bidouiller. J’ai utilisé la super astuce de la balise <span> qui arrange tous les problèmes (aussi vue dans l’affaire du remplacement de texte par une image en CSS). Je n’ai pas le temps ni l’envie de voir le résultat dans IE mais si un(e) internaute courageux/se veut se proposer, qu’il/elle se montre !

Voilà la marche à suivre. Ici, on a le code HTML :

<div class="faireattention">Il faut suivre la recette à la lettre !</div>

Et le CSS :

div.faireattention {

/* tout un tas de propriétés chouettes */


}


div.faireattention:before {

content: url("images/attention.png") "> ";

}

Alors, ça marche pas ? C’est normal, il faut procéder aux changements suivants. Revoilà le bon HTML :

<div class="faireattention"><span></span>Il faut suivre la recette à la lettre !</div>

Et le bon CSS :

div.faireattention { /* ... */ }

div.faireattention > span {

position: relative;

top: 3px; /* baisse l'image de 3 pixels */


}

div.faireattention > span:after {

content: url("images/attention.png") "> ";

}

Ca donne à peu près ça :

Aperçu sympa

Aperçu sympa

Comme on peut le remarquer, il y a tout de même un problème de fond : qu’on mette un after ou un before, ça revient au même. En plus de pourrir notre HTML, on perd en flexibilité dans le CSS (« quoi ? le mec il nous donne des astuces et après il dit qu’elles sont pourries ! »).

Néanmoins, il ne faut pas s’inquiéter, ça conviendra dans une grande partie des cas et si quelqu’un a une meilleure solution, qu’il vienne la faire partager !

Vous avez droit aussi au code de la page d’exemple qui vous révèlera que cette astuce malhonnête de positionnement a des répercussions sur le placement des div qu’on voit leurs bordures. C’pas ben grave.

4 Responses to “Gérer la position de contenus ajoutés en CSS”


  1. 1 oelmekki octobre 1, 2008 à 1:31

    Hum, voilà un problème intéressant.

    C’est le genre de problème que je résous habituellement à coup de line-height et de vertical-align: middle, mais ça ne semble pas affecter le content de :before (ou plutôt, ça l’affecte, mais de manière étrange, en ne le décalant que d’un px).

    En tous cas, merci de nous rappeler que ces pseudos éléments existent, et de faire des recherches dessus. J’ai tendance à considérer que tout ce qui ne marche pas sur internet spoiler 6 n’existe pas🙂

  2. 2 sexyfun octobre 1, 2008 à 10:39

    Bon article. Dommage qui n’y est pas de démo, ou d’images pour illustrer tes propos😉

  3. 3 join octobre 1, 2008 à 10:40

    Merci, je ferai peut-être une petite modif dans les jours qui viennent pour illustrer ça, je ne savais pas si j’étais assez clair.

  4. 4 Bouctoubou octobre 2, 2008 à 11:27

    Bon début pour ce blog! Effectivement des petites illustrations ça serait pas mal🙂


Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s





%d blogueurs aiment cette page :