PA grise simple avec infobulles

Rappel du premier message :


Voici une PA grise avec plusieurs effets: un défilement vers la gauche de l'image recouvrant le texte central, et des infobulles lorsqu'on survole les images du staff. Tous les liens sont à compléter, ainsi que les images, et éventuellement la police des titres. Les endroits en gris foncé sont destinés à accueillir des images; la grande fait 226px de haut et 221 de large, et les petites images du staff 30x30 et s'arrondissent toutes seules (=
Cette PA est également adaptable en largeur, au niveau de la partie à l'extrême droite qui joue le rôle de "tampon" en s'adaptant.

Spoiler:

Et pour vous donner une idée de ce que ça donne une fois tous les images / liens ajoutés (image par Screen, merci à elle !) https://i.servimg.com/u/f39/18/98/10/80/quand_12.jpg




Pour commencer, voici la structure à remplir. A priori, tous les endroits où il manque une information sont très visibles. Il faut coller ce code dans votre panneau d'admin -> Affichage -> Page d'accueil -> Généralités.

Code:

<table id="PA" style="background-image: url(ADRESSE DE VOTRE IMAGE DE FOND);">
  <tbody>
    <tr>
      <td id="case1">
        <div id="navigation">
          <span class="titrePA">Barre de Navigation</span><br/>
          <a href="ADRESSE DU LIEN" class="lienfonce">Lien 1</a><br />
          <a href="ADRESSE DU LIEN" class="lienclair">Lien 2</a><br />
          <a href="ADRESSE DU LIEN" class="lienfonce">Lien 3</a><br />
          <a href="ADRESSE DU LIEN" class="lienclair">Lien 4</a><br />
          <a href="ADRESSE DU LIEN" class="lienfonce">Lien 5</a><br />
          <a href="ADRESSE DU LIEN" class="lienclair">Lien 6</a><br />
          <a href="ADRESSE DU LIEN" class="lienfonce">Lien 7</a><br />
        </div>
        <div id="annonces">
          <span class="titrePA">Annonces</span><br/>
          <em>00.00.2014</em> Quare hoc quidem praeceptum, cuiuscumque est, ad tollendam amicitiam valet
          <hr />
          <em>00.00.2014</em> Quare hoc quidem praeceptum, cuiuscumque est, ad tollendam amicitiam valet
          <hr />
          <em>00.00.2014</em> Quare hoc quidem praeceptum, cuiuscumque est, ad tollendam amicitiam valet
          <hr />
          <em>00.00.2014</em> Quare hoc quidem praeceptum, cuiuscumque est, ad tollendam amicitiam valet
          <hr />
        </div>
      </td>
      <td id="case2">
        <div id="defilant">
          <span class="titrePA">"Project Revival"</span><br/>
          <em>PROJECT REVIVAL, selon Hassan</em>Utque proeliorum periti rectores primo catervas densas opponunt et fortes, deinde leves armaturas, post iaculatores ultimasque subsidiales acies, si fors adegerit, iuvaturas, ita praepositis urbanae familiae suspensae digerentibus sollicite, quos insignes faciunt virgae dexteris aptatae velut tessera data castrensi iuxta vehiculi frontem omne textrinum incedit: huic atratum coquinae iungitur ministerium, dein totum promiscue servitium cum otiosis plebeiis de vicinitate coniunctis: postrema multitudo spadonum a senibus in pueros desinens, obluridi distortaque lineamentorum conpage deformes, ut quaqua incesserit quisquam cernens mutilorum hominum agmina detestetur memoriam Samiramidis reginae illius veteris, quae teneros mares castravit omnium prima velut vim iniectans naturae, eandemque ab instituto cursu retorquens, quae inter ipsa oriundi crepundia per primigenios seminis fontes tacita quodam modo lege vias propagandae posteritatis ostendit.
        </div>
        <div id="imagePA" style="background-image:url(ADRESSE DE VOTRE IMAGE)"></div>
      </td>
      <td rowspan="2">
        <div class="staffPA">
          <img src="ADRESSE DE VOTRE IMAGE" />
          <div class="infostaff" style="background-image:url(ADRESSE DE VOTRE IMAGE); position: absolute; top: -5px; left:40px;";><em>Autriche</em><br />Admin<br /<br /><a href="ADRESSE DU LIEN MP">MP</a><a href="ADRESSE DU LIEN PROFIL">PROFIL</a></div>
        </div> 
        <div class="staffPA">
          <img src="ADRESSE DE VOTRE IMAGE" />
          <div class="infostaff" style="background-image:url(ADRESSE DE VOTRE IMAGE)";><em>Autriche</em><br />Admin<br /<br /><a href="ADRESSE DU LIEN MP">MP</a><a href="ADRESSE DU LIEN PROFIL">PROFIL</a></div>
        </div>
        <div class="staffPA">
          <img src="ADRESSE DE VOTRE IMAGE" />
          <div class="infostaff" style="background-image:url(ADRESSE DE VOTRE IMAGE)";><em>Autriche</em><br />Admin<br /<br /><a href="ADRESSE DU LIEN MP">MP</a><a href="ADRESSE DU LIEN PROFIL">PROFIL</a></div>
        </div>
        <div class="staffPA">
          <img src="ADRESSE DE VOTRE IMAGE" />
          <div class="infostaff" style="background-image:url(ADRESSE DE VOTRE IMAGE)";><em>Autriche</em><br />Admin<br /<br /><a href="ADRESSE DU LIEN MP">MP</a><a href="ADRESSE DU LIEN PROFIL">PROFIL</a></div>
        </div>
        <div class="staffPA">
          <img src="ADRESSE DE VOTRE IMAGE" />
          <div class="infostaff" style="background-image:url(ADRESSE DE VOTRE IMAGE)";><em>Autriche</em><br />Admin<br /<br /><a href="ADRESSE DU LIEN MP">MP</a><a href="ADRESSE DU LIEN PROFIL">PROFIL</a></div>
        </div>
        <div class="staffPA">
          <img src="ADRESSE DE VOTRE IMAGE" />
          <div class="infostaff" style="background-image:url(ADRESSE DE VOTRE IMAGE)";><em>Autriche</em><br />Admin<br /<br /><a href="ADRESSE DU LIEN MP">MP</a><a href="ADRESSE DU LIEN PROFIL">PROFIL</a></div>
        </div>
        <div class="staffPA">
          <img src="ADRESSE DE VOTRE IMAGE" />
          <div class="infostaff" style="background-image:url(ADRESSE DE VOTRE IMAGE); position: absolute; top: -35px; left:40px;";><em>Autriche</em><br />Admin<br /<br /><a href="ADRESSE DU LIEN MP">MP</a><a href="ADRESSE DU LIEN PROFIL">PROFIL</a></div>
        </div>
      </td>
      <td id="case4" rowspan="2">
        <span class="titrePA">Contexte</span>
        <div id="contextePA">Utque proeliorum periti rectores primo catervas densas opponunt et fortes, deinde leves armaturas, post iaculatores ultimasque subsidiales acies, si fors adegerit, iuvaturas, ita praepositis urbanae familiae suspensae digerentibus sollicite, quos insignes faciunt virgae dexteris aptatae velut tessera data castrensi iuxta vehiculi frontem omne textrinum incedit: huic atratum coquinae iungitur ministerium, dein totum promiscue servitium cum otiosis plebeiis de vicinitate coniunctis: postrema multitudo spadonum a senibus in pueros desinens, obluridi distortaque lineamentorum conpage deformes, ut quaqua incesserit quisquam cernens mutilorum hominum agmina detestetur memoriam Samiramidis reginae illius veteris, quae teneros mares castravit omnium prima velut vim iniectans naturae, eandemque ab
        </div>
        <center>
        <span class="titrePA">Votez pour nous !</span><br/>
        <a href="ADRESSE DU LIEN"><img src="ADRESSE DE VOTRE IMAGE DE LAPIN°°" /></a><a href="ADRESSE DU LIEN"><img src="ADRESSE DE VOTRE IMAGE DE LAPIN°°" /></a><a href="ADRESSE DU LIEN"><img src="ADRESSE DE VOTRE IMAGE DE LAPIN°°" /></a>
        </center>
      </td>
      <td id="case5">
      </td>
    </tr>
    <tr id="footerPA">
      <td colspan="2">
        Tous droits réservés. Forum optimisé pour Chrome. <span style="font-size: 7px; color: gray;">Never-Utopia</span>
      </td>
    </tr>
  </tbody>
</table>

Ok. Si vous regardez dès à présent ce que ça donne, vous allez tomber des nues, le résultat est vraiment laid. Mais pas de panique, il manque encore le CSS, qui va donner des couleurs et une forme plus convenable à tout ceci. (vous trouverez le CSS dans Affichage->Couleurs -> feuille de style CSS)
Ajoutez-y ce code, puis validez

Code:


/*PA par Alu' pour Never-Utopia*/

#PA {background: #E0E0E0;font-size:10px; background-position: right top;}
.titrePA{font-size:16px; font-family: Georgia, cursive; color:#006699;}
#case4{vertical-align:top;}
#case5{width:600px;}


#navigation {width:169px; height:105px;}
#navigation a{text-decoration: none; color: #006699;}

.lienfonce {
  display:inline-block;
  background:#BDBDBD;
  width:100%;
  text-indent: 7px;
  }
.lienclair{
  display:inline-block;
  background:#D8D8D8;
  width:100%;
  text-indent: 7px;
  }

#annonces {
  height:111px;
  width: 159px;
  overflow:auto;
  padding:5px;
  font-family: cursive;
  font-size: 9px;
  background-color: #DADADA;
  }

#annonces em, #defilant em {color:#006699;}

#case2{
  position:relative;
  width:221px;
  height:226px;
  overflow:hidden;
  padding:0;
}
#defilant{
  position:relative;
  width:211px;
  height:216px;
  margin-top: -3px;
  overflow: auto;
  padding:5px;
  background-color: #DADADA;
}
#imagePA{
  position: absolute;
  top:0;
  left: 0;
  width:221px;
  height:226px;
  background-color:gray;
  -moz-transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

