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
    EAVENN
    FémininAge : 21Messages : 162

    le Mer 8 Juin 2016 - 14:46

    merci
    avatar
    Tink ♥
    FémininAge : 25Messages : 46

    le Mer 15 Juin 2016 - 19:18

    C'est toujours bien quand c'est rapide et pratique Wink
    Merci !
    avatar
    Takasu-ryuji
    MasculinAge : 24Messages : 23

    le Mer 15 Juin 2016 - 21:02

    merci
    avatar
    Sybline
    FémininAge : 31Messages : 22

    le Jeu 7 Juil 2016 - 11:02

    merci ^^
    avatar
    Asarigolo
    MasculinAge : 24Messages : 29

    le Mer 13 Juil 2016 - 9:55

    Merci !
    avatar
    Kitket
    FémininAge : 34Messages : 95

    le Lun 1 Aoû 2016 - 9:50

    MErci
    avatar
    dean winchester
    MasculinAge : 23Messages : 85

    le Ven 19 Aoû 2016 - 2:52

    Merci bien ! Very Happy
    avatar
    TheHG
    FémininAge : 22Messages : 52

    le Mer 28 Sep 2016 - 22:05

    Merci!
    avatar
    Offrande
    FémininAge : 26Messages : 188

    le Mer 12 Oct 2016 - 6:28

    Merci beaucoup :) !
    avatar
    Lyxiae
    FémininAge : 24Messages : 39

    le Dim 11 Déc 2016 - 11:38

    Ca semble cool, merci !
    avatar
    Myrddin
    FémininAge : 27Messages : 56

    le Jeu 29 Déc 2016 - 0:50

    Merci !
    avatar
    Doomdom
    MasculinAge : 32Messages : 19

    le Ven 10 Fév 2017 - 14:05

    merci :omg:
    avatar
    Marie
    FémininAge : 28Messages : 2206

    le Sam 11 Fév 2017 - 16:42

    Merci pour ce tuto!



    /

    Kit fait par Arpège. Merci! :love:
    avatar
    1charlotte
    FémininAge : 16Messages : 196

    le Dim 5 Mar 2017 - 12:28

    merciii
    avatar
    Mashi Hozuki
    MasculinAge : 19Messages : 28

    le Mer 8 Mar 2017 - 17:28

    Merci
    avatar
    Tanchi
    Age : 25Messages : 365

    le Jeu 9 Mar 2017 - 19:09

    Merci du partage :)



    Contenu sponsorisé


      La date/heure actuelle est Lun 24 Juil 2017 - 16:43