PA Casino
Suite à une demande de Joshua023 voici une PA Casino.
Je précise que l'arrière plan vert correspond à mon forum.
HTML & CSS ~ Voici donc un aperçu : www
Et le code :
HTML :
- Code:
<br/><div id="PA_fond"><div class="PA_titre">Bienvenue dans le casino, {USERNAME}</div>
<div class="pouah"><div class="bloc1 PA_contexte">
Contexte
</div></div> <div class="pouah"><div class="bloc1 PA_staff">
<div class="staff"><img src="http://img15.hostingpics.net/pics/491685AvatarKProject.png" alt="" class="PA_img_staff" /><div class="staff_infobulle"><img src="http://img15.hostingpics.net/pics/491685AvatarKProject.png" class="PA_img_staff2" /><br/>Profil - MP</div>NOM DU STAFF</div> <div class="staff"><img src="http://img15.hostingpics.net/pics/491685AvatarKProject.png" alt="" class="PA_img_staff" /><div class="staff_infobulle"><img src="http://img15.hostingpics.net/pics/491685AvatarKProject.png" class="PA_img_staff2" /><br/>Profil - MP</div>NOM DU STAFF</div> <div class="staff"><img src="http://img15.hostingpics.net/pics/491685AvatarKProject.png" alt="" class="PA_img_staff" /><div class="staff_infobulle"><img src="http://img15.hostingpics.net/pics/491685AvatarKProject.png" class="PA_img_staff2" /><br/>Profil - MP</div>NOM DU STAFF</div> <div class="staff"><img src="http://img15.hostingpics.net/pics/491685AvatarKProject.png" alt="" class="PA_img_staff" /><div class="staff_infobulle"><img src="http://img15.hostingpics.net/pics/491685AvatarKProject.png" class="PA_img_staff2" /><br/>Profil - MP</div>NOM DU STAFF</div>
</div></div>
<br/><br/>
<div class="pouah"><div class="bloc2 PA_image">
<div class="PA_img" style="margin-top:-10px; margin-left:-10px;"><div class="PA_img2">Texte derrière l'image.
</div><img src="http://img4.hostingpics.net/pics/824684PokerFace600368706.jpg" alt="" /></div>
</div></div> <div class="pouah"><div class="bloc2 PA_predef">
<marquee scrollamount="4" onMouseOver="this.stop();" onMouseOut="this.start();"><a href="LIEN ICI DU PREDEF"><img src="http://img11.hostingpics.net/pics/5065735050.png" alt="" /></a> <a href="LIEN ICI DU PREDEF"><img src="http://img11.hostingpics.net/pics/5065735050.png" alt="" /></a> <a href="LIEN ICI DU PREDEF"><img src="http://img11.hostingpics.net/pics/5065735050.png" alt="" /></a> <a href="LIEN ICI DU PREDEF"><img src="http://img11.hostingpics.net/pics/5065735050.png" alt="" /></a> <br/><br/><a href="LIEN ICI DU PREDEF"><img src="http://img11.hostingpics.net/pics/5065735050.png" alt="" /></a> <a href="LIEN ICI DU PREDEF"><img src="http://img11.hostingpics.net/pics/5065735050.png" alt="" /></a> <a href="LIEN ICI DU PREDEF"><img src="http://img11.hostingpics.net/pics/5065735050.png" alt="" /></a> <a href="LIEN ICI DU PREDEF"><img src="http://img11.hostingpics.net/pics/5065735050.png" alt="" /></a> </marquee>
</div></div>
<br/><br/>
<div class="pouah"><div class="bloc3 PA_partenaire">
<a href="LIEN DU PARTENAIRE"><img src="http://img4.hostingpics.net/pics/6550819941.png" alt="" /></<a> <a href="LIEN DU PARTENAIRE"><img src="http://img4.hostingpics.net/pics/6550819941.png" alt="" /></<a> <a href="LIEN DU PARTENAIRE"><img src="http://img4.hostingpics.net/pics/6550819941.png" alt="" /></<a><br/>
<a href="LIEN DU SUJET">Devenir partenaire ?</a> - <a href="LIEN SU SUJET">Nos partenaires</a>
</div></div> <div class="pouah"><div class="bloc3 PA_liens">
<a href="LIEN ICI">Liens utiles</a><br/><a href="LIEN ICI">Liens utiles</a><br/><a href="LIEN ICI">Liens utiles</a><br/><a href="LIEN ICI">Liens utiles</a><br/><a href="LIEN ICI">Liens utiles</a><br/>
</div></div> <div class="pouah"><div class="bloc3 PA_crédit">
<img src="http://img4.hostingpics.net/pics/6550819941.png" alt="" /><br/>Crédits
</div></div>
<br/><a href="http://www.never-utopia.com/" style="text-decoration:none; font-size:11px; color:white; text-align:center; display:block;">© A-Lice</a><br/>
</div>
CSS :
- Code:
.pouah {
display:inline-block;
margin-right:10px;
}
.bloc1 {
height:150px;
padding:10px;
}
.bloc2 {
height:120px;
padding:10px;
}
.bloc3 {
height:55px;
padding:10px;
}
.staff {
position: relative;
height: 144px;
width: 60px;
overflow: visible;
display:inline-block;
background:white;
padding:3px;
font-size:11px;
color:#5A0D17;
}
.staff .staff_infobulle {
position: absolute;
top: 70px;
left: -60px;
width: 120px;
height: 200px;
background-color: #C1BFBF;
opacity: 0;
visibility: hidden;
font-size:16px;
}
.staff:hover .staff_infobulle {
opacity: 1;
visibility: visible;
z-index: 99;
}
div.PA_img {
width:300px;
height:140px;
overflow:hidden;
display:inline-block;
}
div.PA_img2 {
width:280px;
height:120px;
padding:10px;
overflow:auto;
position:relative;
color:white;
text-align:justify;
}
.PA_img img {
width:300px;
height:140px;
position: relative;
bottom: 140px;
transition: 0.5s;
}
.PA_img:hover img {
bottom:280px;
transition: 0.5s;
}
#PA_fond {
background:#ADA1A1;
width:700px;
color:white;
}
.PA_titre {
font-size:30px;
text-align:center;
padding:10px;
color:#5A0D17;
}
.PA_contexte {
background:#1C644C;
width:320px;
overflow:auto;
text-align:justify;
}
.PA_staff {
background:#5A0D17;
width:280px;
position:relative;
top:-15px;
}
.PA_img_staff {
width:55px;
height:120px;
}
.PA_img_staff2 {
width:120px;
height:180px;
}
.PA_image {
background:#5A0D17;
width:280px;
}
.PA_predef {
background:#1C644C;
width:320px;
position:relative;
top:-10px;
}
.PA_partenaire {
background:#5A0D17;
width:320px;
font-size:11px;
text-align:center;
position:relative;
top:-12px;
}
.PA_liens {
background:#1C644C;
width:130px;
overflow:auto;
}
.PA_crédit {
background:#5A0D17;
width:110px;
position:relative;
top:-12px;
}
Précision : La classe "pouah" correspond à l'alignement de deux blocs sur une même ligne.
/!\ En cas de problème, c'est ici que ça ce passe.
Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
Vos commentaires et remerciements sont toujours bienvenus ^^
Dernière édition par A-Lice le Lun 16 Fév 2015 - 13:16, édité 1 fois
