Attribuer une couleur de fond à un titre, un mot, un texte, etc ...

Voici une autre petite règle bien pratique dont beaucoup de concepteurs de sites ignorent peut-être l'existence, du moins dans cette application. Vous en voyez un premier exemple dans le titre de cette page.

Un autre exemple paraissant anodin ? La ligne que vous lisez ici.

Vous ne voyez pas ? Vous pensez avoir la solution ? Je crois que non ... en voici la démonstration :

Attribuer une couleur de fond à un titre, un mot, un texte, etc ...

... pas très joli, n'est-ce-pas ! Le fond déborde largement du texte !

Vous pensiez probablement que l'utilisation d'une règle toute simple, et qui vous a déjà servi dans d'autres situations, suffisait à obtenir un affichage tel que vous le désiriez : la bien connue { background-color : couleur }, insérée tout bonnement dans la balise d'ouverture ...
      Eh bien non, comme vous le constatez !

Le postulat : attribuer une couleur de fond à un élément qui n'est pas un bloc, sans pour autant en dépasser les limites ou, si vous préférez, sans en dépasser le contenu, limité, en principe, par ses balises d'ouverture et de fermeture. On appelle cela un élément "intra-ligne".
      Voui ... mais encore ... (marmonnez-vous) : un élément est dit "intra-ligne" ou de "niveau intra-ligne" parce que son contenu ne crée pas de nouveau bloc, mais est distribué sur la ligne.
      Heu ... je crois voir d'ici vos yeux démesurément écarquillés. J'explique plus simplement :

... c'est-à-dire dans les limites de la fenêtre du navigateur ou du bloc dont il est un des éléments, ni plus, ni moins. Et c'est le cas d'un texte entouré des balises HTML très couramment utilisées (et pour cause !) telles : < P > et la série des < H > servant aux paragraphes ou aux titres, comme en tête de cette page. La fermeture d'un paragraphe ou d'un titre, par sa balise de fermeture, n'assure donc pas la fin de la règle de style qui en affichera le fond ! Elle se poursuivra jusqu'au "bout de la ligne". Cela, c'est le résultat "visible" mais sa réalité tangible provient du fait qu'un élément intra-ligne régit par une propriété/valeur d'affichage particulière (que vous verrez plus bas) se voit créer une boîte dans le prolongement de la ligne du contenu qui le précède. Cette boîte prend alors automatiquement la dimension voulue pour la mise en forme de son contenu. D'autre part, un contenu textuel intégré dans les balises précitées peut s'étendre sur plusieurs lignes. Il sera alors créé autant de boîtes de ligne que voulu, tant que cette propriété/valeur d'affichage ne sera pas clôturée par la balise de fermeture. En somme, la combinaison propriété/valeur qui sera utilisée créera un ou plusieurs blocs sur une ou plusieurs lignes.

Un autre exemple ? Vous êtes en train de le lire !

C'est franchement moche, hein !

