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 supplémentaire sur le côté

    Partagez
    avatar
    Halloween
    FémininAge : 24Messages : 9754

    le Dim 15 Juin 2014 - 20:43

    Rappel du premier message :



    Plop,

    La taille des images est de 100*100px.

    Navigation


    Version  phpBB2 ▬ CSS & HTML ▬ Info-bulles

    Aperçu ▬ www


    CSS
    Code:
    /* --------------------------------- NAVIGATION --------------------------------- */

    /* Contient les cercles */
    .bloc_onglet {
      position: fixed;
      top: 50px;
    }

    /* Info-bulles */
    .bloc_infobulle {
      z-index: 24;
      text-decoration: none;
      position: relative;
      margin-top: 20px;
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }
    /*Image*/
    .bloc_imgbulle {
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }
    /* Triangle noir */
    .bloc_anglebulle {
      border: 0 solid transparent;
      border-top-width: 10px;
      border-bottom-width: 10px;
      border-right: 11px solid black;
      position: absolute;
      left: -10px;
      top: 45px;
    }
    /*Bloc des liens*/
    .bloc_bulle {
      display: none;
      position: absolute;
      top: 0px;
      left: 120px;
      height: 150px;
      width: 200px;
      background: #000000;
      text-align: center;
      font-weight: none;
      padding: 20px 5px 5px 5px;
      text-align: center;
    }
    .bloc_infobulle:hover .bloc_bulle {
      display: block;
    }
    .bloc_infobulle:hover {
      width: 120px;
    }
    /*Liens*/
    .bloc_infobulle a {
      text-decoration: none !important;
      color: #a3a3a3;
    }
    .bloc_infobulle a:hover {
      color: #dfdfdf;
    }

    /* --------------------------------- FIN NAVIGATION --------------------------------- */

    HTML
    Code:
      <div class="bloc_onglet">
        <div class="bloc_infobulle">
          <img class="bloc_imgbulle" src="http://nsa34.casimages.com/img/2014/07/05/140705051110210270.jpg" alt="" />
          <div class="bloc_bulle">
            <div class="bloc_anglebulle"></div>
            <a href="#">Je suis un lien</a><br />
            <a href="#">Je suis un lien</a><br />
            <a href="#">Je suis un lien</a><br />
            <a href="#">Je suis un lien</a>
          </div>
        </div>
        <div class="bloc_infobulle">
          <img class="bloc_imgbulle" src="http://nsa34.casimages.com/img/2014/07/05/140705051110210270.jpg" alt="" />
          <div class="bloc_bulle">
            <div class="bloc_anglebulle"></div>
            <a href="#">Je suis un lien</a><br />
            <a href="#">Je suis un lien</a><br />
            <a href="#">Je suis un lien</a><br />
            <a href="#">Je suis un lien</a>
          </div>
        </div>
        <div class="bloc_infobulle">
          <img class="bloc_imgbulle" src="http://nsa34.casimages.com/img/2014/07/05/140705051110210270.jpg" alt="" />
          <div class="bloc_bulle">
            <div class="bloc_anglebulle"></div>
            <a href="#">Je suis un lien</a><br />
            <a href="#">Je suis un lien</a><br />
            <a href="#">Je suis un lien</a><br />
            <a href="#">Je suis un lien</a>
          </div>
        </div>
        <div class="bloc_infobulle">
          <img class="bloc_imgbulle" src="http://nsa34.casimages.com/img/2014/07/05/140705051110210270.jpg" alt="" />
          <div class="bloc_bulle">
            <div class="bloc_anglebulle"></div>
            <a href="#">Je suis un lien</a><br />
            <a href="#">Je suis un lien</a><br />
            <a href="#">Je suis un lien</a><br />
            <a href="#">Je suis un lien</a>
          </div>
        </div>
      </div>

    Pour afficher la navigation dans toutes les pages, il faut ajouter ce code dans le template overall_header après l'ouverture de la balise body.

    En fonction de la version de votre forum, l'ouverture de la balise body dans le template ne ressemblera pas à la même chose. Voici comment la trouver :
    Spoiler:
    Sur Invision et Punbb, mettre le code après :
    Code:
    <body>

    Sur phpbb3, mettre le code après :
    Code:
    <body id="phpbb">

    Sur phpbb2, mettre le code après :
    Code:
    <body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^


    Dernière édition par Halloween le Mar 22 Juil 2014 - 23:56, édité 2 fois




    < / Libre service codage >
    avatar
    FROSTendoloris
    FémininAge : 25Messages : 172

    le Mer 3 Aoû 2016 - 21:20

    Merci du partage Very Happy



    avatar
    Cheshire Cat
    FémininAge : 21Messages : 983

    le Dim 7 Aoû 2016 - 17:14

    Bien le merci.
    avatar
    NanoiHime
    FémininAge : 19Messages : 563

    le Lun 15 Aoû 2016 - 5:17

    mercii



    avatar
    Myuun
    FémininAge : 20Messages : 33

    le Ven 23 Sep 2016 - 1:13

    oh merci ^^



    avatar
    .Lucifer.
    MasculinAge : 45Messages : 179

    le Jeu 13 Oct 2016 - 2:40

    Merci beaucoup ! Wink



    avatar
    Onyx
    FémininAge : 24Messages : 3134

    le Dim 16 Oct 2016 - 1:25

    Il y a vraiment personne qui écoute le "c'est un LS à corriger, pas touche", right?

    Whatever, j'ai recréé le html qui avait été supprimé, donc c'est validé et ce sera bientôt déplacé dans le Libre Service.



    avatar
    Okushan
    FémininAge : 27Messages : 15

    le Dim 20 Nov 2016 - 0:27

    Merci Very Happy
    avatar
    Kokoro Korou
    MasculinAge : 22Messages : 70

    le Ven 9 Déc 2016 - 16:39

    Merci !
    avatar
    Onlyo
    FémininAge : 21Messages : 24

    le Mar 14 Mar 2017 - 16:53

    merci :)
    avatar
    Roxye
    FémininAge : 25Messages : 43

    le Jeu 1 Mar 2018 - 12:53

    merci ^^
    avatar
    Toxinou
    FémininAge : 27Messages : 37

    le Lun 9 Avr 2018 - 22:45

    Merci pour ce tuto :)
    avatar
    Nobuko
    MasculinAge : 25Messages : 32

    le Mar 12 Juin 2018 - 3:08

    Merci !
    avatar
    P'tit loup
    MasculinAge : 35Messages : 445

    le Jeu 2 Aoû 2018 - 20:51

    Merci o/



    Contenu sponsorisé


      La date/heure actuelle est Ven 19 Oct 2018 - 11:22