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.


    PA complète - onglets et infobulles

    Partagez
    avatar
    Halloween
    FémininAge : 24Messages : 9757

    le Mer 5 Fév 2014 - 16:20

    Rappel du premier message :

    Plop,

    Ça fait bizarre de poster comme ça, je me demande ce que ça va donner en sujet =O Je savais pas s'il fallait poster le code du sujet ou juste le code, alors au feeling xD



    Page d'accueil


    Version  phpBB2 ▬ CSS & HTML ▬ Système d'infobulles et d'onglet

    Aperçu ▬ www


    PA
    Code:
    <div class="fondsgénéraux">
     
    <center>
     
    <div class="titrePA1">
     Once Upon A Time
    </div><img src="http://nsa31.casimages.com/img/2014/01/25//140125112012539200.png" style="margin-top: -50px; WIDTH: 100px; margin-left: 320px; opacity: 0.5px" />
    </center>
     
    <table>
     
    <tbody>
     
    <tr>
     
    <td>
     
    <center>
     <script type="text/javascript">
            //<!--
                    function change_paonglet(name)
                    {
                            document.getElementById('paonglet_'+anc_paonglet).className = 'paonglet_0 paonglet';
                            document.getElementById('paonglet_'+name).className = 'paonglet_1 paonglet';
                            document.getElementById('contenu_paonglet_'+anc_paonglet).style.display = 'none';
                            document.getElementById('contenu_paonglet_'+name).style.display = 'block';
                            anc_paonglet = name;
                    }
            //-->
            </script>
    <div class="contenu_paonglets">
     
    <div id="contenu_paonglet_contexte" class="contenu_paonglet">
     
    <div class="titrePA2">
     Contexte
    </div><img src="http://data2.whicdn.com/images/97872350/large.jpg" style="width: 200px" /> <br /><br />
    <div style="TEXT-ALIGN: justify; WIDTH: 230px; HEIGHT: 150px; COLOR: #767676; OVERFLOW: auto;">
     Benevolentiae Nam homines in homines omnia erunt fides Nam in omnia omnibus vivere omnibus circumfluere locus nimirum ipse habent in abundantia omnium potest pro atque Haec nulla rerum nulla benevolentiae fides ab tyrannorum omnia Nam velit caritas erunt homines est nimirum atque ipse enim ullo esse velit ipse nulla omnibus amicitia usu omnium nec atque nulla in nec ergo est stabilis abundantia fidem semper suspecta neque potest suspecta sollicita erunt diligat tyrannorum omnibus usu ut est qua si abundantia stabilis usu ullo neque Haec suspecta omnium vivere si omnium de vivere abundantia Nam est disputabunt habent circumfluere caritas stabilis atque. <a href="http://rpgiletaitunefois.forumotion.com/t13-le-contexte" style="COLOR: #fe6d6d !important">La suite</a>
    </div>
     
    </div>
     
    <div id="contenu_paonglet_encours" class="contenu_paonglet">
     
    <div class="titrePA2">
     Actuellement ...
    </div><img src="http://data2.whicdn.com/images/83773104/large.gif" style="WIDTH: 200px" /> <br /><br />
    <div style="TEXT-ALIGN: justify; WIDTH: 230px; HEIGHT: 175px; COLOR: #767676; OVERFLOW: auto;">
     Benevolentiae Nam homines in homines omnia erunt fides Nam in omnia omnibus vivere omnibus circumfluere locus nimirum ipse habent in abundantia omnium potest pro atque Haec nulla rerum nulla benevolentiae fides ab tyrannorum omnia Nam velit caritas erunt homines est nimirum atque ipse enim ullo esse velit ipse nulla omnibus amicitia usu omnium nec atque nulla in nec ergo est stabilis abundantia fidem semper suspecta neque potest suspecta sollicita erunt diligat tyrannorum omnibus usu ut est qua si abundantia stabilis usu ullo neque Haec suspecta omnium vivere si omnium de vivere abundantia Nam est disputabunt habent circumfluere caritas stabilis atque.
    </div>
     
    </div>
     
    </div><br />
    <div class="paonglets">
     <span onclick="javascript:change_paonglet('contexte');" id="paonglet_contexte" class="paonglet_0 paonglet"><img src="http://i56.servimg.com/u/f56/18/71/36/65/sans_t10.png" /></span> <span onclick="javascript:change_paonglet('encours');" id="paonglet_encours" class="paonglet_0 paonglet"><img src="http://i56.servimg.com/u/f56/18/71/36/65/sans_t12.png" /></span>
    </div>
     <script type="text/javascript">
            //<!--
                    var anc_paonglet = 'contexte';
                    change_paonglet(anc_paonglet);
            //-->
            </script><br /><br />
    <div class="blocpa">
     
    <div class="titrePA2">
     Liens utiles
    </div><br /><select onchange="location = this.value" style="BACKGROUND-COLOR: #d3d3d3; WIDTH: 190px; COLOR: #16161a"> <option>Faites votre choix</option> <option value="#">Lien</option> <option value="#">Lien 2</option> <option value="#">Lien 3</option> <option value="#">Lien 4</option> <option value="#">Lien 5</option></select>
    </div><br /><br />
    <div class="blocpa">
     
    <div class="titrePA2">
     Les manitou-tou
    </div><d class="info"><img src="http://i56.servimg.com/u/f56/18/71/36/65/110.png" class="imgwidget" /><span><e style="COLOR: #f0f0f0 !important; FONT-SIZE: 18px !important" class="titrePA1">Pseudo</e> <br /><a href="#" style="COLOR: #f0f0f0 !important">Profil</a> <f style="COLOR: #fe6d6d; FONT-SIZE: 14px">☕</f> <a href="#" style="COLOR: #f0f0f0 !important">MP</a></span></d> <d class="info"><img src="http://i56.servimg.com/u/f56/18/71/36/65/110.png" class="imgwidget" /><span><e style="COLOR: #f0f0f0 !important; FONT-SIZE: 18px !important" class="titrePA1">Pseudo</e> <br /><a href="#" style="COLOR: #f0f0f0 !important">Profil</a> <f style="COLOR: #fe6d6d; FONT-SIZE: 14px">☕</f> <a href="#" style="COLOR: #f0f0f0 !important">MP</a></span></d> <d class="info"><img src="http://i56.servimg.com/u/f56/18/71/36/65/110.png" class="imgwidget" /><span><e style="COLOR: #f0f0f0 !important; FONT-SIZE: 18px !important" class="titrePA1">Pseudo</e> <br /><a href="#" style="COLOR: #f0f0f0 !important">Profil</a> <f style="COLOR: #fe6d6d; FONT-SIZE: 14px">☕</f> <a href="#" style="COLOR: #f0f0f0 !important">MP</a></span></d>
    </div>
     
    </center>
     
    </td>
     
    <td style="WIDTH: 20px">
     
    </td>
     
    <td>
     
    <center>
     
    <div style="WIDTH: 350px" class="blocpa">
     
    <div class="titrePA2">
     Nos actualités
    </div><br /><br />
    <div style="TEXT-ALIGN: justify; WIDTH: 300px; HEIGHT: 150px; COLOR: #767676; OVERFLOW: auto">
     <span style="COLOR: #fe6d6d; FONT-SIZE: 14px">☕ </span>Benevolentiae Nam homines in homines omnia erunt fides Nam in omnia omnibus vivere omnibus circumfluere locus nimirum ipse habent in abundantia omnium potest pro atque <a href="#" style="COLOR: #fe6d6d !important">La suite</a> <br /><br /><span style="COLOR: #fe6d6d; FONT-SIZE: 14px">☕ </span>Benevolentiae Nam homines in homines omnia erunt fides Nam in omnia omnibus vivere omnibus circumfluere locus nimirum ipse habent in abundantia omnium potest pro atque <a href="#" style="COLOR: #fe6d6d !important">La suite</a> <br /><br /><span style="COLOR: #fe6d6d; FONT-SIZE: 14px">☕ </span>Benevolentiae Nam homines in homines omnia erunt fides Nam in omnia omnibus vivere omnibus circumfluere locus nimirum ipse habent in abundantia omnium potest pro atque <a href="#" style="COLOR: #fe6d6d !important">La suite</a> <br /><br /><span style="COLOR: #fe6d6d; FONT-SIZE: 14px">☕ </span>Benevolentiae Nam homines in homines omnia erunt fides Nam in omnia omnibus vivere omnibus circumfluere locus nimirum ipse habent in abundantia omnium potest pro atque <a href="#" style="COLOR: #fe6d6d !important">La suite</a> <br /><br />
    </div><br /><br />
    <div class="titrePA2">
     Nos vedettes manquantes sont ...
    </div>
     <br /><br /> <c class="info"><img src="http://i56.servimg.com/u/f56/18/71/36/65/110.png" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important" class="titrePA1">Pseudo</d> <br /><a href="#" style="COLOR: #fe6d6d !important">Sa fiche</a></span></c> <c class="info"><img src="http://i56.servimg.com/u/f56/18/71/36/65/110.png" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important" class="titrePA1">Pseudo</d> <br /><a href="#" style="COLOR: #fe6d6d !important">Sa fiche</a></span></c> <c class="info"><img src="http://i56.servimg.com/u/f56/18/71/36/65/110.png" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important" class="titrePA1">Pseudo</d> <br /><a href="#" style="COLOR: #fe6d6d !important">Sa fiche</a></span></c> <c class="info"><img src="http://i56.servimg.com/u/f56/18/71/36/65/110.png" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important" class="titrePA1">Pseudo</d> <br /><a href="#" style="COLOR: #fe6d6d !important">Sa fiche</a></span></c>
    </div><br />
    <div style="WIDTH: 300px" class="blocpa">
     
    <div class="titrePA2">
     Pensez à survoler tout élément suspect !
    </div>
     
    </div><br />
    <div style="WIDTH: 350px" class="blocpa">
     
    <div class="titrePA2">
     Si tu nous aimes, prouve-le !
    </div><a href="#"><img src="http://www.renders-graphiques.fr/image/upload/normal/1079_render_Pomme.png" class="tops" /></a> <a href="#"><img src="http://www.renders-graphiques.fr/image/upload/normal/1079_render_Pomme.png" class="tops" /></a> <a href="#"><img src="http://www.renders-graphiques.fr/image/upload/normal/1079_render_Pomme.png" class="tops" /></a><br /><a href="#" style="FONT-FAMILY: georgia; COLOR: #fe6d6d !important"><em>Et sois récompensé</em></a>
    </div>
     
    </center>
     
    </td>
     
    </tr>
     
    </tbody>
     
    </table><br /><a style="color: #767676 !important;" href="http://www.never-utopia.com">© Halloween</a>
    </div><link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Parisienne" />

    CSS
    Code:
    /*--------------------------------- PA ---------------------------------*/

    /* Fond */
    .fondsgénéraux {
      background-color: #1B1B1F;
      width: 700px;
      padding: 15px;
      color: #767676;
    }

    .blocpa {
      width: 220px;
      padding: 15px;
      background-color: #141517;
    }

    .blocpa:hover {
      width: 220px;
      background-color: #141517;
      border-left: 2px solid #2F3C3E;
      border-right: 2px solid #2F3C3E;
    }

    /* Titres */
    .titrePA1 {
      font-family: parisienne;
      font-size: 35px;
      color: #FE6D6D;
      z-index: 1px;
      position: relative;
    }

    .titrePA2 {
      font-family: parisienne;
      font-size: 25px;
      color: #F0F0F0;
      position: relative;
    }

    .titrePA2:hover {
      font-family: parisienne;
      font-size: 25px;
      color: #FE6D6D;
      position: relative;
    }

    .titrePA3 {
      font-family: parisienne;
      font-size: 25px;
      color: #FE6D6D;
      position: relative;
    }

    .titrePA3:hover {
      font-family: parisienne;
      font-size: 25px;
      color: #F0F0F0;
      position: relative;
    }

    /* Système onglets */
    .paonglet {
      display: inline-block;
      cursor: pointer;
    }

    .contenu_paonglet {
      display: none;
      width: 250px;
      height: 360px;
      background-color: #141517;
    }

    .contenu_paonglet:hover {
      display: none;
      width: 250px;
      background-color: #141517;
      border-left: 2px solid #2F3C3E;
      border-right: 2px solid #2F3C3E;
    }

    /* Info-bulles staff */
    .info {
      position: relative;
      z-index: 24;
      text-decoration: none;
    }

    d.info:hover {
      z-index: 25;
    }
     
    d.info span {
      display: none;
    }
     
    d.info:hover span {
      display: block;
      position: absolute;
      top: -2em;
     left: -2em;
      width: 120px;
      height: 50px;
      background-color: #1B1B1F;
      color: #16161A;
      text-align: center;
      font-weight: none;
    }

    /* Info-bulles prédef */
    .info {
      position: relative;
      z-index: 24;
      text-decoration: none;
    }
     
    c.info:hover {
      z-index: 25;
    }
     
    c.info span {
      display: none;
    }
     
    c.info:hover span {
      display: block;
      position: absolute;
      top: -7.3em;
     left: -0.2em;
      border-radius: 50%;
      width: 85px;
      height: 85px;
      background-color: #1B1B1F;
      color: #16161A;
      text-align: center;
      font-weight: none;
    }

    /* Images Prédef */
    .imgPA {
      border-radius: 50%;
      width: 80px;
      height: 80px;
    }

    /* Images Staff */
    .imgwidget {
      border-radius: 50%;
      width: 60px;
      height: 60px;
      -moz-transition-duration: 1s;
      -moz-transition-timing-function: linear;
      -webkit-transition-duration: 1s;
      -webkit-transition-timing-function: linear;
      transition-duration: 1s;
      transition-timing-function: linear;
    }

    .imgwidget:hover {
      border-radius: 50%;
      width: 60px;
      height: 60px;
      -moz-transform: rotate(360deg);
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }

    /* Top Sites */
    .tops {
      -moz-transform: rotate(20deg);
      -webkit-transform: rotate(20deg);
      transform: rotate(20deg);
      width: 40px;
    }

    .tops:hover {
      -moz-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
      width: 40px;
    }

    /*--------------------------------- FIN PA ---------------------------------*/

    Attention, deux types d'info-bulle, veillez à ne pas les confondre lors de vos personnalisations, sinon ça risque de planter =$




    Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
    Vos commentaires et remerciements sont toujours bienvenus ^^
    Si vous avez des problèmes avec ce LS, venez poster ici.


    Dernière édition par Halloween le Mer 5 Fév 2014 - 18:07, édité 1 fois




    < / Libre service codage >
    avatar
    Sow_Oxalys
    FémininAge : 28Messages : 21

    le Dim 30 Juil 2017 - 15:26

    Merci beaucoup c'est top !
    avatar
    kitsu01
    MasculinAge : 24Messages : 8

    le Ven 4 Aoû 2017 - 15:54

    superbe PA :) merci de la fournir en libre *_*
    avatar
    JemAedan
    FémininAge : 31Messages : 27

    le Sam 5 Aoû 2017 - 14:53

    C'est tellement beau *-*
    avatar
    Jixdu
    FémininAge : 17Messages : 37

    le Sam 5 Aoû 2017 - 14:55

    J'aime beaucoup ! ** Merci !
    avatar
    Calico
    FémininAge : 23Messages : 15

    le Mar 22 Aoû 2017 - 0:26

    trop belle
    merci!
    avatar
    Shin Minate
    MasculinAge : 24Messages : 83

    le Mar 22 Aoû 2017 - 15:52

    merci



    avatar
    Sora65
    FémininAge : 26Messages : 12

    le Mer 23 Aoû 2017 - 20:14

    Un grand merci Halloween ! Je vais tenter de mettre ce codage sur mon forum. Je trouve le résultat vraiment beau !
    avatar
    Exes
    MasculinAge : 21Messages : 17

    le Dim 17 Sep 2017 - 20:47

    merci
    avatar
    Illeanëlia
    FémininAge : 32Messages : 92

    le Dim 24 Sep 2017 - 13:39

    très joli PA merci
    avatar
    Tiffany.
    FémininAge : 29Messages : 12

    le Lun 16 Oct 2017 - 15:22

    Merci
    avatar
    pikacerise
    FémininAge : 27Messages : 12

    le Ven 20 Oct 2017 - 16:39

    Elle est magnifique merci
    avatar
    SaphiraDesigns
    FémininAge : 24Messages : 6

    le Dim 22 Oct 2017 - 19:09

    C'est superbe, merci !
    avatar
    Doriand
    MasculinAge : 27Messages : 90

    le Sam 4 Nov 2017 - 23:14

    merci
    avatar
    Dixy
    FémininAge : 24Messages : 228

    le Dim 5 Nov 2017 - 1:28

    Merci pour le partage c'est splendide !



    avatar
    revyklel
    FémininAge : 21Messages : 5

    le Mar 14 Nov 2017 - 0:07

    c'est si joli ! j't'emprunte ça !
    avatar
    Lou Perkins
    FémininAge : 28Messages : 8

    le Ven 17 Nov 2017 - 3:46

    merci !!
    avatar
    subanaru
    FémininAge : 24Messages : 4

    le Sam 9 Déc 2017 - 15:39

    Splendide ! Merci **
    avatar
    Zelankiel
    FémininAge : 29Messages : 27

    le Sam 9 Déc 2017 - 17:42

    Jolie, merci :)
    avatar
    GleeClub
    FémininAge : 24Messages : 47

    le Lun 1 Jan 2018 - 22:13

    merci
    avatar
    Amakhaza
    FémininAge : 15Messages : 52

    le Ven 5 Jan 2018 - 22:00

    C'est superbe, super travail ♥
    avatar
    Aadelrun
    FémininAge : 19Messages : 78

    le Sam 13 Jan 2018 - 15:43

    Merci ! C'est magnifique !^^



    avatar
    TWISTY.RAIN
    FémininAge : 22Messages : 63

    le Dim 14 Jan 2018 - 1:29

    Oh wow merci *-*



    avatar
    Pearlqueen
    FémininAge : 26Messages : 14

    le Mer 17 Jan 2018 - 20:42

    merciiiiii c'est super joli
    avatar
    Dinoni
    FémininAge : 20Messages : 13

    le Jeu 18 Jan 2018 - 22:33

    Merci !
    avatar
    reshiram44
    MasculinAge : 20Messages : 380

    le Sam 27 Jan 2018 - 16:41

    merci



    Contenu sponsorisé


      La date/heure actuelle est Jeu 13 Déc 2018 - 20:01