Ok

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies. Ces derniers assurent le bon fonctionnement de nos services. En savoir plus.

10.05.2009

Un style pour les citations avec "margin" et "padding"

Créer un sytle pour les citations nous a déjà permis de revenir sur les bordures, c'est au tour des espaces intérieurs et extérieurs... Voire entre les deux.

J'ai ajouté une couleur de fond à notre style, pour que la démonstration à propos des espace soit plus visible. Cela nous donne ceci :

Malgré l'autorité de la chose jugée, beaucoup de personnes se donnent le ridicule de rendre un écrivain complice des sentiments qu'il attribue à ses personnages ; et, s'il emploie le je, presque toutes sont tentées de le confondre avec le narrateur.

Balzac (Le Lys dans la vallée)

<p style="background-color:#ddb866;
border-left-style:dashed; border-left-width:3px; border-left-color:#662600;
text-align:left; font-style:italic">
Malgré l'autorité de la chose jugée, beaucoup de personnes se donnent le ridicule de rendre un écrivain complice des sentiments qu'il attribue à ses personnages ; et, s'il emploie le je, presque toutes sont tentées de le confondre avec le narrateur.<br /><br />
Balzac (Le Lys dans la vallée)
</p>

Le texte colle à la bordure de gauche, ce n'est pas très joli, et la citation se distinguerait plus encore du corps de texte si nous pouvions ajouter un décrochage. Ces deux paramètres se gèrent indépendamment.



Padding, ou l'espace intérieur

Cela n'a rien à voir avec un ours au chapeau rouge, non j'ai beau chercher... Bref, le paramètre "padding" permet de régler l'espace intérieur, celui qu'il y aura entre une bordure et ce qu'elle contient. C'est bien ce qu'il nous faut régler pour le décrochage du texte de la bordure.

Si nous fixons le padding à 8 pixels cela donne ceci :

Malgré l'autorité de la chose jugée, beaucoup de personnes se donnent le ridicule de rendre un écrivain complice des sentiments qu'il attribue à ses personnages ; et, s'il emploie le je, presque toutes sont tentées de le confondre avec le narrateur.

Balzac (Le Lys dans la vallée)

<p style="backgroun-color:#ddb866;
border-left-style:dashed; border-left-width:3px; border-left-color:#662600;
padding:8px;
text-align:left; font-style:italic">
Malgré l'autorité de la chose jugée, beaucoup de personnes se donnent le ridicule de rendre un écrivain complice des sentiments qu'il attribue à ses personnages ; et, s'il emploie le je, presque toutes sont tentées de le confondre avec le narrateur.<br /><br />
Balzac (Le Lys dans la vallée)
</p>

C'est déjà mieux, mais nous pouvons noter que l'espace intérieur s'applique sur tout le périmètre de la bordure, faute de précision. Tout comme pour la bordure, nous pouvons gérer les côtés séparément. J'estime que si 2 pixels pourraient suffirent en haut et en bas, 8 pixels restent nécessaires à gauche et à droite.

Cela donne ceci :

Malgré l'autorité de la chose jugée, beaucoup de personnes se donnent le ridicule de rendre un écrivain complice des sentiments qu'il attribue à ses personnages ; et, s'il emploie le je, presque toutes sont tentées de le confondre avec le narrateur.

Balzac (Le Lys dans la vallée)

<p style="backgroun-color:#ddb866;
border-left-style:dashed; border-left-width:3px; border-left-color:#662600;
padding-top: 2px;
padding-right: 8px;
padding-bottom: 2px;
padding-left: 8px;
text-align:left; font-style:italic">
Malgré l'autorité de la chose jugée, beaucoup de personnes se donnent le ridicule de rendre un écrivain complice des sentiments qu'il attribue à ses personnages ; et, s'il emploie le je, presque toutes sont tentées de le confondre avec le narrateur.<br /><br />
Balzac (Le Lys dans la vallée)
</p>

Que les puristes du codage m'épargnent de leurs foudres quelques jours encore, nous reviendrons bientôt à la logique de la montre carrée.


Margin, ou l'espace extérieur.

Rien à voir non plus avec une vague chevelure bleue... Bref, le paramètre "margin" permet de régler l'espace exterieur, celui qui y aura entre une bordure et ce qui l'entoure. C'est bien ce qu'il nous faut régler pour le décrochage du corps de texte de la bordure.

Si nous fixons le margin à 32 pixels cela donne ceci :

Malgré l'autorité de la chose jugée, beaucoup de personnes se donnent le ridicule de rendre un écrivain complice des sentiments qu'il attribue à ses personnages ; et, s'il emploie le je, presque toutes sont tentées de le confondre avec le narrateur.

Balzac (Le Lys dans la vallée)

<p style="backgroun-color:#ddb866;
border-left-style:dashed; border-left-width:3px; border-left-color:#662600;
padding-top: 2px;
padding-right: 8px;
padding-bottom: 2px;
padding-left: 8px;
margin:32px;
text-align:left; font-style:italic">
Malgré l'autorité de la chose jugée, beaucoup de personnes se donnent le ridicule de rendre un écrivain complice des sentiments qu'il attribue à ses personnages ; et, s'il emploie le je, presque toutes sont tentées de le confondre avec le narrateur.<br /><br />
Balzac (Le Lys dans la vallée)
</p>

C'est déjà mieux, mais nous pouvons noter que l'espace extérieur s'applique sur tout le périmètre de la bordure, faute de précision. Tout comme pour la bordure, nous pouvons gérer les côtés séparément. J'estime que si 4 pixels pourraient suffirent en haut et 8 en bas, 32 pixels restent nécessaires à gauche et à droite.

Cela donne ceci :

Malgré l'autorité de la chose jugée, beaucoup de personnes se donnent le ridicule de rendre un écrivain complice des sentiments qu'il attribue à ses personnages ; et, s'il emploie le je, presque toutes sont tentées de le confondre avec le narrateur.

Balzac (Le Lys dans la vallée)

<p style="backgroun-color:#ddb866;
border-left-style:dashed; border-left-width:3px; border-left-color:#662600;
padding-top: 2px;
padding-right: 8px;
padding-bottom: 2px;
padding-left: 8px;
margin-top:4px;
margin-right:32px;
margin-bottom:12px;
margin-left:32px;
text-align:left; font-style:italic">
Malgré l'autorité de la chose jugée, beaucoup de personnes se donnent le ridicule de rendre un écrivain complice des sentiments qu'il attribue à ses personnages ; et, s'il emploie le je, presque toutes sont tentées de le confondre avec le narrateur.<br /><br />
Balzac (Le Lys dans la vallée)
</p>

Que les puristes du codage m'épargnent de leurs foudres quelques jours encore, nous reviendrons bientôt à la logique de la montre carrée.


Et entre l'intérieur et l'extérieur ?

Il reste l'épaisseur de la bordure, que vous pouvez rendre "invisible" en lui donnant la couleur de l'arrière plan. Cela doit pouvoir être utilisé dans quelques situations que je qualifierais de "marginales".

En attendant de terminer la création du style, puis de l'intégrer à la feuille de styles, je vous recommande la lecture de :
• "Les marges", et "Le padding" chez CSS débutant
• "Espaces intérieurs", "Marges et espaces" chez SelfHTML

10:30 Écrit par Gee Mee dans Configuration avancée, Personnaliser son blog | Lien permanent | Commentaires (0) | Tags : css, border, margin, padding, citation, style | |  del.icio.us | | Digg! Digg |  Facebook

Les commentaires sont fermés.