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 "fougère" en 2 versions (infobulles/transitions)

    A-Lice
    A-Lice
    FémininAge : 25Messages : 4939

    le Mar 15 Juil 2014 - 22:14

    Rappel du premier message :


    PA fougère avec infobulles


    Suite à une demande de MissPhan voici une PA fougère (bah elle est verte et faut bien les différencier donc bon).

    Je précise que l'arrière plan bleu correspond à mon forum.

    HTML & CSS ~ Voici donc un aperçu : www


    Précision : Les infobulles sont pour les images du staff dans la colonne du centre. Elles permettent de cacher un texte plus général par une description des membres du staff.

    Et le code :
    HTML :
    Code:
    <div id="PA_fond">
        <span id="PA_titre">Message d'accueil</span><br />
       <div class="PA_contexte">
           <span class="PA_sous_titre">Contexte</span><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et lacinia odio. Integer mattis hendrerit pretium. Duis leo leo, convallis dictum tempor a, imperdiet sed sapien. Nam eu massa iaculis, rutrum tortor et, auctor arcu. Donec eleifend nisl eget purus molestie sollicitudin. Aliquam ullamcorper at tortor et sagittis. Nunc ligula felis, ornare nec metus scelerisque, bibendum fringilla magna. Maecenas placerat, leo at tincidunt placerat, ipsum lectus eleifend est, in congue mauris felis vitae orci.
       </div>
       
       <div id="PA_col2">
          
          <div id="PA_staff">
             <table>
                <tbody>
                   <tr>
                      <td>
                         <div class="conteneur_PA">
                            <img class="PA_img" alt="Titre Image" src="http://img11.hostingpics.net/pics/8331106080.png" />
                            <div class="infobulle_PA infobulle_PA1">
                               Blablabla
                            </div>
                         </div>
                         <div class="conteneur_PA">
                            <img class="PA_img" alt="Titre Image" src="http://img11.hostingpics.net/pics/8331106080.png" style="margin-top:5px;" />
                            <div class="infobulle_PA infobulle_PA2">
                               Blobloblo
                            </div>
                         </div>
                      </td>
                      <td>
                         <div class="staff">
                            blabla
                         </div>
                      </td>
                      <td>
                         <div class="conteneur_PA">
                            <img class="PA_img" alt="Titre Image" src="http://img11.hostingpics.net/pics/8331106080.png" />
                            <div class="infobulle_PA infobulle_PA3">
                               Blablabla
                            </div>
                         </div>
                         <div class="conteneur_PA">
                            <img class="PA_img" alt="Titre Image" src="http://img11.hostingpics.net/pics/8331106080.png" style="margin-top:5px;"  />
                            <div class="infobulle_PA infobulle_PA4">
                               Blablabla
                            </div>
                         </div>
                      </td>
                   </tr>
                </tbody>
             </table>
          </div><br />
          <div class="PA_news">
              - <a href="LIEN">00/00/00 </a>: News<br /> - <a href="LIEN">00/00/00</a> : News
          </div>
          
       </div>
       
       <div id="PA_col3">
          
          <div id="PA_PV">
              <img style="margin-left:5px;" class="PA_img_PV" alt="" src="http://img11.hostingpics.net/pics/8331106080.png" /> <img class="PA_img_PV" alt="" src="http://img11.hostingpics.net/pics/8331106080.png" /> <img class="PA_img_PV" alt="" src="http://img11.hostingpics.net/pics/8331106080.png" /> <img style="width:40px; height:40px;" alt="" src="http://img11.hostingpics.net/pics/8331106080.png" /><br /><img style="margin-left:5px;" class="PA_img_PV" alt="" src="http://img11.hostingpics.net/pics/8331106080.png" /> <img class="PA_img_PV" alt="" src="http://img11.hostingpics.net/pics/8331106080.png" /> <img class="PA_img_PV" alt="" src="http://img11.hostingpics.net/pics/8331106080.png" /> <img style="width:40px; height:40px;" alt="" src="http://img11.hostingpics.net/pics/8331106080.png" />
          </div>
          
          <div id="PA_partenaire">
              <a href="LIEN PARTENAIRE"><img class="PA_partenaire_img" alt="" src="http://img11.hostingpics.net/pics/8331106080.png" /></a><a href="LIEN PARTENAIRE"><img class="PA_partenaire_img" alt="" src="http://img11.hostingpics.net/pics/8331106080.png" /></a><a href="LIEN PARTENAIRE"><img class="PA_partenaire_img" alt="" src="http://img11.hostingpics.net/pics/8331106080.png" /></a><a href="LIEN PARTENAIRE"><img class="PA_partenaire_img" alt="" src="http://img11.hostingpics.net/pics/8331106080.png" /></a><a href="LIEN PARTENAIRE"><img class="PA_partenaire_img" alt="" src="http://img11.hostingpics.net/pics/8331106080.png" /></a><a href="LIEN PARTENAIRE"><img class="PA_partenaire_img" alt="" src="http://img11.hostingpics.net/pics/8331106080.png" /></a><a href="LIEN PARTENAIRE"><img style="width:25px; height:25px;" alt="" src="http://img11.hostingpics.net/pics/8331106080.png" /></a><a href="LIEN PARTENAIRE"><img style="margin-top:3px" class="PA_partenaire_img" alt="" src="http://img11.hostingpics.net/pics/8331106080.png" /></a><a href="LIEN PARTENAIRE"><img style="margin-top:3px" class="PA_partenaire_img" alt="" src="http://img11.hostingpics.net/pics/8331106080.png" /></a><a href="LIEN PARTENAIRE"><img style="margin-top:3px" class="PA_partenaire_img" alt="" src="http://img11.hostingpics.net/pics/8331106080.png" /></a><a href="LIEN PARTENAIRE"><img style="margin-top:3px" class="PA_partenaire_img" alt="" src="http://img11.hostingpics.net/pics/8331106080.png" /></a><a href="LIEN PARTENAIRE"><img style="margin-top:3px" class="PA_partenaire_img" alt="" src="http://img11.hostingpics.net/pics/8331106080.png" /></a><a href="LIEN PARTENAIRE"><img style="margin-top:3px" class="PA_partenaire_img" alt="" src="http://img11.hostingpics.net/pics/8331106080.png" /></a><a href="LIEN PARTENAIRE"><img style="width:25px; height:25px;" alt="" src="http://img11.hostingpics.net/pics/8331106080.png" /></a><span id="PA_partenaire_txt"><a href="LIEN">Nos partenaires</a> - <a href="LIEN">Le devenir ?</a></span>
          </div>
          
          <div id="PA_topsite">
              <img style="padding-right:6px; padding-left:2px;" alt="" src="http://img11.hostingpics.net/pics/835225rouge.png" /><img alt="" src="http://img11.hostingpics.net/pics/835225rouge.png" />
          </div>
          
       </div><span id="PA_lien"><a href="LIEN">Liens rapides</a> - <a href="LIEN">Liens rapides</a> - <a href="LIEN">Liens rapides</a> - <a href="LIEN">Liens rapides</a> - <a href="LIEN">Liens rapides</a> - <a href="LIEN">Liens rapides</a></span><a id="ALice" href="http://www.never-utopia.com/">© A-Lice</a>
    </div>


    CSS :
    Code:
    #PA_fond {
    width:750px;
    height:325px;
    background:#596652; 
    padding-top:10px;
    padding-bottom:10px;
    margin:auto;
    }

    #PA_titre { 
    display:block;
    text-align:center;
    font-size:40px;
    color:#494d3f;
    }

    .PA_contexte {
    display:inline-block;
    width:150px;
    height:210px;
    background:#494d3f;
    overflow:auto;
    padding:10px;
    text-align:justify;
    color:#596652;
    margin-right:20px;
    padding-right:3px;
    position:relative;
    left:10px;
    }

    .PA_sous_titre {
    font-size:15px;
    color:#596652;
    }

    #PA_col2 {
    display:inline-block;
    width:340px;
    margin-right:10px;
    position:relative;
    left:-10px;
    }

    #PA_staff {
    width:310px;
    height:85px;
    padding-top:5px;
    padding-bottom:10px;
    padding-left:5px;
    padding-right:5px;
    background:#494d3f;
    margin-bottom:-9px;
    }

    .conteneur_PA {
    position: relative;
    width: 60px;
    height: 40px;
    overflow: visible;
    }

    .conteneur_PA .infobulle_PA {
    position: absolute;
    width: 158px;
    height: 85px;
    padding-left:5px;
    padding-right:5px;
    background: #494d3f;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
    }

    .infobulle_PA1 {
    top: 0px;
    left: 60px;
    }

    .infobulle_PA2 {
    top: -40px;
    left: 60px;
    }

    .infobulle_PA3 {
    top: 0px;
    left: -168px;
    }

    .infobulle_PA4 {
    top: -40px;
    left: -168px;
    }

    .conteneur_PA:hover .infobulle_PA {
    opacity: 1;
    visibility: visible;
    }

    .staff {
    width:150px;
    height:80px;
    padding-left:5px;
    padding-right:5px;
    overflow:auto;
    }

    .PA_img {
    width:60px;
    height:40px;
    }

    .PA_news { 
    margin-top:0px;
    width:300px;
    height:105px;
    padding:10px;
    background:#494d3f;
    overflow:auto;
    text-align:justify;
    color:#596652;
    }

    #PA_col3 {
    display:inline-block;
    width:220px;
    position:relative;
    top:-5px;
    left:-20px;
    margin-right:-10px;
    }

    #PA_PV {
    width:210px;
    padding:5px;
    height:85px;
    background:#494d3f;
    }

    .PA_img_PV {
    width:40px;
    height:40px;
    margin-right:6px;
    }

    #PA_partenaire {
    margin-top:5px;
    width:200px;
    height:60px;
    padding:10px;
    background:#494d3f;
    }

    #PA_partenaire_txt {
    display:block;
    text-align:center;
    padding-top:2px;
    }

    .PA_partenaire_img {
    width:25px;
    height:25px;
    margin-right:3px;
    }

    #PA_topsite {
    margin-top:5px;
    width:210px;
    height:35px;
    padding:5px;
    background:#494d3f;
    }

    #PA_lien {
    display:block;
    text-align:center;
    font-size:16px;
    color:#494d3f;
    padding:8px;
    position:relative;
    top:-5px;
    }

    #ALice {
    display:block;
    text-align:center;
    text-decoration:none;
    position:relative;
    top:-8px;
    }

    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 A-Lice le Lun 16 Fév 2015 - 13:24, édité 1 fois

    avatar
    Plumeau
    FémininAge : 23Messages : 30

    le Mer 8 Oct 2014 - 12:55

    Merci !

    Cette PA est simple mais le design est très jolie, et ça va vers l'essentiel ! Allier beauté et utilité, génial ! :star:
    Jack Sawyer
    Jack Sawyer
    MasculinAge : 36Messages : 15

    le Mer 15 Oct 2014 - 11:52

    merci
    Green Hornet
    Green Hornet
    FémininAge : 22Messages : 8

    le Mar 28 Oct 2014 - 10:47

    Merci beaucoup :)
    Loukoum
    Loukoum
    FémininAge : 25Messages : 835

    le Dim 23 Nov 2014 - 22:47

    Merci du partage *-*
    PA super basique mais je la trouve bien faite.



    Anonymous
    Invité

    le Lun 24 Nov 2014 - 9:48

    mercii
    AwenWolf
    AwenWolf
    FémininAge : 31Messages : 76

    le Ven 5 Déc 2014 - 13:16

    Merci =)
    Sachikou
    Sachikou
    FémininAge : 19Messages : 48

    le Mer 10 Déc 2014 - 19:39

    Merci ^-^



    PA "fougère" en 2 versions (infobulles/transitions) - Page 2 Signa111
    Solitude
    Solitude
    FémininAge : 44Messages : 286

    le Sam 13 Déc 2014 - 16:14

    Merci



    ~ Je suis capable du meilleur comme du pire, mais dans le pire c'est moi la meilleure. ~
    PA "fougère" en 2 versions (infobulles/transitions) - Page 2 Sign510
    Hayate747
    Hayate747
    MasculinAge : 29Messages : 196

    le Ven 16 Jan 2015 - 13:35

    Merci !!
    Lunet
    Lunet
    FémininAge : 22Messages : 27

    le Ven 16 Jan 2015 - 23:42

    Merci !
    Pudding Morphina
    Pudding Morphina
    FémininAge : 25Messages : 28

    le Sam 17 Jan 2015 - 9:52

    Ta PA est vraiment cool :)
    missphan
    missphan
    FémininAge : 36Messages : 156

    le Jeu 22 Jan 2015 - 9:35

    je récupère les codes xD merci
    Presley♥Cash
    Presley♥Cash
    FémininAge : 28Messages : 80

    le Mer 28 Jan 2015 - 1:12

    Merci du partage ♥
    Allison01
    Allison01
    FémininAge : 35Messages : 207

    le Sam 21 Fév 2015 - 15:19

    superbe merci
    Lux'Uriante
    Lux'Uriante
    FémininAge : 30Messages : 21

    le Ven 13 Mar 2015 - 16:16

    merkiii
    The Shiya
    The Shiya
    FémininAge : 29Messages : 77

    le Jeu 16 Avr 2015 - 16:14

    merci



    PA "fougère" en 2 versions (infobulles/transitions) - Page 2 Test10
    Gabriielle
    Gabriielle
    FémininAge : 28Messages : 42

    le Ven 15 Mai 2015 - 22:27

    Merci
    Lilith Aube
    Lilith Aube
    FémininAge : 33Messages : 498

    le Jeu 23 Juil 2015 - 18:22

    Merci!
    avatar
    Catblack
    FémininAge : 23Messages : 85

    le Sam 15 Aoû 2015 - 20:10

    merci
    Kelalin
    Kelalin
    FémininAge : 26Messages : 2075

    le Dim 16 Aoû 2015 - 22:54

    Merci beaucoup du partage ! (*^▽^*)
    Zibeline
    Zibeline
    FémininAge : 34Messages : 84

    le Dim 30 Aoû 2015 - 15:15

    :kdo: merci du partage
    Damned
    Damned
    FémininAge : 17Messages : 109

    le Dim 30 Aoû 2015 - 16:21

    Merci
    FREAKS*
    FREAKS*
    FémininAge : 24Messages : 30

    le Dim 13 Sep 2015 - 18:01

    Merci beaucoup ! :hug:
    Zoé
    Zoé
    FémininAge : 20Messages : 187

    le Ven 18 Sep 2015 - 22:05

    thank you !



    PA "fougère" en 2 versions (infobulles/transitions) - Page 2 274643signaaaa
    Liraco
    Liraco
    FémininAge : 22Messages : 21

    le Jeu 29 Oct 2015 - 14:46

    Merci ♥
    Contenu sponsorisé


      La date/heure actuelle est Dim 25 Aoû 2019 - 19:40