• Soulignements

    qu'est-ce que c'est ?

    Ci-dessous les differentes formes de soulignements de liens ou de textes.

    Ligne continue
    Ligne double
    Ligne avec pointilés
    Ligne avec tirets

     

    comment faire ?

    Pour une fois, c'est pas très compliqué. On va juste travailler dans le HTML de votre article. En premier vous allez créer un nouvel article. Alors, pour souligner normalement, inutile de vous expliquer comment on fait, l'interface d'Eklablog nous propose gentillement le bouton U qui permet donc de souligner une ligne, un lien, un mot. Ce qui nous interesse ce sera comment souligner en double, en pointillés et en tirets.

    Tout d'abord tapez un texte à souligner dans votre cadre blanc, comme vous en avez l'habitude. Tapez n'importe quoi, on s'en fout, c'est juste pour tester. Une fois fait, cliquez sur le petit bouton HTML de l'interface. Là vous devriez avoir votre texte avec <p> au début et </p> à la fin, nous allons travailler a l'interieur, n'y faites pas attention.

    Pour souligner un mot en double, vous devrez rajouter juste devant de ce mot

    <span style="border-bottom: 3px #000000 double;">

    Et tout de suite après ce même mot vous rajoutez

    </span>

    Et normalement si vous fermez votre fenetre d'édition HTML vous devriez voir le mot en question souligné en double.

    Je vous explique un peu le principe.
    border-bottom correspond au bord inférieur de votre mot, vous pouvez changer bottom par top si vous souhaitez mettre le soulignement au-dessus du mot ou encore right (Bord droit) ou left (Bord gauche).
    3px correspond à la hauteur de votre ligne en pixels, pour un soulignement double c'est minimum 3 sinon il ne se verra pas. Pour les autres sortes de soulignement, 1px suffit largement.

    Enfin, double que vous pouvez remplacer par
    dotted (pointillés)
    dashed (tirets)

    Il est également possible de donner une couleur différente de celle de votre texte à votre soulignement, pour ce fait il faut rajouter le code héxadécimal de la couleur choisie à la place du #000000. Si à l'inverse vous souhaitez que votre soulignement soit de la même couleur que votre texte, vous devrez retirer ce #000000, sans quoi votre code ne fonctionnera pas.

    Merci d'avoir suivit ce tutoriel, si vous avez des questions ou des problèmes ce serait un plaisir pour moi de vous répondre par commentaire.


  • Commentaires

    11
    Dimanche 15 Juillet 2012 à 12:12

    C'était aussi simple que ça? xD Merci Mikuru ♥

    10
    Lundi 24 Octobre 2011 à 14:08

    Ah je vois u_u merci quand même :p

    9
    Lundi 24 Octobre 2011 à 14:07
    Ça dépend, parce que même avec du CSS, tu devras créer une class et tu seras obligée de passer par le HTML pour appliquer la class au mot ou à la phrase que tu souhaites.
    8
    Lundi 24 Octobre 2011 à 14:03

    J'ai encore une question ;O

    Est ce que c'est possible de pouvoir rajouté une option CSS ou autre. Par exemple dans les article au lieu de rajouté a chaque fois un code HTML que quand on souligne cela mette directement le soulignement que l'on souhaite :O

    7
    Dimanche 23 Octobre 2011 à 14:15

    Merci beaucoup Mikuru,cela marche parfaitement chez moi!

    6
    Samedi 15 Octobre 2011 à 17:51
    C'est ça. ^^
    5
    Samedi 15 Octobre 2011 à 17:44

    Merci ^^ Dans hover, c'est pour tous ce qui est survolé c'est ca ?

    4
    Samedi 15 Octobre 2011 à 17:33

    Oui c'est parfaitement possible, voila le code à utilisé dans ton cas précis :

    a
    :hover {
        border-bottom: 1px #FFFFFF dashed;}

    Pour que ca s'applique aux liens non survolés, il faut retirer :hover, ce qui donne :

    a  {
        border-bottom: 1px #FFFFFF dashed;}

    Toutes les valeurs qui sont colorées sont modifiables, comme d'habitude. :)

    3
    Samedi 15 Octobre 2011 à 17:27

    J'ai trouvé comment mettre les tirets sous les liens en CSS mais j'aimerai que se soient les liens survolés qui en ait .
    C'est possible ?

    2
    hinoru Profil de hinoru
    Vendredi 2 Septembre 2011 à 20:48

    Un très grand Merci !!!

    1
    Vendredi 2 Septembre 2011 à 20:02

    Merci beaucoup ! <3



    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :