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
    LadyNicky
    FémininAge : 20Messages : 34

    le Dim 24 Juil 2016 - 21:22

    Merci !
    avatar
    Kacisse
    FémininAge : 21Messages : 43

    le Lun 1 Aoû 2016 - 21:07

    merci beaucoup !
    avatar
    FROSTendoloris
    FémininAge : 24Messages : 166

    le Mar 2 Aoû 2016 - 20:05

    Merci du partage, c'est tellement beau !



    avatar
    Geci
    FémininAge : 26Messages : 68

    le Ven 5 Aoû 2016 - 15:10

    Merci à toi ! ♥ Très complet en effet ~



    avatar
    Whisperinette
    FémininAge : 25Messages : 17

    le Sam 13 Aoû 2016 - 16:21

    Oh my ! ham2
    C'est vraiment magnifique !
    Un gigantesque merci pour ce partage <3
    avatar
    Kai Parker
    FémininAge : 20Messages : 154

    le Ven 19 Aoû 2016 - 18:37

    Splendide !! **

    avatar
    Mordred Ghost
    FémininAge : 31Messages : 63

    le Dim 21 Aoû 2016 - 18:47

    Merci beaucoooooup !
    avatar
    Flach
    MasculinAge : 15Messages : 12

    le Dim 28 Aoû 2016 - 15:35

    Merki!
    avatar
    Ode 14
    FémininAge : 25Messages : 19

    le Dim 28 Aoû 2016 - 17:20

    Merci ^^
    avatar
    Ziktaon
    MasculinAge : 25Messages : 843

    le Dim 28 Aoû 2016 - 21:31

    Merci bien :p






    ‘ Le codage est la logique, Le graphisme est le savoir faire ‘

    avatar
    alas
    FémininAge : 27Messages : 20

    le Lun 19 Sep 2016 - 10:49

    Très intéressant, merci !
    Yunroxas
    FémininAge : 24Messages : 37

    le Sam 24 Sep 2016 - 19:21

    Merci c'est très beau
    avatar
    Aladiah
    FémininAge : 21Messages : 58

    le Sam 24 Sep 2016 - 23:47

    Merci :)
    avatar
    Yelonia
    FémininAge : 23Messages : 46

    le Lun 26 Sep 2016 - 11:58

    PA très jolie ! Very Happy Merci du partage ! :)
    avatar
    Meeko
    MasculinAge : 24Messages : 29

    le Mer 28 Sep 2016 - 3:37

    Merci!
    avatar
    Océ
    FémininAge : 43Messages : 280

    le Dim 2 Oct 2016 - 19:54

    merci beaucoup



    Bonjours voici les pv's que nous cherchons : [url=http://www.never-utopia.com/t63181-les-postes-vacants-pour-les-chronuque-de-aya#960582 L’annonce est ici[/url]
    avatar
    Paulind
    FémininAge : 16Messages : 24

    le Dim 2 Oct 2016 - 22:51

    Merci beaucoup, c'est très beau!
    avatar
    Ryuu
    FémininAge : 24Messages : 61

    le Lun 3 Oct 2016 - 12:28

    Merci



    avatar
    Jynnea
    FémininAge : 23Messages : 103

    le Ven 7 Oct 2016 - 8:39

    Merci!
    avatar
    witm
    FémininAge : 24Messages : 51

    le Sam 8 Oct 2016 - 21:13

    toujours parfait ! merci
    avatar
    Spring
    FémininAge : 16Messages : 113

    le Dim 9 Oct 2016 - 14:24

    merci !



    avatar
    Face Lightwood
    FémininAge : 18Messages : 8

    le Dim 9 Oct 2016 - 20:03

    Hello !

    Très joli travail, les couleurs sont bien coordonnées, le style assez épuré tout en étant complet...
    Bravo pour ce PA et merci du partage :)
    avatar
    Inamio
    FémininAge : 25Messages : 236

    le Lun 10 Oct 2016 - 10:46

    super sympas :) merci



    avatar
    Invité

    le Mer 19 Oct 2016 - 20:23

    Merci pour ce code Very Happy
    avatar
    Kalea
    FémininAge : 19Messages : 11

    le Sam 22 Oct 2016 - 20:11

    merchi
    Contenu sponsorisé


      La date/heure actuelle est Mar 19 Juin 2018 - 0:54