Page d'Accueil simple en 3 colonnes avec infobulles

Suite à une demande d'Armie voici une PA simple en 3 colonnes avec infobulles.

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



Et le code :
HTML :

Code:

<link href='http://fonts.googleapis.com/css?family=Merienda:700' rel='stylesheet' type='text/css'>
<div class="largeurPA"><div class="PA_titre">BIENVENUE SUR "nom du forum"</div>   
<div class="cadre_fond">
<table><tr><td><div class="colonne01"><span class="contexte_titre">Contexte</span><div class="contexte_corps">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non tortor aliquam elit vehicula consequat ac non mauris. Proin aliquam tincidunt magna, et pulvinar purus pellentesque eleifend. Etiam vitae libero mollis, tincidunt libero at, ornare lacus. Mauris id lorem nibh. Donec bibendum ultrices egestas. Maecenas vulputate tempor nibh. Ut cursus mauris a ante venenatis, gravida rhoncus ante pretium.

Etiam vel mi velit. Cras neque tellus, gravida nec sollicitudin quis, pellentesque adipiscing purus. Aliquam eget risus sed justo dapibus porttitor ut eu velit. Sed commodo pretium elementum. Maecenas cursus adipiscing malesuada. Ut lacinia nulla vitae mauris facilisis mollis. Nam sodales tellus sit amet nisl commodo accumsan. Phasellus tincidunt purus non quam pulvinar, id dictum eros blandit. Praesent nisi diam, blandit a semper non, tincidunt sit amet turpis. Cras id nisi porta, ultrices eros vel, vehicula elit. Integer ac elementum nibh. Morbi purus sapien, gravida in mattis a, iaculis at neque. Nunc vestibulum sapien ut condimentum suscipit. Nam vulputate enim ac dolor pretium porta.

</div><br/><div class="topsite">
Top-sites
<br/> <a href="LIEN DU TOP SITE"><img src="http://oi58.tinypic.com/30moi9w.jpg" alt="" /></a> <a href="LIEN DU TOP SITE"><img src="http://oi58.tinypic.com/30moi9w.jpg" alt="" /></a> <a href="LIEN DU TOP SITE"><img src="http://oi58.tinypic.com/30moi9w.jpg" alt="" /></a> <a href="LIEN DU TOP SITE"><img src="http://oi58.tinypic.com/30moi9w.jpg" alt="" /></a></div></div></td><td><div class="bloc_staff"><div class="staff"><img src="http://oi57.tinypic.com/wv5ts7.jpg" alt="" /><div class="infobulle01">Nom Prénom<br/>rang</div></div><div class="staff"><img src="http://oi57.tinypic.com/wv5ts7.jpg" alt="" /><div class="infobulle01">Nom Prénom<br/>rang</div></div></div><div class="case_annonce"><span class="annonce_titre">Annonces</span>
<br/><span class="annonce_corps">
<a href="LIEN DE L'ANNONCE">00/00/00</a> : Lorem ipsum
</span></div>
<span class="lien_annonce"><a href="LIEN DU SUJET">Contexte</a>, <a href="LIEN DU SUJET">règlements,</a> <a href="LIEN DU SUJET">scénarios</a><br/><a href="LIEN DU SUJET">faq</a>, <a href="LIEN DU SUJET">invités</a>, <a href="LIEN DU SUJET">avatars</a>, <a href="LIEN DU SUJET">pouvoirs</a></span>
<div class="crédit_A-Lice"><a href="http://www.never-utopia.com/" style="text-decoration:none;">© By A-Lice sur Never-Utopia</a></div></td><td><div class="colonne02"><div class="partenaire">
Partenaires <br/><br/>
<marquee scrollamount="4" onMouseOver="this.stop();" onMouseOut="this.start();"><a href="LIEN DU PARTENAIRE"><img src="http://img11.hostingpics.net/pics/835225rouge.png" alt="Partenaires" /></a> <a href="LIEN DU PARTENAIRE"><img src="http://img11.hostingpics.net/pics/835225rouge.png" alt="Partenaires" /></a> <a href="LIEN DU PARTENAIRE"><img src="http://img11.hostingpics.net/pics/835225rouge.png" alt="Partenaires" /></a> <br />
<a href="LIEN DU PARTENAIRE"><img src="http://img11.hostingpics.net/pics/835225rouge.png" alt="Partenaires" /></a> <a href="LIEN DU PARTENAIRE"><img src="http://img11.hostingpics.net/pics/835225rouge.png" alt="Partenaires" /></a> <a href="LIEN DU PARTENAIRE"><img src="http://img11.hostingpics.net/pics/835225rouge.png" alt="Partenaires" /></a> </marquee>
</div><br /><div class="PV_case">
Postes vacants <br/><br/>
<div class="pv"><img src="http://oi58.tinypic.com/2hocitz.jpg" alt="" /><div class="infobulle02"><a href="LIEN DU PV"><a href="LIEN DU PV">Nom Prénom</a><br/>description</div></div><div class="pv"><img src="http://oi58.tinypic.com/2hocitz.jpg" alt="" /><div class="infobulle02"><a href="LIEN DU PV">Nom Prénom</a><br/>description</div></div><div class="pv"><img src="http://oi58.tinypic.com/2hocitz.jpg" alt="" /><div class="infobulle02"><a href="LIEN DU PV">Nom Prénom</a><br/>description</div></div><div class="pv"><img src="http://oi58.tinypic.com/2hocitz.jpg" alt="" /><div class="infobulle02"><a href="LIEN DU PV">Nom Prénom</a><br/>description</div></div><br/><br/><div class="pv"><img src="http://oi58.tinypic.com/2hocitz.jpg" alt="" /><div class="infobulle02"><a href="LIEN DU PV">Nom Prénom</a><br/>description</div></div><div class="pv"><img src="http://oi58.tinypic.com/2hocitz.jpg" alt="" /><div class="infobulle02"><a href="LIEN DU PV">Nom Prénom</a><br/>description</div></div><div class="pv"><img src="http://oi58.tinypic.com/2hocitz.jpg" alt="" /><div class="infobulle02"><a href="LIEN DU PV">Nom Prénom</a><br/>description</div></div><div class="pv"><img src="http://oi58.tinypic.com/2hocitz.jpg" alt="" /><div class="infobulle02"><a href="LIEN DU PV">Nom Prénom</a><br/>description</div></div><br/><br/><div class="pv"><img src="http://oi58.tinypic.com/2hocitz.jpg" alt="" /><div class="infobulle02"><a href="LIEN DU PV">Nom Prénom</a><br/>description</div></div><div class="pv"><img src="http://oi58.tinypic.com/2hocitz.jpg" alt="" /><div class="infobulle02"><a href="LIEN DU PV">Nom Prénom</a><br/>description</div></div><div class="pv"><img src="http://oi58.tinypic.com/2hocitz.jpg" alt="" /><div class="infobulle02"><a href="LIEN DU PV">Nom Prénom</a><br/>description</div></div><div class="pv"><img src="http://oi58.tinypic.com/2hocitz.jpg" alt="" /><div class="infobulle02"><a href="LIEN DU PV">Nom Prénom</a><br/>description</div></div>
</div></div></div></td></tr></table>
</div>

