AccueilDernières imagesRechercherS'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.

-50%
Le deal à ne pas rater :
-50% sur les sacs à dos pour ordinateur portable Urban Factory ...
19.99 € 39.99 €
Voir le deal

    Navigation rapide - Bloc flottant qui s'ouvre au survol

    sébastien
    sébastien
    MasculinAge : 41Messages : 642

    Ven 23 Nov 2012 - 17:01


    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






    Navigation rapide


    Difficulté
    Facile,il ne reste qu'à personnaliser
    Outils
    Aucun
    Résultat
    Avoir une navigation rapide pratique et discrète
    correction du CSS
    Sparrow-style
    Crédit
    © Never-Utopia


    code HTML et CSS



    Le code HTML est à mettre dans les annonces.
    PA=>général=>messages et emails =>annonces

    Pour les paramètres de l'annonce, vous choisissez :
    > Activer les annonces : Oui
    > Affichage des annonces : Toutes les pages
    > Défilement : Désactiver

    Puis vous mettez créez une annonce et y mettez ce code :
    Code:
    <div class="widget_flottant">
    <span class="widget_flottant3">
    <a href="http://l-anneau-des-dragons.1fr1.net/" class="postlink"><span style="font-size: 18px; line-height: normal; text-decoration: underline; font-weight: bold;">Index</span></a></br></br>
    <u>Info</u></br>
    <a href="lien" class="postlink"><strong>Règlement</strong></a></br>
    <a href="lien" class="postlink"><strong>Backgroud</strong></a></br>
    <a href="lien" class="postlink"><strong>Races jouables</strong></a></br>
    <a href="lien" class="postlink"><strong>Compétences</strong></a></br>
    <a href="lien" class="postlink"><strong>Modèle de fiche</strong></a></br>
    <a href="lien" class="postlink"><strong>Cadre de topic</strong></a></br></br>
    <u>HRP</u></br>
    <a href="lien" class="postlink"><strong>Administration</strong></a></br>
    <a href="lien" class="postlink"><strong>Taverne</strong></a></br>
    <a href="lien" class="postlink"><strong>Archive</strong></a></br></br>
    <u>RP</u></br>
    <a href="lien" class="postlink"><strong>RP-1</strong></a></br>
    <a href="lien" class="postlink"><strong>RP-2</strong></a></br>
    <a href="lien" class="postlink"><strong>RP-3</strong></a></br>
    <a href="lien" class="postlink"><strong>RP-5</strong></a></br>
    <a href="lien" class="postlink"><strong>RP-6</strong></a></span>
    <span class="widget_flottant2"><img src="http://i44.servimg.com/u/f44/15/54/03/92/anneau10.gif" border="0" alt="" />
    </span>
    </div>


    Vous allez ensuite dans la feuille de CSS pour mettre le CSS :
    Code:
    .widget_flottant
    {
      z-index: 999;
      position:fixed;
      top: 50px;
      right: 0px;
      width: 0px;
      height: 100px;
      transition: 1s;
      -webkit-transition: 1s;
      color: #dfdfdf;
      font-size: 12px;
      font-family: 'verdana';
    }
    .widget_flottant:hover
    {
      width: 150px;
      height: 361px;
      transition: 1s;
      -webkit-transition: 1s;
    }
    .widget_flottant3
    {
      display:block;
      text-align: center;
      margin: 0px;
      height: 361px;
      overflow: hidden;
      background: #7F7F7F;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
      border: 2px #000000 solid;
    }
    .widget_flottant2
    {
      position: relative;
      float:left;
      display:block;
      margin: 0px;
      overflow: hidden;
      width: 33px;
      height: 175px;
      left: -33px;
      top: -320px;
      background-image: url(http://img15.hostingpics.net/pics/621948navrap.png);
      background-repeat: no-repeat;
    }
    .widget_flottant a {
      color: #c4c4c4!important;
    }
    .widget_flottant a:hover {
      color: #ffffff!important;
    }


    Personnalisation


    Pour personnaliser ce code, je vous suggère d'aller lire ce sujet, il m'a aidé à construire le CSS de ce code. Il devrait pouvoir vous aider à le personnaliser.

    Nom du sujet
    .code { CSS: ???; }
    Lien
    https://www.never-utopia.com/t41098-code-css
    Réaliser par
    Shinomix



    © Never-Utopia



    Navigation rapide - Bloc flottant qui s'ouvre au survol Signat10
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Ven 23 Nov 2012 - 17:06

    Merci de ce partage Very Happy. Ma correction était minime, mais merci de l'avoir citée^^
    J'ai été surpris que tu mettes le code dans les annonces, mais pourquoi pas x) Je tiens juste à préciser qu'il est aussi possible de le mettre ailleurs, tout dépend de l'endroit où vous souhaitez le placer.
    Si vous mettez ce code en haut de page, mettrez le ligne 214, juste après :

    Code:
       <!-- END hitskin_preview -->



    sign
    sébastien
    sébastien
    MasculinAge : 41Messages : 642

    Ven 23 Nov 2012 - 17:20

    Merci pour l'info supplémentaire Very Happy

    j'ai mit mon code dans les annonce car j’utilise les annonces dans le cadre de mon Background, et comme j'y connais rien en Templates... c'est le moyen le plus simple et le plus rapide pour avoir la navigation rapide sur toute les page. Wink



    Navigation rapide - Bloc flottant qui s'ouvre au survol Signat10
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Ven 23 Nov 2012 - 17:41

    Exact^^ Disons que pour ceux qui n'auraient pas activé les annonces ou ne voudraient pas s'en servir, le mettre dans le template haut de page est une alternative x).



    sign
    LeFimoteur
    LeFimoteur
    MasculinAge : 24Messages : 18

    Ven 23 Nov 2012 - 21:30

    Merci (=
    K'Aya
    K'Aya
    FémininAge : 25Messages : 427

    Ven 23 Nov 2012 - 22:00

    Merci, çà me sera utile. ^^
    Nevah
    Nevah
    MasculinAge : 36Messages : 30

    Lun 10 Déc 2012 - 4:47

    Merci bien Wink
    Moriarty
    Moriarty
    FémininAge : 28Messages : 85

    Lun 10 Déc 2012 - 16:34

    Merci ♥
    Teseu
    Teseu
    MasculinAge : 29Messages : 54

    Sam 5 Jan 2013 - 5:49

    Merci =D
    Graph
    Graph"X"
    MasculinAge : 38Messages : 268

    Ven 18 Jan 2013 - 16:17

    merci



    Navigation rapide - Bloc flottant qui s'ouvre au survol 906554signaturegraphXAnonymous
    Navigation rapide - Bloc flottant qui s'ouvre au survol 3150065406_1_2_RyY9oMWP
    Navigation rapide - Bloc flottant qui s'ouvre au survol 3150229838_1_2_05FjnHrV
    Mon forum Reptile:

    Slown
    Slown
    FémininAge : 29Messages : 62

    Sam 2 Fév 2013 - 17:51

    Merci :)
    Apaer Kisoku
    Apaer Kisoku
    MasculinAge : 26Messages : 6

    Dim 3 Fév 2013 - 21:25

    Merci ça me servira beaucoup .



    Navigation rapide - Bloc flottant qui s'ouvre au survol 11376526771
    Lindaóma
    Lindaóma
    FémininAge : 26Messages : 150

    Mer 27 Fév 2013 - 16:25

    Merci pour le partage, je pense que ça me servira ^^.



    Navigation rapide - Bloc flottant qui s'ouvre au survol Signa_10
    Petite-Lune
    Petite-Lune
    FémininAge : 24Messages : 16

    Jeu 14 Mar 2013 - 20:09

    Merci !
    ♕ William
    ♕ William
    MasculinAge : 26Messages : 72

    Ven 22 Mar 2013 - 20:03

    Merci ahah



    Navigation rapide - Bloc flottant qui s'ouvre au survol Right_10
    William
    Solitude
    Solitude
    FémininAge : 48Messages : 294

    Mer 27 Mar 2013 - 20:33

    Merci



    ~ Je suis capable du meilleur comme du pire, mais dans le pire c'est moi la meilleure. ~
    Navigation rapide - Bloc flottant qui s'ouvre au survol Sign510
    Arcanata
    Arcanata
    MasculinAge : 29Messages : 18

    Lun 1 Avr 2013 - 16:17

    Merci :)
    Reeta
    Reeta
    FémininAge : 29Messages : 34

    Jeu 4 Avr 2013 - 14:59

    Merci !
    HeartLessB
    HeartLessB
    FémininAge : 25Messages : 78

    Mar 23 Avr 2013 - 20:23

    Ça m'interesse
    servity
    servity
    MasculinAge : 52Messages : 82

    Lun 29 Avr 2013 - 12:21

    encore un super tutoriel,merci du partage



    Navigation rapide - Bloc flottant qui s'ouvre au survol HadqjCkktw
    Alzufen
    Alzufen
    MasculinAge : 28Messages : 2103

    Mer 8 Mai 2013 - 2:17

    Mersims =D



    Diboan
    Diboan
    MasculinAge : 31Messages : 7

    Jeu 20 Juin 2013 - 0:40

    Merci Wink
    Azuriel
    Azuriel
    FémininAge : 29Messages : 130

    Dim 14 Juil 2013 - 7:14

    Je vais tenter ^^
    Skyfall
    Skyfall
    FémininAge : 22Messages : 23

    Ven 19 Juil 2013 - 12:04

    Merci bien ! Je cherchais comment faire justement.



    Navigation rapide - Bloc flottant qui s'ouvre au survol 743371Sanstitre2
    Ab0utxMe
    Ab0utxMe
    FémininAge : 29Messages : 186

    Sam 20 Juil 2013 - 18:06

    Merci ! Ca va me servir ça !



    Navigation rapide - Bloc flottant qui s'ouvre au survol 878302signaturevegeta
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 13:34