AccueilDernières imagesRechercherS'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.

Le Deal du moment : -50%
-50% Baskets Nike Air Huarache
Voir le deal
64.99 €

    PA "fougère" en 2 versions (infobulles/transitions)

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

    Mar 15 Juil 2014 - 22:14


    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

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

    Mar 15 Juil 2014 - 22:14


    PA fougère avec transitions


    Suite à une modification voici une seconde version, elle diffère au niveau du premier bloc de la deuxième colonne.

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

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


    Précision : Les transitions sont sur les images du staff dans la colonne du centre.

    Et le code :

    Un simple merci suffit pour voir le code.

    /!\ En cas de problème, c'est ici que ça ce passe.


    Dernière édition par A-Lice le Lun 16 Fév 2015 - 13:25, édité 1 fois

    Anonymous
    Invité

    Mar 22 Juil 2014 - 19:59

    Merci, c'est sobre *-*
    Anonymous
    Invité

    Mar 22 Juil 2014 - 21:28

    J'aime beaucoup celle-ci :)
    Kora
    Kora
    FémininAge : 22Messages : 45

    Mer 23 Juil 2014 - 1:26

    merci
    Tchii
    Tchii
    FémininAge : 38Messages : 285

    Sam 26 Juil 2014 - 14:13

    Coucou!
    Merci pour cette jolie PA.
    A trés vite.
    Tchii!
    LyN[ss]
    LyN[ss]
    FémininAge : 32Messages : 105

    Sam 26 Juil 2014 - 22:45

    Merci beaucoup =)
    Airore
    Airore
    FémininAge : 24Messages : 132

    Mer 30 Juil 2014 - 18:22

    merci !
    Lugatique
    Lugatique
    MasculinAge : 24Messages : 23

    Mar 5 Aoû 2014 - 20:37

    merci
    Illy
    Illy
    FémininAge : 24Messages : 27

    Mar 19 Aoû 2014 - 6:36

    Merci!
    Miss Tigri
    Miss Tigri
    FémininAge : 29Messages : 89

    Mer 20 Aoû 2014 - 13:26

    Simple mais géniale !
    Draztel
    Draztel
    MasculinAge : 30Messages : 6

    Jeu 21 Aoû 2014 - 8:57

    Thanks :)
    Lulucifer
    Lulucifer
    FémininAge : 28Messages : 24

    Jeu 28 Aoû 2014 - 19:21

    Sobre, épuré mais splendide. *_* Merci beaucoup pour ce chef d'oeuvre! Je me régale! ,w,
    petit lu
    petit lu
    FémininAge : 31Messages : 184

    Dim 31 Aoû 2014 - 12:05

    Merci
    Amber's
    Amber's
    FémininAge : 23Messages : 158

    Mar 2 Sep 2014 - 21:30

    Merci (:
    Leoguillem
    Leoguillem
    MasculinAge : 24Messages : 137

    Mer 3 Sep 2014 - 18:22

    thanks ! :B



    - Je signe Marabout -
    Sitahy
    Sitahy
    FémininAge : 23Messages : 19

    Jeu 4 Sep 2014 - 23:59

    Merci !



    PA "fougère" en 2 versions (infobulles/transitions) 1-56
    Margogotte
    Margogotte
    FémininAge : 29Messages : 73

    Mar 16 Sep 2014 - 17:27

    Merci beaucoup ! ^^
    Sentenza
    Sentenza
    MasculinAge : 39Messages : 95

    Mer 17 Sep 2014 - 12:35

    merci!
    Likilou
    Likilou
    MasculinAge : 30Messages : 307

    Lun 22 Sep 2014 - 15:10

    merci :)



    PA "fougère" en 2 versions (infobulles/transitions) 707828SignArthur2
    Insolence
    Insolence
    FémininAge : 31Messages : 23

    Mar 30 Sep 2014 - 17:10

    Merci!
    Riten
    Riten
    MasculinAge : 25Messages : 30

    Jeu 2 Oct 2014 - 3:48

    mERCI
    Sorako
    Sorako
    FémininAge : 26Messages : 94

    Sam 4 Oct 2014 - 18:11

    Merci elle est superbe :)
    Merwyn Arehdel
    Merwyn Arehdel
    FémininAge : 24Messages : 304

    Dim 5 Oct 2014 - 15:55

    Merci beaucoup =)



    Just want to be yours.
    Vani
    Vani
    FémininAge : 39Messages : 154

    Mer 8 Oct 2014 - 12:03

    C'est sympa tout épuré comme ça.
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 13:23