• Texte sur un fond

    qu'est-ce que c'est ?

    Pour faire simple, là je suis en train d'écrire sur un fond coloré.

     

    comment faire ?

    Pour commencer vous créez un article, vous écrivez votre texte et vous cliquez sur le bouton HTML de l'interface.
    Là vous voyez un <p> au début et un </p> à la fin de votre texte. remplacez le premier <p> par ce code là

    <p style="background-color: #couleur du fond qui apparaît blanc dans l'exemple;
    text-align: center; width: taille de la largeur du fond coloré en px; padding: 5px;">

    Fermez, enregistrez. Et normalement vous devriez avoir le resultat de l'exemple.
    Si vous souhaitez que votre texte soit aligné à droite vous remplacez center par right et si vous
    le voulez à gauche par left.

    La couleur du fond peut également être remplacée par une image, pour cela il faut remplacer

    background-color: #couleur du fond qui apparaît blanc dans l'exemple;

    par ça

    background-image: url(urldevotreimage)

     

    un peu plus d'approfondissement

    Pour arrondir les bords du fond

    <p style="background-color: #ffffff; padding: 5px; text-align: left; border-radius: 30px 30px 30px
    30px;">Pour faire simple, là je suis en train d'écrire sur un fond coloré.</p>

    30px : Bord supérieur gauche
    30px : Bord supérieur droit
    30px : Bord inférieur droit
    30px : Bord inférieur gauche

    Ce tutoriel n'est pas très explicatif comparé aux autres donc je comprendrai si quelque chose n'est pas très clair, il suffit juste de le demander par commentaire.


    Tags Tags : , , , ,
  • Commentaires

    23
    Dimanche 5 Avril 2015 à 22:56

    Merci beaucoup ! ^^ Je te le prends

    22
    Samedi 14 Février 2015 à 14:51

    Clique sur le bouton HTML (à côté du plein écran) ;)

    21
    Samedi 14 Février 2015 à 14:36

    Oui mais comment?

    20
    Samedi 14 Février 2015 à 14:33

    Ca marche aussi :3

    19
    Samedi 14 Février 2015 à 14:29

    Dans ton article, tu change le fond dans un article mais est-il possible de le faire dans les liens des menus?

    18
    Mercredi 14 Janvier 2015 à 16:40

    Merci :D

    Est-ce que tu pourrais expliquer comment on fait pour mettre des bordures ?

    17
    Lundi 7 Juillet 2014 à 13:21

    D'accord :3 Merci beaucoup !

    16
    Lundi 7 Juillet 2014 à 12:26

    Alors, je vais parler pour Iconmunity étant donné que je suis la mieux placée pour savoir comment le menu est constitué (haha). Le meilleur moyen pour ce genre de menu est effectivement de créer une (même des, dans mon cas) classe, puisque l'on va la réutiliser sans cesse. Inutile donc d'alourdir l'HTML !

    CSS :

    .liste {
        width: 200px; /*Largeur du menu*/
        border-left: 2px solid orange; /*Bord de 2px sur la gauche*/
        padding-left: 2px; /*Marge intérieure de 2px à gauche*/
        border-bottom: 1px solid #b1c4fc; /*Bord de 1px en bas*/
        background-color: #c2d0fb; /*Couleur du fond*/
        text-transform: lowercase; /*À remplacer par 'uppercase' pour l'inverse, sinon, retirer*/
        letter-spacing: -0.5px;
        font-family: Georgia;
        font-size: 12px;
        transition: all 0.6s ease;
        -moz-transition: all 0.6s ease;
        -webkit-transition: all 0.6s ease;
    }
    .liste a { color: #507cfd; /*Couleur du texte*/ }
    .liste a:hover { color: orange; /*Couleur du texte au survol*/ }
    .liste:hover {
        background-color: transparent; /*Couleur du fond au survol*/
        border-left: 10px solid orange; /*Bord de 5px sur la gauche au survol*/
    }


    HTML :

    <div class="liste" style="margin-top: 4px;"><a href="/bleach-c17268128">Bleach</a></div>
    <div class="liste"><a href="/blue-exorcist-c17268134">Blue Exorcist</a></div>
    <div class="liste"><a href="/code-geass-c17272842">Code Geass</a></div>
    <div class="liste"><a href="/durarara-c17272844">Durarara!!</a></div>
    <div class="liste"><a href="/hunter-x-hunter-c17272880">Hunter X Hunter</a></div>
    <div class="liste"><a href="/kaichou-wa-maid-sama-c17272846">Kaichou wa Maid-sama!</a></div>
    <div class="liste"><a href="/kissxsis-c17272850">KissXSis</a></div>
    <div class="liste"><a href="/kuroshitsuji-c17272854">Kuroshitsuji</a></div>
    <div class="liste"><a href="/naruto-shippuden-c17272860">Naruto Shippuden</a></div>
    <div class="liste"><a href="/noragami-c17272862">Noragami</a></div>
    <div class="liste"><a href="http://iconmunity.lo.gs/one-piece-c17295920">One Piece</a></div>
    <div class="liste"><a href="/panty-stocking-with-garterbelt-c17272864">Panty &amp; Stocking with Garterbelt</a></div>
    <div class="liste"><a href="/toradora-c17272866">Toradora</a></div>
    <div class="liste"><a href="/touhou-c17272870">Touhou</a></div>
    <div class="liste"><a href="/uta-pri-c17272878">UtaPri</a></div>

    Quant au menu de Nagalia, le principe est le même, mais contrairement à mes éléments, les siens peuvent s'aligner. Je modifierais donc le CSS de cette façon-là (après, libre à toi de modifier les couleurs et tout et tout bien sûr !) :

    CSS :

    .liste {
        width: 400px; /*Largeur totale du menu*/
    }
    .liste a {
        background-color: #bbbbbb; /*Couleur du fond*/
        color: #ffffff; /*Couleur du texte*/
        display: block;
        text-align: center;
        font-size: 11px;
        box-shadow: 0 0 2px #aaaaaa; /*Ombre sous les éléments*/
        float: left;
        margin: 0 0 5px 10px;
        padding: 0 0 0 0; /*Marges intérieures : haut, droite, bas, gauche*/
        width: 40%; /*Largeur que doit réprésenter un élément du menu sur la largeur totale*/
        transition: all 0.6s ease;
        -moz-transition: all 0.6s ease;
        -webkit-transition: all 0.6s ease;
    }
    .liste a:hover {    
        background-color: #aaaaaa; /*Couleur du fond au survol*/
        color: #000000; /*Couleur du texte au survol*/
     }

    15
    Lundi 7 Juillet 2014 à 11:25

    Coucou, j'aimerais bien savoir comment tu changes la couleur au survol, je sais que c'est avec du CSS mais doit-on créer une classe ou autre ? Je pense a un menu dans le style d'Iconmunity, ou encore le monde imaginaire de Nagalia :)

    14
    Mardi 8 Avril 2014 à 19:03

    Les codes partagés sur portfolio.ek.la ne sont pas uniquement destinés à être utilisés sur Eklablog, il n'est donc pas si dépourvu 'd'intérêt' que ça quand on y réfléchit !

    13
    Mardi 8 Avril 2014 à 13:03

    Je pense que ce code a devenu sans intérêt grâce aux nouveaux changements sur EB...maintenant on peut changer la couleur du fond sans avoir besoin d'un code CCS. :')

    12
    Mardi 24 Janvier 2012 à 18:08

    Le principe est semblable mais le code est différent car j'ai eu recours au CSS pour modeliser le menu d'Iconmmunity. Si tu souhaites le code du menu, envoie moi un MP je te l'enverrais sans problème. ^^

    11
    Furiae Profil de Furiae
    Lundi 23 Janvier 2012 à 23:45

    Bonsoir, Mikuru ^^ dis-moi, est-ce bien avec ce code-là que tu as pu faire les liens du menu IconCommunauty ? Avec la couleur changeante survolés et le léger trait entre chaque lien... à moins que ce soit écrit dans une image (j'ai vu un code comme ça, il me semble) ?

    10
    Furiae Profil de Furiae
    Vendredi 20 Janvier 2012 à 22:01

    J'ai commencé à utiliser ces codes ^^ ça devrait vraiment m'aider à faire quelque chose d'original ! Merci encore et bon week-end !

    9
    Furiae Profil de Furiae
    Jeudi 19 Janvier 2012 à 08:12

    C'est simple mais ça habille tout de suite ^^

    8
    Lundi 24 Octobre 2011 à 13:54

    Merci beaucoup :) <3!

    7
    Lundi 24 Octobre 2011 à 13:52

    C'est rajouté. :)

    6
    Lundi 24 Octobre 2011 à 10:44

    J'ai juste une question, est ce que tu pourrais rajouté dans ton tutoriel comment on fait pour arrondir les bords du fond , s'il te plait :)

    5
    Jeudi 20 Octobre 2011 à 18:56

    Merciiii beaucoup ****O***

    tu es vraiment la pro du codage ^w^

    4
    Jeudi 20 Octobre 2011 à 18:53

    Il faut sauter une ligne en appuyant sur entrée je pense. :O
    Et si ça ne marche pas, tu ouvres ton HTML et tu met un <br /> à la fin, ça devrait sauter une ligne et stoper la repetition du fond.

    3
    Jeudi 20 Octobre 2011 à 18:47

    Merci il m'aide pour mon blog en cour ^-^

    Mais j'ai une question: Comment on fait pour arrêter car quand j'écris ça me remais à la ligne et le fond réaparaît alor que  Je ne le  veux que quand j'en ai envie :/

    Sinon ton blog est EXTRA! =333

    2
    Samedi 10 Septembre 2011 à 15:56

    Thank ! Je t'adore merci ! =D

    1
    Hody
    Samedi 3 Septembre 2011 à 20:49

    Au contraire ! Je le trouve simple, court et clair !
    Encore merci Akelie >3< 



    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :