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.



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;
}

Merci !

Cette PA est simple mais le design est très jolie, et ça va vers l'essentiel ! Allier beauté et utilité, génial !

merci

Merci beaucoup :)

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

mercii

Merci =)

Merci ^-^

Merci

Merci !!

Merci !

Ta PA est vraiment cool :)

je récupère les codes xD merci

Merci du partage ♥

superbe merci

merkiii

merci

Merci

Merci!

merci

Merci beaucoup du partage ! (*^▽^*)

merci du partage

Merci

Merci beaucoup !

thank you !

Merci ♥