CSS :

Code:

/*PA Armie*/
.PA_titre {
padding:5px;
width:790px;
background-color:#f2f2f2;
font-size:25px;
float:top;
color:#134e7b;
text-shadow:2px 2px 0px white;
text-align:center;
font-family: 'Merienda', cursive;
}

.cadre_fond {
width:786px;
padding:5px;
border-top:5px solid darkblue;
border-bottom:5px solid darkblue;
border-left:2px solid darkblue;
border-right:2px solid darkblue;
background-color:lightcyan;
margin:auto;
}

.colonne01 {
width:240px;
margin-left:-15px;
border:2px solid darkblue;
background-color:#f2f2f2;
padding:5px;
display:inline-block;
}

.contexte_titre {
font-size:20px;
color:midnightblue;
width:100%;
font-family: 'Merienda', cursive;
}

.contexte_corps {
width:100%;
height:346px;
overflow:auto;
color:gray;
text-align:justify;
font-size:12px;
}

.topsite {
width:100%;
height:80px;
font-size:20px;
color:midnightblue;
font-family: 'Merienda', cursive;
}

.case_annonce {
width:260px;
height:200px;
border:2px solid darkblue;
overflow:auto;
background-color:#f2f2f2;
display:inline-block;
padding:5px;
}

.annonce_titre {
font-size:20px;
color:midnightblue;
font-family: 'Merienda', cursive;
}

.annonce_corps {
color:gray;
font-size:14px;
width:100%;
}

.lien_annonce {
display:block;
padding-top:20px;
padding-bottom:20px;
text-align:center;
font-size:17px;
}

.crédit_A-Lice {
float:bottom;
font-size:11px;
text-align:center;
}

.colonne02 {
width:220px;
display:inline-block;
}

.partenaire {
width:100%;
border:2px solid darkblue;
background-color:#f2f2f2;
padding:5px;
font-size:20px;
color:midnightblue;
height:175px;
font-family: 'Merienda', cursive;
}

.PV_case {
width:100%;
border:2px solid darkblue;
background-color:#f2f2f2;
padding:5px;
font-size:20px;
color:midnightblue;
height:270px;
font-family: 'Merienda', cursive;
}

.largeurPA {
width:800px;
}

.bloc_staff {
width:240px;
margin:auto;
}

.staff {
display:inline-block;
position: relative;
height: 75px;
width: 75px;
overflow: visible;
margin-top: -30px;
margin-left: 28px;
margin-bottom: 40px;
border: 2px solid darkblue;
}

.staff .infobulle01 {
position: absolute;
width: 80px;
height: 30px;
padding: 5px;
top: 50px;
left: -20px;
border-radius: 15px;
border: black 1px solid;
color: black;
text-align: center;
font-size: 12px;
opacity: 0;
visibility: hidden;
background-color: #f2f2f2;
}

.staff:hover .infobulle01 {
opacity: 1;
visibility: visible;
}

.pv {
display:inline-block;
position: relative;
height: 60px;
width: 40px;
overflow: visible;
margin-left: 9px;
margin-top: -12px;
border: 2px solid darkblue;
}

.pv .infobulle02 {
position: absolute;
width: 80px;
height: 30px;
padding: 5px;
top: 35px;
left: -50px;
border-radius: 15px;
border: black 1px solid;
color: black;
text-align: center;
font-family: none;
font-size: 12px;
opacity: 0;
visibility: hidden;
background-color: #f2f2f2;
}

.pv:hover .infobulle02 {
opacity: 1;
visibility: visible;
}

/*fin PA Armie*/

Thanks =)

Thanks :)

merci

Merci

Merci !!

Merci *-*

Merci ! ^^

Très jolie, merci :)

Merci :)

Génial, merci !

Merci

Merci

Merci :) !

Très jolie code

Merci du partage!

Merci <3

Merci! \o/

merci :)

Oh merci *-*

Tout simple et efficace ! Merci ^^

Mercii

Merci

merci!

merci