AccueilRechercherS'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.

Le Deal du moment : -27%
-100€ sur la Montre connectée Samsung ...
Voir le deal
269.99 €

    Navigation rapide - Bloc flottant qui s'ouvre au survol

    sébastien
    sébastien
    MasculinAge : 38Messages : 642

    Ven 23 Nov 2012 - 17:01

    Rappel du premier message :


    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 - Page 2 Signat10
    Jabberwock Elyra
    Jabberwock Elyra
    MasculinAge : 27Messages : 44

    Lun 22 Juil 2013 - 6:33

    merci ♥
    Skyleen
    Skyleen
    FémininAge : 29Messages : 476

    Lun 5 Aoû 2013 - 13:34

    Superbe ! merci beaucoup



    2013 ▬
    Commandes en cours : 0    ▬ Commandes finis : 2
    SNMitsuki
    SNMitsuki
    FémininAge : 24Messages : 63

    Ven 30 Aoû 2013 - 1:23

    Merci !



    Navigation rapide - Bloc flottant qui s'ouvre au survol - Page 2 250032Sanstitre1
    Valhalla
    Valhalla
    MasculinAge : 30Messages : 105

    Ven 30 Aoû 2013 - 21:26

    Merci ^^
    tamanegeek
    tamanegeek
    MasculinAge : 22Messages : 167

    Lun 2 Sep 2013 - 14:10

    merci beaucoup Very Happy
    Yuuki
    Yuuki
    Age : 27Messages : 26

    Sam 14 Sep 2013 - 17:04

    Merci bien n.n..... Et dire qu'on pouvais faire ça juste avec du CSS et HTML.... (enfin c'est logique)
    Train123
    Train123
    MasculinAge : 20Messages : 40

    Sam 14 Sep 2013 - 17:40

    CC
    Dezaia
    Dezaia
    FémininAge : 27Messages : 40

    Dim 22 Sep 2013 - 16:09

    Merci



    Navigation rapide - Bloc flottant qui s'ouvre au survol - Page 2 69802510
    mathou_inu
    mathou_inu
    FémininAge : 25Messages : 55

    Sam 28 Sep 2013 - 16:42

    Merci !



    Sorako
    Sorako
    FémininAge : 24Messages : 94

    Mar 8 Oct 2013 - 19:00

    merci :)
    Jagan
    Jagan
    MasculinAge : 36Messages : 25

    Jeu 10 Oct 2013 - 9:40

    Merci pour le partage
    Doupi
    Doupi
    FémininAge : 33Messages : 63

    Jeu 10 Oct 2013 - 21:44

    Merci, c'est ce qui manque pour mieux naviguer sur mon forum.
    Lakxi
    Lakxi
    FémininAge : 28Messages : 40

    Lun 10 Fév 2014 - 11:11

    merci !
    Tchii
    Tchii
    FémininAge : 35Messages : 279

    Mar 11 Fév 2014 - 15:49

    Coucou!
    Merci pour ce ptit tuto!
    A trés vite!
    Tchii!!
    Databar
    Databar
    MasculinAge : 27Messages : 142

    Jeu 13 Fév 2014 - 17:22

    merci
    meolyne
    meolyne
    FémininAge : 37Messages : 74

    Jeu 6 Mar 2014 - 13:28

    Merci pour l'astuce Razz
    Noruenu
    Noruenu
    FémininAge : 29Messages : 123

    Lun 17 Mar 2014 - 0:24

      Merci !
    Luli-Alix
    Luli-Alix
    FémininAge : 26Messages : 25

    Mar 18 Mar 2014 - 20:36

    Merci énormément pour cette aide *^*/
    Aoi Kiseki
    Aoi Kiseki
    FémininAge : 29Messages : 105

    Ven 28 Mar 2014 - 4:08

    merciiii
    Doku
    Doku
    FémininAge : 26Messages : 70

    Ven 28 Mar 2014 - 23:54

    merci
    Petit Harfang
    Petit Harfang
    FémininAge : 21Messages : 80

    Dim 6 Avr 2014 - 11:06

    Merci !
    Patdrue
    Patdrue
    FémininAge : 31Messages : 158

    Dim 6 Avr 2014 - 11:11

    Oh Chouette! Merci beaucoup!
    Aki'
    Aki'
    FémininAge : 25Messages : 258

    Mar 15 Avr 2014 - 14:37

    Merci
    Kai Turindo
    Kai Turindo
    MasculinAge : 21Messages : 80

    Mar 15 Avr 2014 - 17:55

    Danke ! ♥
    Drysfer
    Drysfer
    MasculinAge : 31Messages : 71

    Jeu 22 Mai 2014 - 15:59

    Merci



    Navigation rapide - Bloc flottant qui s'ouvre au survol - Page 2 Gc001
    Contenu sponsorisé


      La date/heure actuelle est Dim 28 Nov 2021 - 21:23