• News


    Mardi 13 Octobre 2015 à 19:57
    Raftel

    J'y avais pas pensé. Merci ! Donc, si je résume : Pour faire ça :

    il faut faire :

    .sélecteurdumodule {position: absolute;

    background: #ffffff;

    font-family: arial;

    top: -Xpx;

    height: X+Ypx}

    .sélecteurdumodule:hover {position: absolute;

    top: 0px;}

    margin-right: Xpx; (si tu veux déplacer ton module vers la gauche)

    margin-right: -Xpx; (si tu veux déplacer ton module vers la droite)

    C'est ça ? ;)

    Mardi 13 Octobre 2015 à 20:14
    Elinae

    Nah pas du tout, j'ai fait une confusion, j'ai relu ton sujet et j'avais mal lu au début (je devais pas être réveillé à ce moment là XD)

    Donc pour faire comme maintenant (et comme à mon thème v.11), il faut pas faire comme ça x) désolé

    donc tu fais

     

    .sélécteurdumodule a

    {

    display: inline-block;

    }

    donc a pour "lien" et display: inline-block c'est pour pouvoir choisir une largeur à ton lien 

    Puis tu ajoutes la largeur, la hauteur, les marges internes (paddings) les marges externes si besoin (margin), la police, la couleur de la police..etc.

     

    On va dire que ton module fait 200px de large ok ?

     

    .sélécteurdumodule a

    {

    display: inline-block;

    width: 200px; /*--la même largeur que ton module donc--*/

    background: #COULEUR1;

    padding: Xpx 0 Xpx Ypx; /*-- rapidement, il s'agit des marges interne respective : en haut, à droite, à gauche et en bas. Pour éviter que le fond de ton lien soit collé à l'écriture, les marges internes  te permette d'éviter ce rendu : idem à gauche dans le cas où ton texte est aligné sur la gauche--*/

    margin-bottom: 1px; /*--dans le screen que tu as pris, tu vois qu'il y a une bordure blanche en dessous, en fait c'est une marge externe d'un pixel qui fait qu'on voit le fond du module qui lui est blanc : ça permet d'espacer les liens entre eux, mais tu peux très bien choisir de ne pas mettre de marge et dans ce cas, tout sera collé--*/

    color: #COULEUR2;

    font-family: arial; /*--par exemple--*/

    }

     

    Bon ça c'est pour avoir ton lien comme "Règlement" dans le screen

    Du coup pour avoir l'effet comme pour "accueil" faut changer le lien au survol, donc a:hover

    Ca nous donne donc

     

    .sélecteurdumodule a:hover

    {

    width: 200px - Zpx; /*-- Z sera donc le nombre de pixel qui fera la bordure à gauche ou à droite suivant ton choix, tu dois donc enlever cette largeur là la largeur de ton lien [sinon ça bug enfin... pas toujours mais si l'écriture de ton lien va à la ligne [donc ne rentre pas dans 200px], ça va poser problème--*/

    border-left: Zpx solid #COULEUR3;

    color: #COULEUR3;

    }

     

    Tu verras qu'avec ce code ça va marcher MAIS que le changement se fait instantanément et donc c'est moins doux et moins sympas ! Pour que le changement de l'un à l'autre se fasse, tu dois pour ça mettre une transition ! Alors perso, je ne maîtrise pas vraiment ça et je ne peux pas te l'expliquer : donc go "fantasy graph" le blog de Nagalia ou go Google et tu trouveras ton bonheur x3 (tu tapes "transition css" et ça passe)

     

    Voilà désolé j'avais mal compris ta question avant je pense (enfin mal lu surtout) il n'y a pas d'histoire de "top : -Xpx" ..etc

    Mardi 13 Octobre 2015 à 20:32
    Raftel

    Ahn, merci beaucoup ! C'est pas grave pour l'erreur. x3 Je trouve ta V13 très simple et colorée, c'est sympa. Quoi que sans mes lunettes, ça pique. Mais c'est ce qui faut. XD

    Mardi 13 Octobre 2015 à 20:34
    Elinae

    Merci x)

    et oui, les couleurs pètes les yeux, mais comme dans les articles c'est du noir et blanc (je parle du fond et de la couleur de la police quoi), c'est pas gênant, car pour lire le contenu, en principe, ça ne devrait pas piquer du tout x3

    Mardi 13 Octobre 2015 à 20:47
    Raftel

    :3. J'ai enfin réussi. :) (re re Merci x3) Mais je n'arrive pas à le déplace sur le rectangle marron sur le header. x3 (peut-être changer ".module_menu" par "module_header" ?

    Mardi 13 Octobre 2015 à 23:14
    Elinae

    Non non non, c'est toujours module_menu : ça ne change pas

    Si il s'agit du module "dernier article" il suffit d'utiliser le sélecteur

    .module_menu_type_lastarticles

    Et surtout, fait gaffe lorsque tu le déplaces, car ton module de recherche était pas au bon endroit tout à l'heure, donc si tu veux déplacer le module des derniers articles, tu fais  :

    top : Xpx;

    et 

    MARGIN-left: -Ypx; 

     

    C'est du bidouillage, certes, mais au moins tout le monde voit le truc de la même façon ^^'

    Mercredi 14 Octobre 2015 à 17:18
    Raftel

    Ok, merfiii. Je pense que je vais participer à ton concours... Mais je pense que je vais me faire écraser par des personnes qui on photoshop...

    Mercredi 14 Octobre 2015 à 17:28
    Elinae

    De rien ^^

    Haha oui et non, car si tu as lu l'explication de comment les gagnants vont être choisi, il y a 2 gagnants : celui qui gagnera avec sa création, et l'autre qui gagnera grâce à un sondage x) ! Donc pour le coup, tout le monde a ses chances !




    Vous devez être membre pour poster un message.