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

Commentaires

Drès drès choli ! et plutôt clair.

Juste une idée sur l'art et la manière d'ajouter des sauts de lignes après certains paragraphes seulement : ne serait-il pas plus simple et judicieux d'utiliser un brave [ br /] entre deux paragraphes plutôt que de tripoter des classes de paragraphes ? Au passage, je ne suis pas sûr de comprendre la manip expliquée en fin d'article : que vient faire la règle sur le div ? Si les paragraphes "avec ligne supplémentaire" sont dotés de la classe hitperso1, la règle me semble devoir être plutôt
p.hitperso1 {margin-bottom:1em}
(sans espace entre p et .hitperso1)
Dernier détail : faute de frappe dans le premier échantillon de CSS : test-align au lieu de text-align - péché véniel ... :-)
commentaire n° : 1 posté par : brendufat (site web) le: 03/10/2007 21:01:13
merci pour la faute de frappe, je vais corriger.
Pour les espaces entre paragraphes, s'ils sont souhaités, bien sur qu'il suffit de sauter des lignes mais le but justement de la mise en page, c'est de n'avoir aucun espace supplémentaire entre les paragraphes, d'où les marges à 0
Quand à l'intérêt d'utiliser des paragraphes dans la div d'un style perso, c'est justement au cas où cette mise en page ne soit pas voulue partout, dans tous les articles (ce qui est le cas avec .contenuArticle p {} )
Imagine que tu veux que tes articles aient la mise en page standard en général et que juste, de temps en temps, tu as besoin d'avoir un texte avec une mise en page toute propre précédé de paragraphes alignés à gauche et légèrement espacés, et que tu n'as pas envie de tripatouiller la source. Tu n'appliques aucun style aux premiers paragraphes et tu appliques un style perso à ceux qui doivent avoir la mise en page propre. Et tu personnalises la ligne .hitperso1 p {}

Vu la source de la page dans ce dernier cas


pour moi c'est bien .hitperso1 p {} qu'il faut utiliser, ce que confirment les tests effectués lors de la rédactron de cet article

réponse de : bakemono (site web) le: 04/10/2007 08:55:21
bonjour,
je me permets de t'écrire pour te demander de l'aide pour un souci , un problème sur mon css, que je n'arrive pas à résoudre!
Il y a une ligne marron juste au dessus du titre article, et en bas, dans l'éspace "ajouter un commentaire", que je n'arrive pas a enlever, ou au moins changer la couleur!
Je n'arrive pas a trouver dans le css, quelle ligne lui corresponde, ou je dois regarder...
Peut-être peut-tu m'aider?
Je te remercie beaucoup ...bonne journée!
commentaire n° : 2 posté par : lory (site web) le: 19/02/2008 11:27:34
'jour
c'est la classe .afterArticle, cf. cet article sur le CSS détaillé

Configuration des articles


