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
    pinote20e4
    FémininAge : 24Messages : 66

    le Sam 13 Juin 2015 - 4:49

    Merci beaucoup! C'est super aidant!
    avatar
    picka234
    Age : 52Messages : 440

    le Ven 19 Juin 2015 - 19:59

    merci



    avatar
    Kirito
    MasculinAge : 21Messages : 199

    le Mar 30 Juin 2015 - 21:46

    Merci
    avatar
    Allèle
    FémininAge : 24Messages : 56

    le Mer 1 Juil 2015 - 11:38

    Merci
    avatar
    Neymar
    MasculinAge : 19Messages : 138

    le Jeu 13 Aoû 2015 - 19:00

    Intéressant ? :/
    avatar
    Kelalin
    FémininAge : 24Messages : 1516

    le Jeu 13 Aoû 2015 - 21:24

    Merci ! (☆^O^☆)
    avatar
    NanoiHime
    FémininAge : 18Messages : 557

    le Dim 16 Aoû 2015 - 14:33

    merci



    avatar
    Nillium
    FémininAge : 18Messages : 16

    le Dim 22 Nov 2015 - 16:01

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

    le Dim 22 Nov 2015 - 17:56

    merci :)



    eLoChA.
    avatar
    WhiteRaaven
    FémininAge : 20Messages : 37

    le Mer 25 Nov 2015 - 12:09

    Merci ^^
    avatar
    Fantôma
    MasculinAge : 15Messages : 67

    le Dim 20 Déc 2015 - 19:52

    thanks



    avatar
    DeadlyRuby
    FémininAge : 17Messages : 40

    le Jeu 24 Déc 2015 - 13:52

    Merci. ^^



    avatar
    Melaly
    FémininAge : 23Messages : 88

    le 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 !
    avatar
    Shoki
    FémininAge : 15Messages : 1308

    le Mer 6 Jan 2016 - 20:06

    Merci ! :)





    avatar
    MeowLowDee
    FémininAge : 25Messages : 72

    le Ven 29 Jan 2016 - 12:47

    Thanks
    avatar
    Arisu
    FémininAge : 28Messages : 108

    le Ven 26 Fév 2016 - 6:28

    Merci !
    avatar
    Shizuyae
    FémininAge : 18Messages : 57

    le Sam 27 Fév 2016 - 17:11

    merci
    avatar
    Unleash
    MasculinAge : 17Messages : 79

    le Jeu 24 Mar 2016 - 11:48

    ty
    avatar
    Euterpe
    FémininAge : 31Messages : 285

    le Lun 28 Mar 2016 - 19:35

    merci!
    avatar
    rosebleudu10
    FémininAge : 27Messages : 186

    le Mar 26 Avr 2016 - 15:28

    merci pour ce partage
    avatar
    Faïryna
    FémininAge : 14Messages : 59

    le Dim 8 Mai 2016 - 17:02

    Merci!
    avatar
    M.O
    MasculinAge : 27Messages : 48

    le Mar 24 Mai 2016 - 3:39

    Merci!
    avatar
    Flavien1309
    MasculinAge : 23Messages : 38

    le Ven 3 Juin 2016 - 15:08

    merci Wink
    avatar
    Tinkky
    FémininAge : 26Messages : 87

    le Lun 6 Juin 2016 - 19:41

    Merci du partage ^_^
    avatar
    Litonya
    FémininAge : 15Messages : 144

    le Lun 6 Juin 2016 - 20:32

    michi
    Contenu sponsorisé


      La date/heure actuelle est Ven 21 Juil 2017 - 22:49