Insérer du texte dans une bande de couleur

Mise à jour le 24 août 2008 @ 14:58

Cet article est dépassé ; depuis sa publication, j’ai fait des progrès dans la maîtrise de WordPress 😉 comme le dit BurningHat dans le commentaire, il vaut mieux utiliser un fichier css, celui que j’utilise est par ailleurs décrit ici. Il sera prochainement réécrit !

Je donne ici quelques éléments de mise en page, que j’ai repris du site d’Arno 😉
Pour insérer du texte dans une bande de couleur, j’utilise le code suivant :

<p style= »border-top: 1px solid #006600; border-bottom: 1px solid #006600; padding: 5px 20px 5px 45px; background: #e9fee4 none no-repeat scroll 15px 50%;  text-align: left; color: #006600″><strong>Ceci est du texte inséré dans une bande de couleur.</strong>

ce qui donne le résultat suivant :

Ceci est du texte inséré dans une bande de couleur.

Explications :

  • border-top: 1px solid #006600; -> bordure supérieure de couleur vert foncé
  • border-bottom: 1px solid #006600; -> bordure inférieure de couleur vert foncé
  • padding: 5px 20px 5px 45px; -> espace à gauche, en haut, à droite, en bas
  • background: #e9fee4 -> couleur de fond vert clair
  • text-align: left; -> alignement du texte à gauche
  • color: #006600 -> couleur du texte vert foncé
  • les deux balises <strong> et </strong> pour mettre le texte en gras ; utiliser <small></small> pour une petite police.

Pour une bande de couleur sans bordure, et sans marge j’utilise le code suivant :

<p style= »padding: 10px 5px; background: #e9fee4 none no-repeat scroll 15px 50%;  text-align: left »>Ceci est du texte inséré dans une bande de couleur, sans bordure.</p>

ce qui donne :

Ceci est du texte inséré dans une bande de couleur, sans bordure.

Explications :

  • padding: 10px 5px; -> espace en haut de 10 pixels et de 5 pixels à droite, sans marge à gauche
  • background: #e9fee4 -> couleur de fond vert clair
  • text-align: left; -> alignement du texte à gauche
  • la couleur du texte n’étant pas spécifiée, c’est la couleur par défaut qui est utilisée.

Ecrit par Lise - Site

2 commentaires

Ecrire un commentaire»
  1. Hello,

    Je ne suis pas forcément convaincu par la pertinence d’une mise en forme « en dur » dans le code… Pourquoi ne pas plutôt les affecter à une classe CSS dans un fichier de mise en forme séparé ? (même pour des besoins de démonstration/pédagogie, ça n’est pas forcément plus compliqué à mon humble avis).

    Et sinon, plus objectivement (vu que la remarque précédente n’est finalement qu’une question de goût :p), à quoi te servent les propriétés (non standards) mozilla -moz-background-clip, etc ainsi que le paramètre « no-repeat » sur ton background dans le contexte de ton exemple ?

    Attention également à l’usage de la balise pour mettre du texte en gras, il n’est en gras que parce que c’est le comportement par défaut des navigateurs mais aucunement le sens standard de cette balise (et donc ce comportement peut très bien être amené à changer dans le futur sans préavis). Voir à ce sujet l’article sur Alsacreations http://css.alsacreations.com/Tutoriels-et-articles-divers/strong-b-em-i-quelle-balise-utiliser-et-pourquoi

    @+

  2. Merci de ton commentaire et de tes remarques.
    Concernant la mise en forme en dur dans le code, tu as sans doute raison 😉 Je voulais juste montrer ce qu’on pouvait faire, je ne suis pas une pro du code ni des css !
    Les paramètres que tu cites (moz) se mettent en fait automatiquement sous WordPress et j’ai fait un bête copier coller de mon code 😉
    Je sais que [strong] n’est pas la vraie balise, mais les [b] sont automatiquement transformés en [strong] sous WordPress, de même que [i] est transformé en [em] pour la mise en italique.
    Merci également pour ton lien qui ne fait que rappeler les standards, qu’apparemment WP détourne 😉

Laisser un commentaire

Votre adresse mail ne sera jamais rendue publique ni utilisée.

*Si vous écrivez un commentaire ici pour la première fois, celui-ci ne sera publié qu'après validation par un administrateur du blog. Ne l'envoyez pas plusieurs fois !
*Bien sûr, tout commentaire injurieux, publicitaire ou spam sera supprimé.
*C'est à vous maintenant !

(obligatoire)
(obligatoire)

Laisser ces deux champs tels quels :

Protégé par Invisible Defender.


  • Mentions légales
    Les différents éléments du Blog de Lise restent la propriété de leur(s) auteur(s) respectif(s).