rajoute .afterArticle {background-color: #code_couleur; )
dans ta CSS si tu n'as pas cette classe. Si tu l'as déjà, modifie-la juste
 
réponse de : bakemono (site web) le: 22/02/2008 15:35:37
Bonjour bakemono,

J'ai testé la mise en page propre dans cette option là 

.contenuArticle p {margin:0; padding:0; text-indent:15px; text-align:justify; } 

mais çà ne fonctionne pas,  je voulais que le texte soit justifié avec un alinéa à chaque paragraphe et un espace entre les paragraphes, alors je me demandais où se trouvait mon erreur ?. 
je te mets tout ce que j'ai dans mon css concernant les articles, peut-être que j'ai crée un court circuit sans le savoir. 

Je me demande aussi si çà a un rapport avec la modif que j'ai apporté à ma ligne en voulant tout en verdana et en x-small que j'ai converti en 85 % parce que là aussi çà bug. 

Merci pour ta réponse
commentaire n° : 3 posté par : cbdesign - blogtest (site web) le: 22/02/2008 11:23:39
bonsoir
j'ai testé avec le barre webdevelopper sur ton blog, en rajoutant la ligne dans ta cSS, les paragraphes dans tes articles sont alors bien justifiés, avec un alinéa.
Mais attention, tout le contenu de tes article n'est pas constitué de paragraphes (endadrés par <p> et </p> ), il n'y a donc pas d'alinéa partout 
réponse de : bakemono (site web) le: 22/02/2008 20:42:34
Merci beaucoup pour ta réponse rapide Bakemono.
commentaire n° : 4 posté par : cbdesign - blogtest (site web) le: 23/02/2008 01:45:59
de rien
Pour la rapidité, t'es bien tombée. Des fois, je ne me connecte pas à l'admin de ce blog pendant plusieurs jours
réponse de : bakemono (site web) le: 23/02/2008 10:40:19
Une petite suggestion, pour être tout à fait complet sur le sujet : il peut être utile de rajouter

clear: both;

dans les styles de paragraphe... Indispensable si l'on insère des images dans certains paragraphes, ou dans tous, et si l'on utilise des tailles de caractères relatives (% ou em) afin de respecter un minimum quelques règles d'accessibilité.

Dans ce cas, quelle que soit la longueur du texte de chaque paragraphe, et même si l'utilisateur joue avec la taille d'affichage du texte, la mise en page est préservée (enchaînement des paragraphes).
commentaire n° : 5 posté par : Geeko (site web) le: 01/05/2008 10:43:25
pas inutile, c'est vrai que je ne pense pas toujours à préciser certains trucs que j'utilise pourtant ^ ^
réponse de : bakemono (site web) le: 10/05/2008 22:00:34
Bonjour,
Après avoir délaissé un autre blog depuis 1 an, je viens d'en ouvrir un autre. J'avoue être un peu perdue avec cette nouvelle version v2. J'ai également changé de système (Vista). J'ai des difficultés à mettre un fond couleur sous mes articles. contrairement au passé, si je fais "ctrl A" puis couleur de surlignage, voici ce que j'obtiens :
Comment faire pour obtenir TOUT le fond en couleur ?
J'y arrive au bout de maintes manoeuvres de jonglages entre "Justifier", "alignement à gauche"... etc.
Merci pour votre attention.
commentaire n° : 6 posté par : Nola (site web) le: 10/05/2008 18:44:16
Si tu veux simplement mettre un fond de couleur dans tes articles, pourquoi ne pas simplement personnaliser ton CSS?
un .contenuArticle {background-color:#code;} par exemple
Ca le fera pour tous les articles, sans avoir à refaire la manip à chaque fois avec l'éditeur
réponse de : bakemono (site web) le: 10/05/2008 22:10:46
Merci beaucoup pour ton aide.
A bientôt.
commentaire n° : 7 posté par : Nola (site web) le: 11/05/2008 11:56:40
De rien.
N'hésite pas à consulter le forum pour obtenir de l'aide, il est là pour ça ;-) .
réponse de : bakemono (site web) le: 14/05/2008 08:41:25
Salut ! Un p'ti truc me paraît étrange... En PAO (QuarkXpress, InDesign et même Word) une entrée désigne une fin de paragraphe, et MAJ+entrée désigne un retour chariot (c'est à dire que le texte garde le même style, malgré le retour à la ligne)... Bon c'est peut-être l'inverse quand il s'agit de css ?

Ton site regorge d'infos précieuses, bravo ! Moi je ne suis qu'au tout début...
commentaire n° : 8 posté par : Gérald - Couer Noir (site web) le: 06/07/2008 15:01:23
c'est une question d'éditeur sur over blog, overblog ayant changé d'éditeur, maintenant, Mj + entrée ou juste entrée font le même effet : retour chariot, ce qui se traduit par <br/> en mode html
Il y a maintenant  un bouton paragraphe dans la barre d'outils (dans un des menus déroulant )
Faudra que je fasse une mise à jour de  cet article à jour
réponse de : bakemono (site web) le: 06/07/2008 21:38:04

Trackbacks

Aucun trackback pour cet article

des trucs

Accueil

Il y a 3 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

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