#case2:hover > #imagePA{margin-left: -221px;}

#contextePA{
  width: 183px;
  height: 110px;
  padding: 5px;
  overflow: auto;
  margin-bottom: 15px;
  background-color: #DADADA;
  }

.infostaff{
  position:absolute;
  top:-20;
  left:40px;
  opacity:0;
  visibility: hidden;
  height: 50px;
  width: 130px;
  background:#DADADA;
  background-position: left top;
  text-align: center;
  padding:10px;
  text-decoration: italic;
  -moz-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -moz-box-shadow: 0px 0px 2px 0px #656565;
  -webkit-box-shadow: 0px 0px 2px 0px #656565;
  -o-box-shadow: 0px 0px 2px 0px #656565;
  box-shadow: 0px 0px 2px 0px #656565;
  filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=NaN, Strength=2);
  }

.staffPA:hover > .infostaff{opacity:1; visibility: visible;}
.infostaff em{color: #870808; font-size: 14px;}
.infostaff a{color: black; text-decoration: none;}

.staffPA {
  position:relative; 
  height: 30px;
  width: 30px;
  margin:5px;
  background-color: grey;
  border-radius: 50%;
}
.staffPA img{border-radius: 50%; overflow:hidden; height: 30px; width: 30px;}
#footerPA {font-variant:small-caps; font-size: 9px; color: grey;}

Et voilà, c'est terminé ! Laissez le crédit s'il vous plaît, il ne prend que peu de place (=

très jolie pa, merci

Très jolie PA !

Merci

Miciiiii

Merci

Merci

Merci :)

Sympa

Vraiment cool ^-^ merci du partage *^*

Merci :)

Merci, ça fait un moment que je cherche une PA simple de ce style !

Merci :)

Merci!

Merci

Elle est génial merci!

Merci !

merci =)

merci

merci

Merci!

un grand merci