Rappel du premier message :

PA Casino

Suite à une demande de Joshua023 voici une PA Casino.

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



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.

Jolie :)

merci !

Merci beaucoup

Marchiiii :)

mercii

Merci!^^

Merci beaucoup !!

Icerm ruop el egatrap.

Merci à toi ;3

merci du partage !

merci !

Merci

Merci x3

Merci!

jolie

Merci pour ce code :)

Merci n.n

Merci

Merci du partage

merciiiii

Merci pour le partage !

Merci

merci !

merci <3