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.

Le Deal du moment :
Google Pixel 7 5G – Smartphone 6,3″ OLED ...
Voir le deal
316 €

    Navigation rapide - Bloc flottant qui s'ouvre au survol

    sébastien
    sébastien
    MasculinAge : 41Messages : 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 4 Signat10
    pinote20e4
    pinote20e4
    FémininAge : 31Messages : 66

    Sam 13 Juin 2015 - 4:49

    Merci beaucoup! C'est super aidant!
    picka234
    picka234
    FémininAge : 59Messages : 636

    Ven 19 Juin 2015 - 19:59

    merci
    Kirito
    Kirito
    MasculinAge : 28Messages : 209

    Mar 30 Juin 2015 - 21:46

    Merci
    Allèle
    Allèle
    FémininAge : 31Messages : 56

    Mer 1 Juil 2015 - 11:38

    Merci
    Neymar
    Neymar
    MasculinAge : 25Messages : 139

    Jeu 13 Aoû 2015 - 19:00

    Intéressant ? :/
    Anonymous
    Invité

    Jeu 13 Aoû 2015 - 21:24

    Merci ! (☆^O^☆)
    NanoiHime
    NanoiHime
    FémininAge : 25Messages : 566

    Dim 16 Aoû 2015 - 14:33

    merci



    Nillium
    Nillium
    FémininAge : 24Messages : 16

    Dim 22 Nov 2015 - 16:01

    Merci pour le code ^^
    Elocha
    Elocha
    FémininAge : 73Messages : 255

    Dim 22 Nov 2015 - 17:56

    merci :)



    eLoChA.
    WhiteRaaven
    WhiteRaaven
    FémininAge : 27Messages : 39

    Mer 25 Nov 2015 - 12:09

    Merci ^^
    Fantôma
    Fantôma
    MasculinAge : 22Messages : 67

    Dim 20 Déc 2015 - 19:52

    thanks



    Navigation rapide - Bloc flottant qui s'ouvre au survol - Page 4 1438369110-fantoma
    DeadlyRuby
    DeadlyRuby
    FémininAge : 24Messages : 40

    Jeu 24 Déc 2015 - 13:52

    Merci. ^^



    Navigation rapide - Bloc flottant qui s'ouvre au survol - Page 4 15122001123111422113841857
    Melaly
    Melaly
    FémininAge : 29Messages : 91

    Sam 26 Déc 2015 - 19:04

    Merci du partage :)
    Je ne code pas encore, mais je sais comprendre déjà tous les codes et les modifier. M'enfin c'est déjà beaucoup pour moi !
    Shoki
    Shoki
    FémininAge : 22Messages : 1308

    Mer 6 Jan 2016 - 20:06

    Merci ! :)




    Navigation rapide - Bloc flottant qui s'ouvre au survol - Page 4 5qox
    MeowLowDee
    MeowLowDee
    FémininAge : 32Messages : 72

    Ven 29 Jan 2016 - 12:47

    Thanks
    Arisu
    Arisu
    FémininAge : 35Messages : 119

    Ven 26 Fév 2016 - 6:28

    Merci !
    Shizuyae
    Shizuyae
    FémininAge : 25Messages : 57

    Sam 27 Fév 2016 - 17:11

    merci
    Unleash
    Unleash
    MasculinAge : 24Messages : 85

    Jeu 24 Mar 2016 - 11:48

    ty
    Carmina
    Carmina
    FémininAge : 37Messages : 506

    Lun 28 Mar 2016 - 19:35

    merci!
    rosebleudu10
    rosebleudu10
    FémininAge : 34Messages : 189

    Mar 26 Avr 2016 - 15:28

    merci pour ce partage
    Faïryna
    Faïryna
    FémininAge : 21Messages : 87

    Dim 8 Mai 2016 - 17:02

    Merci!
    M.O
    M.O
    MasculinAge : 34Messages : 51

    Mar 24 Mai 2016 - 3:39

    Merci!
    Flavien1309
    Flavien1309
    MasculinAge : 30Messages : 39

    Ven 3 Juin 2016 - 15:08

    merci Wink
    Tinkky
    Tinkky
    FémininAge : 33Messages : 104

    Lun 6 Juin 2016 - 19:41

    Merci du partage ^_^
    Litonya
    Litonya
    FémininAge : 22Messages : 149

    Lun 6 Juin 2016 - 20:32

    michi
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 14:44