an ideas explorer Messages : 152 Inscription : 18/07/2015 Région : Bordeaux
| Sujet: [Tutoriel n°1] Justification automatique (messages) Jeu 23 Juil - 9:13 | |
| Tutoriel n°1 --- Justification automatique (messages) --- ■ ■ ■
Ce code consiste en la justification automatique du texte d'un message. Il est utile pour les forums car la justification organise le texte et le rend plus agréable à la lecture, très pratique lorsque les textes sont assez longs.
1. Suivre ce chemin : Panneau d'administration > Affichage > Couleurs.
2. Cliquer sur l'ongle Feuille de style CSS.
3. Ajouter le code suivant :
- Code:
-
.postbody { display: block; text-align:justify; } La propriété text-align permet de travailler sur l'alignement du texte. Par défaut, elle vaut left (à gauche). Ici on la fixe à justify afin de justifier le texte; mais nous aurions pu le centrer (center) ou le placer à droite (right) également. Le display:block qui accompagne la justification oblige la class .postbody à agir sur tout le bloc. Il vaut mieux ne pas l'enlever.
4. Le problème est que cela donne un texte qui est collé des deux côtés à la marge. Pour remédier à ce problème, il suffit de modifier le padding (la marge intérieure).
- Code:
-
padding: 00px; ou - Code:
-
padding-left: 00px; padding-right: 00px; 5. Remplacer les 0 par le nombre de pixels souhaité qui correspond à la taille de l'espace entre le texte et la marge.
6. Placer votre personnalisation dans la feuille de codes :
- Code:
-
.postbody { display: block; padding-left: 00px; padding-right: 00px; text-align:justify; } Voici un autre code similaire : - Code:
-
.postbody { display: block; text-align: justify; padding: 00px; } 7. Valider la feuille de style CSS et aller voir le résultat !
Rappels : - Le chemin est : Panneau d'administration ► Affichage ► Images & Couleurs ► Couleurs ► Feuille de style CSS - Il est possible de choisir une taille différente de la marge selon le côté grâce à -top, -right, -bottom, -left. - Penser à valider la feuille de CSS !
Remarque : Il sera toujours possible de mettre les textes en alignement droit, gauche, etc ... Ce code ne fait que justifier les textes par défaut.
Si vous avez des questions, je suis à votre disposition !
|
|