Sésame, ouvre-toi !
Suite à une demande de Blem voici une PA avec effets au passage de la souris.
Je précise que l'arrière plan gris clair correspond à mon forum.
Et le code :
HTML :
- Code:
<div class="PA_fond">
<div class="PA_guide"><div class="PA_titre">Guide</div><div class="infobulle1"><div class="PA_titre">Guide</div><p class="PA_txt1">-Règlement <br />
-Contexte<br />
-Autre...<br /></p></div></div>
<div class="PA_contexte"><div class="PA_titre">Contexte</div><div class="infobulle2"><div class="PA_titre">Contexte</div><p class="PA_txt1">Texte ici
</p></div></div>
<div class="PA_partenaire"><div class="PA_titre">Partoche</div><div class="infobulle3"><div class="PA_titre">Partoche</div><div class="PA_img"><img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> </div></div></div>
<div class="PA_predefini"><div class="PA_titre">Predef</div><div class="infobulle4"><div class="PA_titre">Predef</div><div class="PA_img"><img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> </div></div></div>
<div class="PA_annonce"><div class="PA_titre">Annonce</div><div class="infobulle5"><div class="PA_titre">Annonce</div><p class="PA_txt3">-Machin a gagné le LPA X<br />
-Truc a participé à chose W<br /></p><a href="http://www.never-utopia.com" class="PA_credit">A-Lice | Never-Utopia</a></div></div>
<div class="PA_new"><div class="PA_titre">News</div><div class="infobulle6"><div class="PA_titre">News</div><p class="PA_txt2">00/00/00 : Blablabla<br />
00/00/00 : Blablabla<br /></p></div></div>
<div class="PA_staff"><div class="PA_titre">Staff</div><div class="infobulle7"><div class="PA_titre">Staff</div><div class="PA_img"><img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> <br /><img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> <img src="LIEN IMAGE" /> </div></div></div>
</div>
CSS :
- Code:
.PA_fond {
position: relative;
width: 685px;
height: 350px;
margin: auto;
background: white;
font-size: 14px;
}
.PA_guide {
position: absolute;
width: 159px;
height: 259px;
padding: 3px;
background: silver;
left: 5px;
text-align: justify;
}
.PA_guide .infobulle1 {
position: absolute;
top: 0px;
left: 0px;
width: 159px;
height: 259px;
opacity: 0;
visibility: hidden;
transition: all 1.5s;
background: silver;
padding: 3px;
text-align: justify;
}
.PA_guide:hover .infobulle1 {
opacity: 1;
visibility: visible;
transition: all 1.5s;
}
.PA_contexte {
position: absolute;
width: 159px;
height: 259px;
padding: 3px;
background: silver;
left: 175px;
text-align: justify;
}
.PA_contexte .infobulle2 {
position: absolute;
top: 0px;
left: 0px;
width: 159px;
height: 259px;
padding: 3px;
opacity: 0;
visibility: hidden;
transition: all 1.5s;
background: silver;
text-align: justify;
}
.PA_contexte:hover .infobulle2 {
opacity: 1;
visibility: visible;
transition: all 1.5s;
}
.PA_partenaire {
position: absolute;
width: 329px;
height: 74px;
padding: 3px;
background: silver;
left: 345px;
text-align: justify;
}
.PA_partenaire .infobulle3 {
position: absolute;
top: 0px;
left: 0px;
width: 329px;
height: 74px;
padding: 3px;
opacity: 0;
visibility: hidden;
transition: all 1.5s;
background: silver;
text-align: justify;
}
.PA_partenaire:hover .infobulle3 {
opacity: 1;
visibility: visible;
transition: all 1.5s;
}
.PA_predefini {
position: absolute;
width: 329px;
height: 74px;
padding: 3px;
background: silver;
top: 270px;
left: 5px;
text-align: justify;
}
.PA_predefini .infobulle4 {
position: absolute;
top: 0px;
left: 0px;
width: 329px;
height: 74px;
padding: 3px;
opacity: 0;
visibility: hidden;
transition: all 1.5s;
background: silver;
text-align: justify;
}
.PA_predefini:hover .infobulle4 {
opacity: 1;
visibility: visible;
transition: all 1.5s;
}
.PA_annonce {
position: absolute;
width: 159px;
height: 259px;
padding: 3px;
background: silver;
left: 345px;
top: 85px;
text-align: justify;
}
.PA_annonce .infobulle5 {
position: absolute;
top: 0px;
left: 0px;
width: 159px;
height: 259px;
padding: 3px;
opacity: 0;
visibility: hidden;
transition: all 1.5s;
background: silver;
text-align: justify;
}
.PA_annonce:hover .infobulle5 {
opacity: 1;
visibility: visible;
transition: all 1.5s;
}
.PA_new {
position: absolute;
width: 159px;
height: 124px;
padding: 3px;
background: silver;
left: 515px;
top: 85px;
text-align: justify;
}
.PA_new .infobulle6 {
position: absolute;
top: 0px;
left: 0px;
width: 159px;
height: 124px;
padding: 3px;
opacity: 0;
visibility: hidden;
transition: all 1.5s;
background: silver;
text-align: justify;
}
.PA_new:hover .infobulle6 {
opacity: 1;
visibility: visible;
transition: all 1.5s;
}
.PA_staff {
position: absolute;
width: 159px;
height: 124px;
padding: 3px;
background: silver;
left: 515px;
top: 220px;
text-align: justify;
}
.PA_staff .infobulle7 {
position: absolute;
top: 0px;
left: 0px;
width: 159px;
height: 124px;
padding: 3px;
opacity: 0;
visibility: hidden;
transition: all 1.5s;
background: silver;
text-align: justify;
}
.PA_staff:hover .infobulle7 {
opacity: 1;
visibility: visible;
transition: all 1.5s;
}
.PA_titre {
text-indent: 20px;
font-size: 25px;
position: relative;
z-index: 20;
}
.PA_img {
margin-top: -5px;
position: relative;
z-index: 10;
}
.PA_txt1 {
overflow: auto;
height: 209px;
}
.PA_txt2 {
overflow: auto;
height: 74px;
}
.PA_txt3 {
overflow: auto;
height: 190px;
}
a.PA_credit {
text-decoration: none;
font-size: 12px;
color: white;
display: block;
text-align: center;
}
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.
