• Les bordures

    Voici la propriété permettant de mettre une bordure autour d'un élément de type "block" (vous ne pouvez pas mettre de bordure à un élément inline, donc au texte).

    sélecteur {
              border: Xpx style #color;
    }

    Remplacez le X par un nombre de pixel, il correspond à l'épaisseur de votre bordure.
    Remplacez "style" par un style de bordure :
    dotted => En pointillé
    dashed => Tiret
    solid => trait plein
    double => deux traits (visible à partire de 3px) none => aucune
    ridge => en saillie
    groove => en creux
    inset => 3D avec ombre interne
    outset => 3D avec ombre externe


    Si vous voulez modifier les quatre bordures séparément, changez la propriété:

    sélecteur {
              border-top: Xpx style #color;
    }

    Ici vous ne modifiez que la bordure du haut.

    border-top => Bordure du haut
    border-bottom => Bordure du bas
    border-right => Bordure de droite
    border-left => Bordure de gauche


  • Commentaires

    1
    Dimanche 4 Septembre 2011 à 10:55

    Merciiiiii ! Tu expiques super bien ! Et je te poses une dernière question ... (ou pas xD), c'esy possible de changer la couleur de la polices ? :3

    2
    Dimanche 4 Septembre 2011 à 10:57

    Oui oui ^^

    sélecteur {color: #COULEUR}

    Je vais faire un article pour les propriétés des textes de toute façon =)

    3
    Dimanche 4 Septembre 2011 à 10:58

    Merci :)

    4
    Dimanche 4 Septembre 2011 à 10:59

    Tu m'aides super beaucoup c'est trop bien ! Merci infiniment du partage °0° !

    5
    Dimanche 4 Septembre 2011 à 11:03

    De rien

    Il faut bien qu'il y en ai qui partagent un peu leurs codes

    6
    Dimanche 4 Septembre 2011 à 11:06

    Oui °0° ! Moi j'ai trouvé un code (Merciiii Kraft !!) pour changer le curseur de son blog, que tu fais sur photoshop :)

    Si tu ne le connais pas, je le testerais d'abord et je te le donnerais x)

    7
    Dimanche 4 Septembre 2011 à 11:33

    que met-on a la place de "selecteur" puisque se n'est pas une image, ni un lien, ni un texte?

    8
    Dimanche 4 Septembre 2011 à 11:36

    Tu peux mettre des bordures autours des images si tu veux.

    Sinon, tu peux en mettre autour de la banière, des articles... Mais sur ekla, ça sert pas à grand chose parce qu'on peut déjà les modifier sans connaitre le css.

    9
    Lundi 5 Septembre 2011 à 20:25

    Stp, visiblement "mon code CSS comporte une erreur" tu pourrait me dire laquelle?

    sélecteur {border15px double #color;

     A l'aiiiide!!! xD (le CSS c'est un peu trop space pour moi!!)

    10
    Lundi 5 Septembre 2011 à 20:43

    Ah oui je voit l'erreur ! Il faut que tu changes "sélecteur" par là où tu vourais changer :)

    Tu voudrais le mettre ou ? ^^

    11
    Lundi 5 Septembre 2011 à 21:19

    Et il faut aussi que tu remplace #color par la couleur que tu veux. Soit tu met la couleur en anglais et tu écris par exemple

    sélecteur {border15px double white;}

     Ou bien tu utilise les couleur hexa et tu met

    sélecteur {border15px double #ffffff;}

    Dans les deux cas, tu aurra une bordur blanche. Après, comme l'a dit Nanou, il faut que tu remplace "sélecteur" par l'endroit ou tu veux mettre une bordure. Regarde dans ces articles:

    Selecteurs Généraux
    Selecteurs Eklablog

    12
    Mardi 6 Septembre 2011 à 18:24

    Aaah, d'accord, ok Nanou!!

    Pasque, en fait, Nagalia, je m'en doytais qu'il fallait changer color, alors je l'ai fait, mais vu que j'avais pas changer sélécteur, ça marchait pas ^^

    haeuum... plutôt... vers.. je peux le mettre ou ça?

    13
    Mardi 6 Septembre 2011 à 18:25

    Ben ou tu veux ^^

    14
    Mardi 6 Septembre 2011 à 18:36

    Euuh, pardon, je voulait dire: comment je signale au CSS ou je veux mêttre ma bordure?  (je veux les mettre au menu 1, 2 et au contenu)

    15
    Mardi 6 Septembre 2011 à 18:42

    Tu remplace "sélécteur" par ".module_contenu" pour que ça marche dans les article.

    Après, regarde ici pour trouver le bon sélecteur:

    => http://fanstasy-graph.eklablog.net/selecteur-eklablog-a5092805

    16
    Mardi 6 Septembre 2011 à 18:53

    T'es génial Nagia!! (je vais commander "le CSS pour les nul, a Noël x)

    Okey, don, si j'ai bien tout pigé, je n'utilise que  le début de tes code (dans le lien que tu m'a filé) et je les met a la suite de ".module_contenu"? Et propriété valeur, je les remplace par quoi? genreuh, 5x 2x et je sais plus quoi (je sais, c'est confus!)

    17
    Mardi 6 Septembre 2011 à 20:10

    Je réexplique:

    Sélecteur = L'élément auquel tu applique un effet (le texte, les modules, le header...)

    Propriété = l'effet à appliquer (bordure, ombre, marges...)

    Valeur = le style de l'effet. Si ta propriété est pour la couleur, tu met le nom de la couleur en valeur. Si la propriété est une bordure, tu met la ta bordure en valeur.

    Je te donne un exemple avec une bordure autour des articles:

    .module_contenu { border: 4px double white;}

    Autour de tes article, tu aura une double bordure blanche de 4px d'épaisseur

    Si tu comprend toujour pas, lis cet article, j'ai mieux expliqué ^^

    => http://fanstasy-graph.eklablog.net/introduction-a4961842

    18
    Vendredi 9 Septembre 2011 à 18:06

    Okeyy, merci!!

    Je pense que ça va, j'ai a peu près compris ^^

    19
    Samedi 10 Septembre 2011 à 12:17

    De rien =)

    20
    Samedi 7 Janvier 2012 à 18:06

    sélecteur {border: 10px dotted red;}


    Il doit avoir une erreur mais...

    Sur blog de test ça marche pas =S *et oui, i'm baka*

    21
    Samedi 7 Janvier 2012 à 22:14

    Si tu remplaçait "sélecteur" par le nom de l'élément auquel tu veux appliquer l'effet?

    Par exemple pour le menu de gauche sur ekla:

    #menu1  {border: 10px dotted red;}

    La liste des sélecteur est ici

    22
    Mercredi 15 Février 2012 à 15:54

    Bonjour Nagalia

    En regardant ton blog et en lisant tes tutos, je pense que je vais me remettre au tricot, c'est bien plus facile et je me sentirai moins nulle !

    Petite contribution (sans mérite cependant) pour les types de bordures :

    none : aucune :)
    ridge : en saillie
    groove : en creux
    inset : 3D avec ombre interne
    outset : 3D avec ombre...externe

    A bientôt

    23
    Mercredi 15 Février 2012 à 18:22

    Merci, je les avait oublié ^^

    24
    Mardi 24 Juillet 2012 à 17:11

    Ok, mais pour que le fond de la bordeur soit une image, que faut-il faire ?

    25
    Mardi 24 Juillet 2012 à 19:40

    Je viens de voir qu'on pouvait faire ça aussi ^^' (comme quoi, on en apprend toujours ;) ) Je vais crueuser un peu ça, et j'éditerai l'article après ;)

    26
    Mardi 24 Juillet 2012 à 19:46

    Euh, j'ai cherché mais j'ai pas trouvé, comment on fait incliner/ bouger les images des derniers visiteurs (comme toi) ?

    28
    Mercredi 25 Juillet 2012 à 14:09

    Salut! J'aimerais mettre des bordures bmanches sur les commentaires (Mes commentaires, ceux de l'admin.) donc j'ai mit les bordures (Pas besoin de CCS, vu qu'on peux le faire: Thème>Contenu>Commentaires admins>Bordures) sauf qu'il n'y a pas la bordures droite, pourtant j'ai bien mit : Droite 2px Continu #ffffff

    eEst-ce que tu pourrais m'aider ? :/ :

    http://data0.eklablog.com/encoreunblogtest/mod_article48059441_500fe2aec3786.png?31

    29
    Mercredi 25 Juillet 2012 à 18:21

    Tu n'aurais pas mis quelque chose qui désactive les bordures des commentaires dans ton css?

    30
    Mercredi 25 Juillet 2012 à 19:29

    Hmm, non, pas que je sache.

    Edit: C'est bon j'ai réussi :) Dans "Commentaires", il fallait mettre 90%, merci^^

    31
    Dimanche 21 Octobre 2012 à 00:09

    Bonsoir, je cherche depuis des heures comment faire une ombre comme sur ton beau blog autour de toute la page, des menus, des billets, bref de tout.
    J'essaie, mais rien ne fonctionne et il me semble que je mets les bons termes.
    J'adore ton blog, tu expliques très bien, sauf que moi la débutante, je n'arrive pas à avoir un joli contour comme le tien en turquoise plus pâle.  Chez moi ce ne serait pas turquoise, mais une autre couleur, même blanc pourrait aller.

    Si tu l'as expliqué ailleurs, tu peux me mettre le lien et j'irai voir.

    Merci d'avance pour tes explications.

    32
    Dimanche 21 Octobre 2012 à 20:42
    33
    Dimanche 21 Octobre 2012 à 20:49

    Merci je vais voir immédiatement

    34
    Mercredi 31 Octobre 2012 à 10:21

    Merci pour le tuto , très pratique ^^       

    35
    Dimanche 25 Novembre 2012 à 19:04

    Et moi j'ai un ptit problème, c'est que quand je fais le code, ça marche, mais le problème c'est que ça n'entoure que le haut du module.

    Est ce que c'est parce que mon module est un contenu hors des articles ?

    Si vous voulez voir c'est là : mangaapassion.eklablog.com

    36
    Diora°
    Dimanche 2 Décembre 2012 à 19:57

    meerci c genial !! 

    • Nom / Pseudo :

      E-mail (facultatif) :

      Site Web (facultatif) :

      Commentaire :


    37
    lily bella
    Vendredi 28 Décembre 2012 à 13:41

    eh comment on fait pour  personnaliser les commentaire dans la barre en haut c'est toujours bleu j'arrive pas a le changer

    38
    Vendredi 3 Mai 2013 à 17:59

    Voila mon petit gros problème , je voudrais mettre des bordures à mon header , qui lui dépassant 400 ko j'ai mis le code #header { ..... ect et maintenant quand je mets le code pour la bordure elle ne va pas ou je veux ....

                                             Help me , help me !!! 

    39
    Samedi 26 Octobre 2013 à 10:08

    Coucou! J'ai reussi a metre les bordures dans la barre eklablog en haut, mais j'aimerai aussi le mettre dans les marges une qui a droite et l'autre a gauche, je ne sais pas comment faire, merci! ^-^ Sinon j'adore ton blog et tes conseils mercii!!! 

    40
    Samedi 30 Novembre 2013 à 19:24

    Je suis désolée de poser cette question, mais... c'est quoi exactement, une bordure ?

    41
    Dimanche 1er Décembre 2013 à 15:37

    C'est les bords que tu met dans la barre d'eklablog ou dans les cotés:

     http://uploads.siteduzero.com/files/343001_344000/343545.png

    42
    Dimanche 1er Décembre 2013 à 18:52

    Merci ^^

    43
    Lundi 2 Décembre 2013 à 17:23

    De rien ^-^

    44
    Mercredi 4 Décembre 2013 à 16:31

    Dis, Nagalia, quel sélecteur as-tu utilisé pour mettre une bordure autour de l'article mais en incluant le titre et les commentaires ? (je ne sais pas si ma question était très claire mais bon...)

    45
    Mercredi 4 Décembre 2013 à 16:35

    .ulmodules { border: valeur; }

    46
    Mercredi 4 Décembre 2013 à 16:41

    Génial ! Merci beaucoup :) C'est super sympa de nous faire partager tout ça

    47
    Pipellete
    Samedi 25 Janvier 2014 à 18:47

    Ese que on peut mettre un ombrage QUE sur 1 texte en particulier

    ( le titre de l'en tête ) .

    48
    Samedi 25 Janvier 2014 à 21:34

    Il suffit de préciser à quel texte tu veux appliquer une ombre ;) Dans le cas du titre, le sélecteur est #titre_header a :

    #titre_header a { text-shadow: valeur;
    }

    49
    Mardi 4 Mars 2014 à 22:09

     moi j'aimerais que tu vois comme toi mon module contenu soi arrondis vers le bout sait tu comment faire 

    50
    Mardi 4 Mars 2014 à 22:10

    sans les couleur merci d'avance 

    51
    Mardi 4 Mars 2014 à 22:23

    Le tuto se trouve ici

    => http://fanstasy-graph.eklablog.net/coins-arrondis-a5446494

    Le sélecteur si tu as un seul menu est #menu1 et si tu as les deux #menu1, #menu2

    52
    Vendredi 7 Mars 2014 à 10:37

    Bonjour, J'ai un problème avec les bordures de ma boite.

    Je souhaite en mettre seulement une sur le côté droit, alors j'ai utilisé "Border-left" ect.

    Mais elle ne s'affiche pas.(Mais le reste s'affiche, "Border-radius" ect !) Voici mon code :

     

    .boite{ width: 50%;
        border-top: 0px black;
        border-bottom: 0px black;
        border-right:10px  black;
        border-left: 0px black;
               border: 50px 0px 0px 0px black;
               padding: 5px 5px 5px 5px;
               margin: 5px 5px 5px 15px;
               border-radius: 20px 20px 20px 20px;
               color: black;
               background-color: grey;}

     

    Merci en avance Nag' :)

     

    53
    Vendredi 7 Mars 2014 à 18:38

    Il faut que tu précise le type de bordure (solid, dotted...)

    border-right : 10px type black;

    54
    Dimanche 20 Avril 2014 à 18:57

    Ça veut pas!

    55
    Lundi 21 Avril 2014 à 16:03

    Hm... J'ai besoin d'un petit peu plus d'informations pour pouvoir t'aider ;)

    56
    Lundi 21 Avril 2014 à 16:48

    voila mon code


     {module_contenu
              border: 10px style #color;
    }

    57
    Lundi 21 Avril 2014 à 17:04

    Un code CSS est toujours sous cette forme:

    sélecteur { propriété : valeur;}

    Ici, ton sélecteur est module_contenu. Il s'agit d'une classe, il faut donc l'écrire avec un point:

    .module_contenu { border : valeur;}

    La propriété border est l'écriture simplifié de border-size, border-style et border-color. Il faut donc renseigner ces trois valeurs :

    .module_contenu { border : Xpx style color;}

    La taille est bien un nombre en px (donc 10px est correct)
    Le style est le type de bordure : trait simple (solid), pointillé (dotted), double (double)... Les différents style possible se trouve dans l'article
    Enfin pour la couleur, il y a trois façon de l'indiquer en CSS : les couleurs nommées, couleur hexadécimal et couleur rgb
    => http://fanstasy-graph.eklablog.net/couleur-a28204421

    58
    Lundi 21 Avril 2014 à 17:29
    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :