PA aérée, simple et en trois colonnes

Code:

<div class="fond_PA">
 
<div class="titre_PA">
 <span style="color: #A55A3A;"> ♛ </span> Bienvenue sur FORUM
</div>
 
<center>
 
<table>
 
<tbody>
 
<tr>
 
<td>
 
<center>
 
<div class="titre_bloc">
 Navigation
</div><br /><a href="http://ombra.purforum.com/t2-reglement" style="color: #A55A3A !important;">Règlement</a><br /><a href="http://ombra.purforum.com/t3-mythe" style="color: #A55A3A !important;">Contexte</a><br /><a href="http://ombra.purforum.com/f4-esprits-a-incarner" style="color: #A55A3A !important;">Esprits à incarner</a><br /><a href="http://ombra.purforum.com/f8-une-question-un-probleme" style="color: #A55A3A !important;">Zone invité</a><br /><a href="http://ombra.purforum.com/t4-description-des-races" style="color: #A55A3A !important;">Espèces</a><br /><br />
<div class="titre_bloc">
 Top-sites
</div><a href="http://www.root-top.com/topsite/stupidlamb/in.php?ID=827"><img src="http://img15.hostingpics.net/pics/613387cercueilVampire1.png" /></a>
</center>
 
</td>
 
<td style="width: 50px;">
 
</td>
 
<td>
 
<center>
 
<div class="titre_bloc">
 Synopsis
</div><br />
<center>
 
<div style="width: 250px; height: 150px; overflow: auto; font-family: arial; text-align: justify;">
 Bienvenue sur Ombra. J'espère que tu es bien conscient d'une chose : si tu ne te méfie pas de tous ces êtres assoiffés de sang, tu y laisseras ta peau... ou plutôt ton sang. Choisi donc bien ton camp, surtout si tu es un Humain. Tu es libre de devenir le serviteur d'un Vampire ou d'un Demi-vampire. Je te déconseille de rester près d'un Dhampire : ils sont certes des tueurs de Vampires, ça ne les empêche pas de détester les Humains. Pire : ils les méprisent. Tu es vraiment prêt pour ça ? Alors, rejoins-nous vite !<br /><br />Ne reste pas sur ta faim et <a href="http://ombra.purforum.com/t3-mythe" style="color: #A55A3A !important;">lis la suite ...</a>
</div>
 
</center><br /><br />
<div class="titre_bloc">
 Nouvelles
</div><br /> <span style="width: 350px; height: 100px; overflow: auto;"> <span style="color: #A55A3A;"> XX/XX </span> Nouveauté <a href="#" style="color: #A55A3A !important;">La suite</a> <br /><span style="color: #A55A3A;"> XX/XX </span> Nouveauté <a href="#" style="color: #A55A3A !important;">La suite</a> <br /><span style="color: #A55A3A;"> XX/XX </span> Nouveauté <a href="#" style="color: #A55A3A !important;">La suite</a> <br /><span style="color: #A55A3A;"> XX/XX </span> Nouveauté <a href="#" style="color: #A55A3A !important;">La suite</a></span>
</center>
 
</td>
 
<td style="width: 20px;">
 
</td>
 
<td>
 
<div class="titre_bloc">
 Staff
</div><br />
<center>
 
<table>
 
<tbody>
 
<tr>
 
<td>
 
<div class="staff">
 
<div class="staff_img">
 <img src="http://i58.servimg.com/u/f58/18/43/33/39/sans_t15.png" style="height: 80px;" />
</div>
 
<div class="staff_description">
 <br /><br /> Nom du personnage<br /><a href="#" style="color: #A55A3A !important;">MP</a> <a href="#" style="color: #A55A3A !important;">Profil</a>
</div>
 
</div><br />
<div class="staff">
 
<div class="staff_img">
 <img src="http://i58.servimg.com/u/f58/18/43/33/39/sans_t15.png" style="height: 80px;" />
</div>
 
<div class="staff_description">
 <br /><br /> Nom du personnage<br /><a href="#" style="color: #A55A3A !important;">MP</a> <a href="#" style="color: #A55A3A !important;">Profil</a>
</div>
 
</div>
 
</td>
 
<td>
 
<div class="staff">
 
<div class="staff_img">
 <img src="http://i58.servimg.com/u/f58/18/43/33/39/sans_t15.png" style="height: 80px;" />