La couleur de fond va de l'extrême gauche jusqu'à l'extrême droite de la fenêtre (limitée par un bloc, je le précise : presque toutes les pages de ce site sont intégrées dans des blocs/calques de 760 pixels afin de pouvoir être centrées, quelle que soit la résolution ou la fenêtre de visualisation adoptée par les visiteurs ... à partir de cette dimension, évidemment !) "sous" la phrase affichée ci-dessus. Par contre, si cette même règle est utilisée à l'intérieur du paragraphe, dans une autre balise, elle est limitée par la fermeture de celle-ci.
      - Ah bon sang ! mais c'est bien sûr ! ... vous dites-vous : je vais donc utiliser cette astuce !
      - Eh ! Ho ! ça va pas, la tête ? (là, c'est moi qui cause smiley ) il y a beaucoup plus simple ... et surtout correct !

En effet, utiliser une seconde balise, soit HTML (telle <b> , <strong> , <i> , <em>, etc ... #) soit CSS (telle le sélecteur <span>) pour y intégrer la règle permet d'obtenir le même résultat. Il s'agit toutefois d'un détournement de l'esprit qui a présidé à l'élaboration des feuilles de styles. Cette solution, un peu tordue, est donc à rejeter ... d'autant qu'il existe une règle toute simple pour obtenir le même résultat. De plus, elle est parfaitement conforme aux standards du W3C, ce qui est sensé en assurer la pérennité.

Un petit rappel d'une explication écrite plus haut et qui vous a peut-être échappé :

un élément est dit "intra-ligne" ou de "niveau intra-ligne" ... etc ...

En anglais et langage commun à (presque) toutes les applications informatiques, le terme utilisé est inline, ce qui traduit bien la notion rappelée ci-dessus. Il a donc été introduit une valeur identique dans le langage des FdS ou CSS. Afin d'être opérationnelle et bien comprise, la propriété à laquelle elle doit être associée sera nommée display, qui peut signifier "affichage", "étalage", "exposition" dans cette même langue. Si ce mot recouvre plusieurs interprétations, il a toutefois l'avantage de pouvoir être compris intuitivement ...

Vous aurez donc déjà imaginé, je le suppose, la technique à adopter pour obtenir le résultat voulu : il suffira d'ajouter à la balise contenant l'élément la combinaison propriété/valeur :

display : inline

Vous vous souviendrez peut-être qu'il s'agit d'une propriété de classification dont vous avez vu la définition (si vous êtes un fidèle lecteur !) dans les familles de propriétés explicitées dans d'autres pages. Elle donne toutefois l'impression d'avoir été implémentée dans les CSS en toute hâte et oubliée par la suite ... Il n'en est rien. Rappelez-vous ce qui est écrit plus haut :

... se voit créer une boîte dans le prolongement de la ligne du contenu qui le précède

La base sur laquelle a été étudiée et finalement implémentée cette propriété/valeur depuis CSS1 nous laisse donc sur notre faim pour l'exploiter pleinement ... ou, du moins, telle que nous l'envisageons pour cette application. Par exemple, il est impossible d'utiliser la propriété text-align parmi les règles qui peuvent (ou devraient pouvoir) éventuellement l'accompagner. Il est tout aussi inopérant d'utiliser la propriété margin associée à la valeur auto, qui rend bien des services lorsqu'elle est implémentée. C'est le cas chez Mozilla, par exemple, alors que IE l'ignore superbement, du moins jusqu'à la version 6.0).Par conséquent, il est assez tentant de sortir de la sacro-sainte conformité prônée par le W3C en utilisant un bon vieux < center > de derrière les fagots HTML. Dans le cadre d'une volonté de faire du "tout CSS" pour la création de pages, ce serait adopter une solution peu orthodoxe pour obtenir l'alignement voulu ! Choix de facilité ... mais pas très élégant ... Pour arriver à nos fins (et assouvir notre faim de perfection), nous allons donc adopter une solution "FdS" puisque c'est possible.

Au lieu d'écrire tout simplement :

<balise style="background : couleur ; display : inline ; text-align : center ;">contenu</balise>

... inopérant pour ce qui est du centrage, il faudra insérer cet élément dans un bloc.

Ben oui ... ! Encore un ! Mais un "vrai", cette fois : pur et dur, origine CSS garantie ! Ce bloc (ou boîte, selon les termes le plus souvent utilisés par les puristes) est "notre" fameux "calque à tout faire" dont je vous entretiens à longueur de pages depuis un bon moment.

Voici quelle sera l'écriture à adopter pour arriver, enfin, au résultat espéré :

<div style="text-align:center"><balise style="background : couleur ; display : inline ;">contenu</balise></div>

... pour obtenir le résultat que vous voyez ci-dessus. Si on peut regretter le besoin d'une écriture qui aurait
smileypu (aurait dû ?) être évitée, on ne peut que se réjouir, enfin !, d'être arrivé à nos fins dans notre faim d'être les
plus fins.

Voilà ... J'ai peut-être été un peu long dans cet exposé mais j'imagine que vous aurez pu y comprendre non seulement le cheminement de la recherche d'implémentation de certaines propriétés/valeurs des FdS mais aussi et surtout une certaine difficulté à les rendre parfaitement opérationnelles ... et universelles.

Une seule petite règle pour autant d'effet ... et de réflexion !

retour