AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Signature avec 4 onglets latéraux

    Partagez
    Onyx
    FémininAge : 23Messages : 2596

    le Lun 11 Avr 2016 - 1:50


    Signature avec 4 onglets latéraux


    Salut !

    Cela fait un moment qu'on me demande de mettre le code de ma signature en LS et ça fait genre plus qu'un an je dis que je vais le faire (et j'oublies toujours de le faire). Donc voilà, enfin, je vous files les codes Razz

    Pour voir l'aperçu : cliquez ici.
    Pour voir l'aperçu en direct : cliquez ici.

    Effet : Au passage de la souris sur les onglets, ils s'ouvrent.

    Ce LS est en deux parties.
    • Tout d'abord, nous allons créer notre signature dans une page html.
    • Puis, nous allons mettre l'iframe qui contient la page html dans notre signature.


    - Puisqu'on se sert d'une page html, il que vous ayez votre propre forum pour héberger la page html, que votre administrateur accepte de le faire sur son propre forum ou que vous ayaz un espace d'hébergement (genre sur archivehost.com).

    Mettre un crédit vers Never-Utopia est obligatoire. Donc si vous enlevez le crédit de l'onglet "Autres", assurez-vous de le mettre ailleurs.


    Pour voir le reste, il va falloir un petit merci ^^


    Dernière édition par Onyx le Ven 24 Juin 2016 - 1:18, édité 2 fois



    Nihil Scar Winspeare
    Messages : 3934

    le Lun 13 Juin 2016 - 15:26

    Haaan, je l'adore cette signature, c'est cool de la voir (et l'avoir :3) en LS :lovebomb:
    Etant donné que c'est dans une page HTML, il faut une screen ou pas ? J'pense que oui, mais j'ai un nano doute :hum:

    Je me permets une toute petite micro remarque, pour l'ordre des préfixes, il vaut mieux mettre d'abord les préfixes et ensuite la version standard ^^
    Code:
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    Cela permet d'éviter des bugs une fois que la version standard est implémentée par le navigateur :)

    Je sais à quel point il est agaçant de revenir sur un code de LS :angry:, petite suggestion, je crois que tu peux alléger :
    Code:
    /*Chagement de couleur des onglets au survol*/
    #sign_onyx_1:hover #sign_onyx_onglet_1,
    #sign_onyx_2:hover #sign_onyx_onglet_2,
    #sign_onyx_3:hover #sign_onyx_onglet_3,
    #sign_onyx_4:hover #sign_onyx_onglet_4 {
    background: #482d52;
    }

    Pour avoir simplement :
    Code:
    /*Changement de couleur des onglets au survol*/
    .sign_onyx_bloc:hover .sign_onyx_onglet {
      background: #482d52;
    }
    Enfin bon, ça ne changera rien au résultat de toutes les façons, c'est plus un "conseil pour la prochaine fois" :hum:

    Et pour l'iframe, je crois qu'il y a un petit truc bizarre :
    Code:
    <iframe height="200" width="600px;" src="LIEN DE LA PAGE HTML" frameborder="0" seamless="seamless" style="display: block; margin: auto;"></iframe>
    Je crois que normalement c'est width="600". C'est un détail une fois encore ^____^

    Spoiler:
    L'attribut seamless me gène un peu parfois >--<, je crois qu'il a été enlevé (enfin, on ne le trouve plus ici ==> https://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#the-iframe-element)
    Ce qui me fait peur aussi c'est que c'est définit comme ça :
    Cet attribut booléen indique si le navigateur doit afficher l'élément comme s'il faisait partie du document contenant (en appliquant par exemple les règles CSS s'appliquant à l'élément < iframe > avant d'appliquer celles de ce document et en ouvrant les liens de ce contexte de navigation dans le contexte parent à moins qu'un réglage empêche cela).

    https://developer.mozilla.org/fr/docs/Web/HTML/Element/iframe#attr-seamless
    Du coup, ça veut dire que les règles CSS de la page où tu mets ton iframe seront aussi appliquées à l'iframe (enfin, c'est comme ça que je le comprends). Pour l'instant il ne fonctionne pas, mais si un jour il fonctionne, ça pourrait être embêtant (dans le cas d'une signature je me dis que ça peut parfois faire des bugs ^^').

    Faudrait que je trouve la force d'envoyer un MP à Nyo à ce sujet, je crois qu'elle en parle dans son tuto sur les pages HTML

    Merci encore d'avoir partagé ta super signature Onyx :aww:




    Merci Maféliquement <3
    Viens faire un tour sur la chatbox
    Présence fortement réduite :toto:
    Onyx
    FémininAge : 23Messages : 2596

    le Mar 14 Juin 2016 - 22:36

    Salut!

    Corrections faites.

    Pour le seamless, je suppose que c'est le moment d'avouer que j'ai aucune idée de ce quoi, que j'ai la fainéantise de souvenir de comment créer une page html par coeur et que je fais toujours du copier/coller du tuto de Nyo :ange:

    J'ai ajouté un screen, mais je ne trouve pas ça très logique pour les codes où il y a quelque chose qui bouge, ce n'est pas représentatif (il faudrait faire un gif et très peu pour moi, u_u)



    Nihil Scar Winspeare
    Messages : 3934

    le Jeu 23 Juin 2016 - 23:49

    Oui, je me doutais un peu que c'était un copier / coller :ange:, vive la flemme *w*

    Je viens de tester et j'ai eu un petit soucis avec une signature "trop haute" :
    La signature utilisée : http://www.zupimages.net/up/16/25/96mr.png (que j'ai piquée sur la galerie de L0une huhu <3)

    Il manque l'overflow sur la div qui s'affiche "de base" ^^
    Screen normale : http://i.imgur.com/eHPV8ZJ.png
    Screen quand je survole "Signature" : http://i.imgur.com/olQJEek.png

    Et second petit doute, je ne sais pas si j'ai la bonne police pour la signature pour le titre "Nom" : http://i.imgur.com/ebcEuIq.png
    Il y a écrit "Monotype Corsiva", comme je suis pas sur Windows c'est peut-être pour ça que je ne l'ai pas :hum: (enfin bon, ça c'est du détail à la rigueur, c'est juste pour prévenir)

    Ca serait cool qu'un autre Architecte passe par ici pour double-tester au cas où, mais chez moi ça marche bien en tout cas (à part les mini détails au dessus) *w*
    Comme ça, un modérateur ou un responsable pourra déplacer le sujet, histoire que tout le monde puisse profiter de cette super signa :aww:

    EDIT : j'ai précisé en zone staff que je pensais (je suppose T_T) que le topic peut être classé <3


    Dernière édition par Nihil Scar Winspeare le Sam 16 Juil 2016 - 11:27, édité 1 fois




    Merci Maféliquement <3
    Viens faire un tour sur la chatbox
    Présence fortement réduite :toto:
    Onyx
    FémininAge : 23Messages : 2596

    le Ven 24 Juin 2016 - 1:18

    Mouais, monotype corsiva est une de mes polices préférée, je la met partout... Bon, j'ai rajouté un "cursive", si ça ne plaît pas aux gens ils le changeront ^^

    En fait, j'étais partie du principe que lesgens feraient attention de ne pas mettre une trop grosse sign dans cette partie pour éviter d'avoir besoin d'un overflow, mais bon, c'est vrai que beaucoup s'en fichent u_u

    Allez, c'est édité ^^



    Neva
    FémininAge : 25Messages : 18542

    le Sam 16 Juil 2016 - 18:13

    Nihil ayant donné sa validation, je déplace. Merci Onyx :)



     
    Kelalin
    FémininAge : 24Messages : 1403

    le Dim 17 Juil 2016 - 23:41

    Merci pour le partage !
    Nyroc
    MasculinAge : 14Messages : 51

    le Lun 18 Juil 2016 - 0:46

    Merci ^^



    Chesham
    FémininAge : 17Messages : 44

    le Lun 18 Juil 2016 - 19:10

    Magnifique, merci **
    SoraruP
    FémininAge : 18Messages : 137

    le Jeu 21 Juil 2016 - 13:53

    Thks ! 8D



    Wasabii
    FémininAge : 16Messages : 16

    le Jeu 21 Juil 2016 - 18:16

    Merci, elle est superbe !



    Eryu
    FémininAge : 24Messages : 35

    le Mer 27 Juil 2016 - 18:44

    J'adore les effets des onglets *Q*
    Merci pour ce code !
    Rozenbrez
    FémininAge : 25Messages : 1175

    le Jeu 28 Juil 2016 - 21:00

    OMG !!! Tu l'as mis en LS. JE T'AIME. :lovebomb: :lovebomb: :lovebomb: Merci, merci, merci, merci, merci. :chomp: :chomp:



    Kinst.MP
    FémininAge : 17Messages : 50

    le Sam 6 Aoû 2016 - 16:44

    Merci *^*
    Alaynna
    FémininAge : 24Messages : 61

    le Dim 7 Aoû 2016 - 15:26

    Merci, j'aime beaucoup ^-^



    -- If we don't have the key we can't open we can't open whatever it is, we don't have, that it unlocks, so what purpose would be served in finding whatever need be unlocked, which we don't have, without first having found the key that unlocks it?
    -- So we're going after this key?
    -- You're not making any sense at all.
    Litonya
    FémininAge : 17Messages : 123

    le Sam 13 Aoû 2016 - 1:43

    Merci beaucoup !
    Shanyme Thibolt
    FémininAge : 22Messages : 136

    le Sam 13 Aoû 2016 - 14:18

    Merci pour le codage
    Christtinne
    FémininAge : 30Messages : 137

    le Ven 19 Aoû 2016 - 2:32

    Merci! :3
    Sparryx
    MasculinAge : 14Messages : 68

    le Mer 24 Aoû 2016 - 13:49

    Merci
    Nilaya
    FémininAge : 21Messages : 3

    le Jeu 25 Aoû 2016 - 14:09

    Merci pour le codage ♥
    ldavidl
    MasculinAge : 26Messages : 30

    le Lun 29 Aoû 2016 - 15:59

    Merci beaucoup, c'est hyper sympa!
    S.Baka
    FémininAge : 22Messages : 9

    le Lun 29 Aoû 2016 - 18:26

    Merci pour le partage ! ^^
    lisounette7
    FémininAge : 22Messages : 54

    le Mer 31 Aoû 2016 - 15:03

    Merci énormément c'est super :3
    Stoli
    FémininAge : 17Messages : 12

    le Jeu 1 Sep 2016 - 16:55

    merci c'est super jolie, bravo !!
    Ariemm
    FémininAge : 15Messages : 87

    le Ven 2 Sep 2016 - 10:48

    Merci beaucoup!
    Contenu sponsorisé

    Aujourd'hui à 13:30


      La date/heure actuelle est Lun 5 Déc 2016 - 13:30