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.


    Astuce pour ôter le saut de page avec l'utilisation du target

    Partagez
    avatar
    Angelusia
    FémininAge : 32Messages : 1159

    le Lun 10 Juin 2013 - 19:53


    Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
    Lien pour comprendre pourquoi le contenu n'est pas sous hide


    On utilise souvent le target pour les ancres ou pour les onglets.

    Cependant, il arrive souvent que lorsqu'on clique sur l'onglet, il s'affiche quelque chose de détestable, désagréable et de parfaitement agaçant : un saut de page plus ou moins important.

    Il existe une solution pour lui couper les vivres. :)

    Une astuce pour être précise. Je l'ai utilisé => sur cette fiche . C'était pour une commande = ne pas s'en inspirer merci :).

    Vous remarquerez que le saut de page n'existe plus lorsqu'on passe de la carte d'identité aux liens.



    En premier, débutez avec votre html.

    Vous mettez :
    Code:
    <div id="conteneur_information">

      <a id="votre_onglet01" class="ancre"></a>
      <a id="votre_onglet02" class="ancre"></a>
      <a href="#votre_onglet01" class="votreclassonglet" >Nom Onglet 1</a>
      <a href="#votre_onglet02" class="votreclassonglet">Nom Onglet 2</a>

    Vous rajoutez autant de cette partie que vous avez d'onglet en changeant leur numéro :
    Code:
      <a id="votre_onglet02" class="ancre"></a>
      <a href="#votre_onglet02" class="votreclassonglet" >Nom Onglet 1</a>



    Ensuite, à la suite du code précédent, vous préparez la div qui accueillera les contenus des onglets comme ceci :
    Code:
      <div class="votre_class_contenu">

    Pour les contenu d'onglets, la manipulation n'est pas dure. Il faut surtout surtout faire attention que l'id ne porte pas le nom de l'id onglet. Si vous le faite, cela ne marchera pas. ^^

    Bref, voilà :
    Code:
        <div id="votre_onglet1">Contenu onglet 1</div>

        <div id="votre_onglet2">Contenu onglet 2</div>

    Une fois que c'est fait, vous ajoutez 2 fermeture de div pour fermer le bloc du contenu des onglets et le bloc qui contient tout :
    Code:
      </div>
    </div>


    Le html est terminé. Cela devrait donner quelque chose comme ceci :
    Code:
    <div id="conteneur_information">

      <a id="votre_onglet01" class="ancre"></a>
      <a id="votre_onglet02" class="ancre"></a>
      <a href="#votre_onglet01" class="votreclassonglet" >Nom Onglet 1</a>
      <a href="#votre_onglet02" class="votreclassonglet">Nom Onglet 2</a>

      <div class="votre_class_contenu">
        <div id="votre_onglet1">Contenu onglet 1</div>
        <div id="votre_onglet2">Contenu onglet 2</div>
      </div>

    </div>


    Il reste le css :) :
    Code:
    /*Fait disparaître les ancres*/
    #conteneur_information a.ancre {display: none;}

    /*Styliser les onglets*/
    .votreclassonglet {
    }

    /*Bloc qui contient les contenus d'onglets*/
    .votre_classe_contenu {
    }

    /*Contenu onglet 1*/
    #votre_onglet1 {
    }

    /*Contenu onglet 2*/
    #votre_onglet2 {
    }

    /*Cache les contenus d'onglets*/
    #votre_onglet1 {display: none;}
    #votre_onglet2 {display: none;}

    /*Fait apparaître les contenus d'onglet*/
    #conteneur_information a#votre_onglet01:target ~ .votre_class_contenu #votre_onglet1{display: block;}
    #conteneur_information a#votre_onglet02:target ~  .votre_class_contenu #votre_onglet2{display: block;}


    Si vous avez des questions, je serais ravie de vous répondre :)
    avatar
    Asio
    FémininAge : 22Messages : 30

    le Mar 20 Aoû 2013 - 16:31

    Peut-être la solution à mon problème! *o*



    avatar
    Kokoa
    FémininAge : 18Messages : 57

    le Mer 25 Fév 2015 - 4:53

    Merci ^^




    « Tous cet espace pour moi ? Fallait pas ! »
    avatar
    Nat
    FémininAge : 22Messages : 42

    le Mer 25 Fév 2015 - 10:12

    Marchi pour cette astuce ! (et très belle fiche au passage ^^)
    avatar
    Aya Hanazawa
    FémininAge : 26Messages : 72

    le Sam 5 Mar 2016 - 17:12

    merci
    avatar
    Kelalin
    FémininAge : 24Messages : 1516

    le Sam 5 Mar 2016 - 18:04

    Merci pour le partage !
    avatar
    Sarah W.
    FémininAge : 18Messages : 35

    le Sam 5 Mar 2016 - 18:31

    Un énorme merci pour cette astuce! J'avais cessé d'espérer pouvoir avoir une telle solution :3
    Encore merci ♥
    avatar
    Asarigolo
    MasculinAge : 24Messages : 29

    le Mer 13 Juil 2016 - 5:28

    Merci ♥
    avatar
    Onyx
    FémininAge : 23Messages : 2936

    le Mer 5 Avr 2017 - 22:28

    Salut!

    Ce LS a été corrigé, il devrait maintenant fonctionner ^^



    Contenu sponsorisé


      La date/heure actuelle est Mar 25 Juil 2017 - 22:39