</div>
 
<div class="staff_description">
 <br /><br /> Nom du personnage<br /><a href="#" style="color: #A55A3A !important;">MP</a> <a href="#" style="color: #A55A3A !important;">Profil</a>
</div>
 
</div><br />
<div class="staff">
 
<div class="staff_img">
 <img src="http://i58.servimg.com/u/f58/18/43/33/39/sans_t15.png" style="height: 80px;" />
</div>
 
<div class="staff_description">
 <br /><br /> Nom du personnage<br /><a href="#" style="color: #A55A3A !important;">MP</a> <a href="#" style="color: #A55A3A !important;">Profil</a>
</div>
 
</div>
 
</td>
 
</tr>
 
</tbody>
 
</table>
 
</center>
 <br />
<div class="titre_bloc">
 Crédits
</div><br />
<div class="bloc_crédits">
 Design par <a href="#" style="color: #A55A3A !important;">Nom</a> ; Codage de la PA par <a href="http://www.never-utopia.com/" style="color: #A55A3A !important;">Halloween</a>
</div>
 
</td>
 
</tr>
 
</tbody>
 
</table>
 
</center>
 
<table>
 
<tbody>
 
<tr>
 
<td>
 
<center>
 <img src="http://img15.hostingpics.net/pics/467523ImagePAOmbra.png" style="width: 250px;" />
</center>
 
</td>
 
<td>
 
<div class="titre_bloc">
 Nos compagnons
</div><br />
<div style="width: 400px; height: 50px; overflow: auto;">
 <a href="http://www.never-utopia.com"><img src="http://img4.hostingpics.net/pics/616830logo3.jpg" /></a> <a href="http://www.never-utopia.com"><img src="http://img4.hostingpics.net/pics/616830logo3.jpg" /></a> <a href="http://www.never-utopia.com"><img src="http://img4.hostingpics.net/pics/616830logo3.jpg" /></a> <a href="http://www.never-utopia.com"><img src="http://img4.hostingpics.net/pics/616830logo3.jpg" /></a> <a href="http://www.never-utopia.com"><img src="http://img4.hostingpics.net/pics/616830logo3.jpg" /></a> <a href="http://www.never-utopia.com"><img src="http://img4.hostingpics.net/pics/616830logo3.jpg" /></a> <a href="http://www.never-utopia.com"><img src="http://img4.hostingpics.net/pics/616830logo3.jpg" /></a> <a href="http://www.never-utopia.com"><img src="http://img4.hostingpics.net/pics/616830logo3.jpg" /></a>
</div>
 
</td>
 
</tr>
 
</tbody>
 
</table>
 
</div><link href="http://fonts.googleapis.com/css?family=Carrois+Gothic+SC|Vampiro+One|Condiment" rel="stylesheet" type="text/css" />

Code:

/***************************** MISE EN FORME PA *****************************/

a {
  text-decoration: none !important;
}

a:hover {
  text-decoration: none !important;
}

.fond_PA {
  background-image: url('http://i58.servimg.com/u/f58/18/43/33/39/1510.png');
 padding: 15px;
  color: #483433;
  font-size: 11px;
}

.titre_PA {
  font-family: 'Condiment', cursive;
  font-size: 45px;
  color: #663924;
}

.titre_bloc {
  font-family: 'Vampiro One', cursive;
  font-size: 30px;
  color: #CC8B6E;
  text-align: center;
}

.bloc_crédits {
  width: 200px;
  padding: 15px;
 -moz-transform: rotate(-2deg);
  -webkit-transform: rotate(-2deg);
  transform: rotate(-2deg);
}

/*** STAFF ***/
.staff {
  width: 80px;
  height: 80px;
  overflow: hidden;
  background-color: #483433;
}

.staff_img {
  position: relative;
  z-index: 2;
  height: 80px;
  margin-left: 0px;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}

.staff:hover .staff_img {
  margin-top: -300px;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}

.staff_description {
  position: relative;
  top: 19em;
  z-index: 1;
  width: 75px;
  height: 75px;
  text-align: center;
  font-size: 11px;
  color: #8c8c8c;
  padding: 2px;
  overflow: auto;
}

/***************************** FIN MISE EN FORME PA *****************************/

très chouette pa ! merci beaucoup !