Decoration underline
Eritou
Messages postés
120
Statut
Membre
-
Eritou Messages postés 120 Statut Membre -
Eritou Messages postés 120 Statut Membre -
Bonsoir,
Comment changer une décoration underline, sa couleur (la endre différente de celle du texte) et rendre le souligné justifié sur une colonne (ne pas se limiter au texte) ?
Merci et bonne soirée,
E.
Comment changer une décoration underline, sa couleur (la endre différente de celle du texte) et rendre le souligné justifié sur une colonne (ne pas se limiter au texte) ?
Merci et bonne soirée,
E.
1 réponse
-
Bonsoir,
si vous parlez du cadre la propriété border est une notation raccourcie des propriétés border-style, border-width, border-color qui correspondent respectivement à style de a bordure(souligné, pointillé, doublé etc...).
http://www.w3schools.com/css/css_border.asp
Pour le texte c'est la propriété text-decoration qui n'a évidemment rien à voir avec la justification du texte.
Que le texte soit souligné ou pas c'est autre chose.
text-align: qui prendra les valeurs droite, gauche, centrées...
Si vous voulez des colonnes le plus simple est de créer d'abord les colonnes et d'y mettre votre texte, donc rien à voir non plus avec la justification puisque 3 colonnes par exemple serais simplement trois balises de textes alignées horizontalement que l'on va remplir à la suite.
Par exemple:
https://jsbin.com/diqumapone/edit?html,output
(ou en copié collé direct ici)<!DOCTYPE html> <html> <head> <!-- évidemment il est mieux d'utiliser une feuille de style externe liée--> <style rel=stylesheet> p.troiscolonnes{ margin:0; padding:0;/* margin et padding sont mis à zéro, c'est la taille de la marge extérieure et intérieure qui ne l'est pas par défaut*/ float:left; width:32%; border:1px dotted red;/*la bordure ne sert qu'à mieux voir les contours*/ text-align:justify; } </style> </head> <body> <p class=troiscolonnes>Une première colonne de texte ... Une première colonne de texte </p> <p class=troiscolonnes>Deuxième colonne blablabla blablabla Deuxième colonne Deuxième colonne Deuxième colonne </p> <p class=troiscolonnes>une troisième colonne de texte lorem ipsum ... tagada une troisième colonne de texteune troisième colonne de texteune troisième colonne de texte</p> </body> </html>
Comme c'est pas beau et pas très lisible(surtout si on enlève la bordure de pointillé rouge) on peut remettre des marges internes/externes mais la largeur(width) devra en être modifiée en conséquence.
p.troiscolonnes{ margin:3%; padding:0; float:left; /*il y a 3% de chaque côté de chacune des balises p donc 6% par balise= 18% occupée par la marge*/ width:26%;/*Les 32% précédents de largeur de chaque balise on lui enlève les 6% de marge 32-6=26 car si le total dépasse 100% le troisième bloc ne sera pas sur la même ligne*/ border:1px dotted red;/*la bordure ne sert qu'à mieux voir les contours*/ text-align:justify; }-
Ou bien une autre technique d'alignement de texte qui va utiliser les marges internes:
p.troiscolonnes{ margin:0; padding:0.45em;/* les marges internes sont de 0.45em(quadratin typographique, s'il vaut 1 ça correspond à la hauteur de la ligne de texte-interligne- Pour 0.45 c'est 45% de l'interligne*/ float:left; width:31%; border-right:2px ridge #002;/*la bordure n'est plus un repère pour la construction mais intégré au design en tant que barre pour séparer les colonnes, dans l'idéal on la supprimerais pour le dernier des 3 blocs, ce que je n'ai pas fait ici*/ text-align:left; } -
-
