AccueilRechercherS'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

    Elelia
    Elelia
    FémininAge : 24Messages : 45

    le Jeu 12 Nov 2015 - 8:31

    Super cette PA, ça devrait nous aider pour la maj de notre forum, merci beaucoup !
    Lizbeth
    Lizbeth
    FémininAge : 22Messages : 164

    le Mar 26 Jan 2016 - 15:38

    Merci beaucoup ! :hug:
    Kinst.MP
    Kinst.MP
    FémininAge : 20Messages : 53

    le Ven 12 Fév 2016 - 23:21

    merci <3
    NanoiHime
    NanoiHime
    FémininAge : 21Messages : 566

    le Lun 9 Mai 2016 - 22:25

    mercii



    Gladou
    Gladou
    MasculinAge : 25Messages : 114

    le Ven 20 Mai 2016 - 23:03

    merci Wink



    PA "fougère" en 2 versions (infobulles/transitions) - Page 3 Sans_t14
    Furudebusu
    Furudebusu
    FémininAge : 22Messages : 25

    le Mer 8 Juin 2016 - 22:59

    Merci !
    Sukinette
    Sukinette
    FémininAge : 34Messages : 1198

    le Sam 26 Nov 2016 - 16:27

    Merci ♥



      Merci pour les avatars Clémentine & Narakye ♥♥
    Onizukaa
    Onizukaa
    FémininAge : 20Messages : 32

    le Dim 23 Avr 2017 - 20:06

    Merci beaucoup !
    Karthus
    Karthus
    FémininAge : 18Messages : 13

    le Mar 21 Nov 2017 - 19:27

    Merci c'est très jolie !
    Shide
    Shide
    FémininAge : 30Messages : 60

    le Lun 7 Mai 2018 - 16:16

    merçi
    Abby Reever
    Abby Reever
    FémininAge : 27Messages : 145

    le Dim 14 Avr 2019 - 18:20

    La deuxième version est super joli ! J'adore ! Bravo à toi ! Very Happy
    Contenu sponsorisé


      La date/heure actuelle est Ven 6 Déc 2019 - 1:58