• Résolu Question :)


    Vendredi 11 Septembre 2015 à 17:47
    Claire ~

    Ton blog est magnifique ! Bravo ! ♥♥

    Alors, ma question est le code pour faire ça :

    Et quand tu survole tu sais ça écris un mot avec un lien !

    Merci si tu réponds, et si tu réponds pas ben je vais te tuer donc réponds merci.

    Hum ...

    Vendredi 11 Septembre 2015 à 18:34
    Elinae

    Alors pour ce code j'ai créé une division dans le code HTML de l'article

    donc

    <div class="nomdeladivision"></div>

     

    Dans cette division, j'ai ajouté un fond, en faisant comme ça :

    <div class="nomdeladivision" style="background: url('liendel'image');"></div>

     

    Evidemment, j'ai aussi mis une hauteur et une largeur à ma division donc, ça donne ça :

    <div class="nomdeladivision" style="width: Xpx; height: Ypx; background: url('liendel'image');"></div>

     

    Bon jusque là, rien de très intéressant, enfin ce n'est pas exactement ce que tu veux, mais j'y viens.

    J'ai ensuite mis un lien dans ma division qui a son joli fond, donc admettons qu'on parle du tout premier truc qu'on voit dans mon portfolio c'est à dire "designs"

    Ca donne donc :

     

    <div class="nomdeladivision" style="width: Xpx; height: Ypx; background: url('liendel'image');"><a href="liendelarubrique">DESIGN</a></div>

     

    Ca, c'est la partie HTML, ensuite viens le css !

    Avec le css je vais donner une propriété au lien de ma division afin que celui-ci fasse la même hauteur et largeur que ma division. J'ajoute aussi un fond noir transparent avec le rgba (red green blue alpha) rgba(0,0,0,1) ça fait noir opaque, rgba(255,255,255,1) ça fait blanc opaque

    Donc ça donne : 

     

    .nomdeladivision a {display: block;

    width: Xpx;

    height: Ypx;

    font-size: Wpt;

    color: #couleur;

    background: rgba(0,0,0,0.5);}

     

    Bref tu choisi tout ce que tu veux pour ton lien, si tu veux qu'il soit en capslock sa taille, sa couleur..etc.


    MAIS pour avoir l'effet voulu, ton lien doit être invisible quand tu ne le survole pas, donc tu fais ça :

    .nomdeladivision a {display: block;

    width: Xpx;

    height: Ypx;

    font-size: Wpt;

    color: #couleur;

    background: rgba(0,0,0,0.5);

    opacity: 0;}

     

    Et enfin, pour que le lien apparaisse comme voulu lors du survol, tu ajoutes cette propriété :

    .nomdeladivision a:hover {opacity: 1;}

     

    Bon j'explique pas forcément bien, et vu que je te montre étape par étape, je me répète plein de fois et ça t'embrouille peut être, mais si tu n'as pas compris, j'essaierai de faire ça mieux et en couleur x) (ça aidera)

    Vendredi 11 Septembre 2015 à 19:14
    Claire ~

    Je vais essayer ce code, j'ai à peu près compris, seulement le css ça ce mets bien dans "Apparence - modifier le thème - et ajouter du css" ? et le html dans la page si j'ai bien compris ? Merci beaucoup ! :)

    Vendredi 11 Septembre 2015 à 20:40
    Elinae

    Oui c'est bien ça ^^ 

    Dans tout les cas si le code ne fonctionne pas, tu peux toujours me demander et je réexpliquerai

    Mercredi 16 Septembre 2015 à 12:54
    Claire ~

    Merci ! J'ai réussi et j'ai à peut près compris le truc ! :)

    Mercredi 16 Septembre 2015 à 12:59
    Elinae

    Tant mieux alors ^^

    Vendredi 18 Septembre 2015 à 17:43
    Claire ~

    Salut ! Juste une petit question pour ce code. Je voudrais mettre l'image au centre et le texte aussi ! :) Y'a t-il un code stp ? ;)

    Vendredi 18 Septembre 2015 à 18:26
    Elinae

    l'image tu choisis sa position dans le code html

    Tu sais, quand tu as ça : 

    <div class="nomdeladivision" style="width: Xpx; height: Ypx; background: url('liendel'image');">

    bah tu ajoutes 50% 50% après la parenthèse où il y a le lien de l'image, et ça centre sa position (ça donnerait ça :

    <div class="nomdeladivision" style="width: Xpx; height: Ypx; background: url('liendel'image') 50% 50%;">

    Pour l'écriture, c'est juste "text-align: center;", ça centera le texte horizontalement, par contre sur la hauteur, faudra que tu bidouilles, tu peux choisir de mettre une marge interne haute pour que le texte soit centré, ou alors avec la hauteur de la ligne, ça peut marcher aussi : c'est à toi de voir ce que tu préfères faire :

    padding-top: Xpx;

     line-height: X%;

     en bidouillant les valeurs de X.

    Mercredi 23 Septembre 2015 à 18:31
    Minokoto

    Coucou j'ai pas compris le truc css du " nomdeladivision" tu peux m'expliquer stp ^^

    Mercredi 23 Septembre 2015 à 20:01
    Elinae

    Tu as lu ma toute première réponse (donc tout en haut ?)

    Si non, vas la lire pour commencer x)

    Si oui, nomdeladivision c'est le nom que tu vas donner à ta division voilà tout XD

    une division ça ressemble à ça <div></div> (ici je l'ai ouverte avec <div> et je l'ai fermée avec </div>), mais si tu veux pouvoir la modifier grâce au css, il faut lui donner un nom. Pour ça tu rajoutes :

    class="" à l'intérieur de la balise ouvrante (donc à l'intérieur de <div>)

    Ce qui donne 

    <div class=""></div>

    Mais là, elle n'a toujours pas de nom, il faut donc mettre le nom de la division à l'intérieur des guillemets, ça peut être ce que tu veux, "abcd" ou "test" ou "division" ou "bonjour" ou même "azerty" x) 

     

    Pour la partie css donc :

    << .nomdeladivision a {display: block;

    width: Xpx;

    height: Ypx;

    font-size: Wpt;

    color: #couleur;

    background: rgba(0,0,0,0.5);} ><

     

    C'est pas très compliqué

    width : largeur 

    height: hauteur

    font-size : taille de la police

    color : couleur de la police

    background : le fond

     

    J'ai donc mis Xpx, Ypx et Wpt, pour montrer que les valeurs X, Y et W sont différentes (a priori)

    On voit que le sélecteur sélectionne les liens, donc pour "background" il s'agit du fond des liens

    Je met donc une couleur de fond grâce au rgb (Red Green Blue), je choisi un fond noir donc c'est 0 partout (pour du blanc ça serait du 255 partout, pour du vert ça serait 0,255,0, là j'utilise du rgba donc avec le "a" à la fin, ça correspond à "alpha", donc ça va faire varier l'opacité entre 0 et 1 , je choisi 0.5 pour que mon opacité soit réduite de moitié (on aura donc un fond noir à moitié transparent)

     

    J'ajoute ensuite la propriété "opacity: 0" tu me diras "oui mais tu as déjà bouger l'opacity avec rgba" : oui sauf que pour le rgba il s'agissait là du fond des liens, là je veux donner l'impression que les liens ne sont pas là du tout, donc je les rend invisible (ou plutôt totalement transparent) avec la propriété opacity

    En ajouté le "opacity:1;" lors du survol, ça donnera le même aspect que dans ma page de bienvenue




    Vous devez être membre pour poster un message.