communauté : Aide

C'est possible. En utilisant tout simplement des paragraphes. ( Touche Entrée pour aller à la ligne, touches Maj + Entrée pour changer de paragraphe )
Mais pourquoi faire me direz-vous? Et bien, cette idée d'article a vu le jour après une discussion avec Djac qui n'était pas satisfait de la mise en page de ses texte sur son blog,  voici d'ailleurs son article à lire pour mieux comprendre la raison d'être de cet article-ci: Typographie et mise en page

Voici l'allure qu'a un texte sans autre mise en page et sans modification du CSS:


Paragraphes moches

Un texte non justifié, pas d'alinéa en début de paragraphe et un espace entre chaque paragraphe.

Pour remédier à cela, il suffit de modifier cette ligne dans son CSS : .contenuArticle p {} (la rajouter si elle n'est pas présente )
La modifier en
.contenuArticle p {margin:0; padding:0; text-indent:15px; text-align:justify; }


par exemple pour obtenir un texte justifié, présentant un alinéa ( voir cet article ) à chaque début de paragraphe et pas d'espace entre les paragraphes

Voici l'allure qu'à ce texte sans autre mise en page et avec modification du CSS:

Paragraphes mis en page

On obtient bien le résultat souhaité.
Maintenant, imaginons que l'on ne souhaite pas appliquer cette mise en page à tous les paragraphes contenus dans les articles, mais uniquement à certains.
Dans ce cas, au lieu d'utiliser la première méthode, il suffit de combiner un style applicable via l'éditeur de texte (en passant par les fonctions avancées ) , comme par exemple le style perso1, et l'utilisation de paragraphes.
Une fois les paragraphes créés, sélectionner avec la souris tout le texte à mettre en page et lui appliquer le style perso 1.
Ensuite, rajouter ces ligne dans le CSS global

.hitperso1 p {font-style:normal;text-align:justify; text-indent:15px; margin:0; padding:0;}
div {margin:0; padding:0;}

Et voilà.
Si vous souhaitez avoir une marge intérieure dans vos articles (ce qui est tout de même plus agréable à l'oeil ), il sufit d'utiliser ceci:

.contenuArticle {padding: 5px 10px 5px 10px;}
par exemple (dans l'ordre, padding-top, padding-right, padding-bottom et padding-left ).
Ou plus simplement
.contenuArticle {padding: 5px 10px ;}
par exemple si lesmarges intérieures sont identiques en bas et en haut, et identiques à gauche et à droite
Remarque : la mise en forme dans l'éditeur de texte n'est pas la même que celle qui sera visible sur le blog, sauf si vous avez coché la case appliquer la feuille de style à l'éditeur dans les options globales.

 

 
publié dans : trucs et astuces pour son blog
ajouter un commentaire commentaires (8)   
Voir tous les articles

des trucs

Accueil

Il y a 2 curieux sur ce blog

Me contacter




Les flux RSS

Remarque


Les captures d'écran sur ce blog sont réalisées sous Firefox2/Ubuntu, le rendu peut différer avec un autre système d'exploitation et un autre navigateur.


Un peu de musique?

Rechercher

création de blog sur over-blog.com - Contact - C.G.U. - Rémunération en droits d'auteur avec TF1 Network - Signaler un abus