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.


    Navigation rapide - Bloc flottant qui s'ouvre au survol

    Partagez
    avatar
    sébastien
    MasculinAge : 34Messages : 634

    le 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
    http://www.never-utopia.com/t41098-code-css
    Réaliser par
    Shinomix



    © Never-Utopia



    avatar
    Jabberwock Elyra
    MasculinAge : 23Messages : 44

    le Lun 22 Juil 2013 - 6:33

    merci ♥
    avatar
    Skyleen
    FémininAge : 25Messages : 476

    le Lun 5 Aoû 2013 - 13:34

    Superbe ! merci beaucoup



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

    le Ven 30 Aoû 2013 - 1:23

    Merci !



    avatar
    Valhalla
    MasculinAge : 26Messages : 105

    le Ven 30 Aoû 2013 - 21:26

    Merci ^^
    avatar
    tamanegeek
    MasculinAge : 18Messages : 167

    le Lun 2 Sep 2013 - 14:10

    merci beaucoup Very Happy
    avatar
    Yuuki
    Age : 23Messages : 26

    le 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)
    avatar
    Train123
    MasculinAge : 16Messages : 40

    le Sam 14 Sep 2013 - 17:40

    CC
    avatar
    Dezaia
    FémininAge : 23Messages : 40

    le Dim 22 Sep 2013 - 16:09

    Merci



    avatar
    mathou_inu
    FémininAge : 21Messages : 55

    le Sam 28 Sep 2013 - 16:42

    Merci !



    avatar
    Sorako
    FémininAge : 19Messages : 94

    le Mar 8 Oct 2013 - 19:00

    merci :)
    avatar
    Jagan
    MasculinAge : 32Messages : 25

    le Jeu 10 Oct 2013 - 9:40

    Merci pour le partage
    avatar
    Doupi
    FémininAge : 29Messages : 52

    le Jeu 10 Oct 2013 - 21:44

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

    le Lun 10 Fév 2014 - 11:11

    merci !
    avatar
    Tchii
    FémininAge : 31Messages : 227

    le Mar 11 Fév 2014 - 15:49

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

    le Jeu 13 Fév 2014 - 17:22

    merci
    avatar
    meolyne
    FémininAge : 33Messages : 70

    le Jeu 6 Mar 2014 - 13:28

    Merci pour l'astuce Razz
    avatar
    Noruenu
    FémininAge : 24Messages : 120

    le Lun 17 Mar 2014 - 0:24

      Merci !
    avatar
    Luli-Alix
    FémininAge : 21Messages : 21

    le Mar 18 Mar 2014 - 20:36

    Merci énormément pour cette aide *^*/
    avatar
    Aoi Kiseki
    FémininAge : 25Messages : 100

    le Ven 28 Mar 2014 - 4:08

    merciiii
    avatar
    Doku
    FémininAge : 22Messages : 63

    le Ven 28 Mar 2014 - 23:54

    merci
    avatar
    Petit Harfang
    FémininAge : 16Messages : 79

    le Dim 6 Avr 2014 - 11:06

    Merci !
    avatar
    Patdrue
    FémininAge : 27Messages : 156

    le Dim 6 Avr 2014 - 11:11

    Oh Chouette! Merci beaucoup!
    avatar
    Aki'
    FémininAge : 21Messages : 255

    le Mar 15 Avr 2014 - 14:37

    Merci
    avatar
    Kai Turindo
    MasculinAge : 17Messages : 80

    le Mar 15 Avr 2014 - 17:55

    Danke ! ♥
    avatar
    Drysfer
    MasculinAge : 27Messages : 71

    le Jeu 22 Mai 2014 - 15:59

    Merci



    Contenu sponsorisé


      La date/heure actuelle est Jeu 19 Oct 2017 - 18:34