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 : 9752

    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.lesmots.net/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
    Geen
    FémininAge : 18Messages : 33

    le Dim 23 Mar 2014 - 15:09

    Merci beaucoup ♥
    avatar
    Saphiina
    FémininAge : 23Messages : 26

    le Dim 23 Mar 2014 - 15:11

    trop bien !!!
    avatar
    Irony
    FémininAge : 20Messages : 102

    le Dim 23 Mar 2014 - 16:58

    C'est magnifique, mercii. **
    avatar
    PANDA™
    FémininAge : 20Messages : 25

    le Dim 23 Mar 2014 - 18:03

    Merci pour le partage, c'est absolument sublime ♥
    avatar
    Kio
    FémininAge : 20Messages : 22

    le Dim 23 Mar 2014 - 18:11

    Merciii
    avatar
    Bruleciel
    FémininAge : 25Messages : 934

    le Dim 23 Mar 2014 - 19:02

    Un gros merci, c'est super beau ! <3



    Je brûle le ciel
    avatar
    Féhéla
    FémininAge : 44Messages : 238

    le Dim 23 Mar 2014 - 19:39

    merci beaucoup !
    avatar
    Fallaha
    FémininMessages : 80

    le Lun 24 Mar 2014 - 1:43

    merci beaucoup Very Happy
    avatar
    Lilly31
    FémininAge : 26Messages : 97

    le Lun 24 Mar 2014 - 11:29

    Merci



    avatar
    Lovehurt
    FémininAge : 21Messages : 36

    le Lun 24 Mar 2014 - 14:43

    La suite omg  :kdo: 
    avatar
    Little Melody
    FémininAge : 17Messages : 64

    le Lun 24 Mar 2014 - 15:52

    Trop boow °°
    Elrohir
    FémininAge : 26Messages : 69

    le Lun 24 Mar 2014 - 20:13

    Malgré mes supers compétences en codage (je pense que tu dois t'en rendre compte XD), je vais tenter =)
    Merci bien!
    avatar
    Lunara
    FémininAge : 31Messages : 95

    le Mar 25 Mar 2014 - 18:46

    merci pour le partage !
    avatar
    benficagirl
    FémininAge : 32Messages : 375

    le Mer 26 Mar 2014 - 3:10

    Aww <3 Merci. C'est justement ce que je cherchais =D.
    avatar
    Seven
    FémininAge : 24Messages : 135

    le Mer 26 Mar 2014 - 15:55

    C'est juste super classe & beau *^*
    Merci beaucoup pour le partage !
    avatar
    Emma-Iseult
    FémininAge : 21Messages : 44

    le Mer 26 Mar 2014 - 22:19

    Gracias :)
    avatar
    Liliumini
    FémininAge : 23Messages : 55

    le Jeu 27 Mar 2014 - 13:52

    Merci!
    avatar
    Tanchi
    Age : 26Messages : 373

    le Jeu 27 Mar 2014 - 15:07

    Très sympa, comme le QEEL. Merci du partage Wink



    avatar
    Amiko
    FémininAge : 26Messages : 51

    le Jeu 27 Mar 2014 - 16:23

    Halloween, c'est génial *-*
    avatar
    Azuriel
    FémininAge : 23Messages : 129

    le Jeu 27 Mar 2014 - 19:30

    *O* Merchi ! Exactement ce que je cherchais ! *O*
    avatar
    Dearborn
    FémininAge : 24Messages : 109

    le Ven 28 Mar 2014 - 14:09

    Super, merci :3!
    avatar
    Aurore13
    FémininAge : 29Messages : 48

    le Ven 28 Mar 2014 - 14:18

    Superbeeeeeeeeeeeeeee ♥
    avatar
    Sparky59
    FémininAge : 18Messages : 54

    le Ven 28 Mar 2014 - 20:15

    Merci beaucoup ^^
    avatar
    SamyChou
    FémininAge : 21Messages : 31

    le Ven 28 Mar 2014 - 22:01

      Merci du partage c'est sublime !
    avatar
    Egyfu
    FémininAge : 24Messages : 46

    le Ven 28 Mar 2014 - 23:36

    Merci pour cette PA ! =D
    Super travail.
    Contenu sponsorisé


      La date/heure actuelle est Lun 18 Juin 2018 - 13:23