N°2 PA simple et organisé en 3 colonnes

PA organisé en 3 colonnes

Voici une énième page d'accueil organisé sur trois niveaux et sur trois colonnes. De même que pour la PA N°1, n'hésitez pas à cliquer sur les images en miniatures pour les agrandir et voir son aperçu.

Laxy.

codage by Laxy Dunbar

Visuel de la PA :

N°2 PA simple et organisé en 3 colonnes Pahove10

N°2 PA simple et organisé en 3 colonnes Panoth10

Code HTML :

Code:: <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Covered+By+Your+Grace" />
<div align="center">

<div style="width:800px;height:620px;background-color:transparent;">

<div style="font-family: Campus relief, georgia; font-weight: bold; font-size: 25px; letter-spacing: 7px; text-transform: uppercase; text-shadow: 0px 0px 6px #444444; ">
<span style="color: #182F41;">Welcome {USERNAME} to NYC!</span>
</div><br /><span style="font-size: 16px;"><a href="#">Charte</a> ✦ <a href="#">Bottin</a> ✦ <a href="#">Scénarios</a> ✦ <a href="#">Partenariat</a> ✦ <a href="#">Nos Partenaires</a></span><br />
<div id="PA">

<table>

<tbody>

<tr>

<td>

<div class="titre">
Contexte
</div>

<div style="width:200px;height:150px; background-color:#F7F3B9; overflow:auto">

<div align="justify">
ATTENTION : Ceci est un forum de libre-service en graphisme et codage, cependant le forum change régulièrement d'aspect car il est aussi un forum de test. Ne vous inquiétez donc pas si vous le voyez changer de tête aussi souvent.<a href="URL ICI" class="postlink">Lire la suite</a>
</div>

</div>

</td>

<td>

<div class="titre">
Vidéo du Contexte
</div>
<iframe style="width: 300px; height: 150px;" frameborder="no" src="http://www.youtube.com/embed/UGvCvyveuxM?autohide=0&theme=light&modestbranding=1&rel=0&wmode=transparent&autoplay=0"> </iframe>
</td>

<td>

<div class="titre">
Les News
</div>

<div style="width:200px;height:150px; background-color:#F7F3B9; overflow:auto">
✦ New du 00/00/00<br /> ✦ New du 00/00/00<br /> ✦ New du 00/00/00<br /> ✦ New du 00/00/00<br /> ✦ New du 00/00/00<br /> ✦ New du 00/00/00<br /> ✦ New du 00/00/00<br /> ✦ New du 00/00/00<br />
</div>

</td>

</tr>

<tr>

<td>

<div class="titre">
Le staff
</div>

<div class="staff">
<img src="http://i86.servimg.com/u/f86/18/95/70/35/staffc10.jpg" class="staff_img" />
<div class="staff_description">
Fondateur / Fondatrice <a rel="nofollow" target="_blank" class="postlink" href="VOTRE URL ICI">PSEUDO</a> <span style="color: #009900;">Présent</span> <br /><br /> Admin / Modo <a rel="nofollow" target="_blank" class="postlink" href="VOTRE URL ICI">PSEUDO</a> <span style="color: #ff0000;">Absent</span>
</div>

</div>

</td>

<td>

<div class="titre">
Les crédits
</div>

<div style="width:300px;height:120px; background-color:#F7F3B9; overflow:auto">
<br /> ✦ Codage QEEL par <a rel="nofollow" target="_blank" class="postlink" href="VOTRE URL ICI">PSEUDO</a> <br /> ✦ Codage des catégories par <a href="VOTRE URL ICI">PSEUDO</a> <br /> ✦ Codage PA par <a href="http://lecerclesecret.forumactif.org/">Laxy Dunbar</a> <br /> ✦ Design par <a href="http://laxbillykltzhou.tumblr.com/">LaxBilly Kltzhou</a>
</div>

</td>

<td>

<div class="titre">
Mbr du mois
</div>

<div class="membre">
<img src="http://i86.servimg.com/u/f86/18/95/70/35/acmemb10.jpg" class="membre_img" />
<div class="membre_description">
Félicitation à <a rel="nofollow" target="_blank" class="postlink" href="VOTRE URL ICI">PSEUDO</a> qui est notre merveilleux membre du mois !
</div>

</div>

</td>

</tr>

<tr>

<td>

<div align="center">

<div class="titre">
Prédéfinis
</div>

<div align="center">

<div class="partenaire">
<a href=""> <img src="http://i86.servimg.com/u/f86/18/95/70/35/predef10.png" style="width:50px;height:50px;" /></a> <a href=""> <img src="http://i86.servimg.com/u/f86/18/95/70/35/predef10.png" style="width:50px;height:50px;" /></a> <a href=""> <img src="http://i86.servimg.com/u/f86/18/95/70/35/predef10.png" style="width:50px;height:50px;" /></a> <img src="http://i86.servimg.com/u/f86/18/95/70/35/predef10.png" style="width:50px;height:50px;" /> <a href=""><img src="http://i86.servimg.com/u/f86/18/95/70/35/predef10.png" style="width:50px;height:50px;" /></a> <a href=""><img src="http://i86.servimg.com/u/f86/18/95/70/35/predef10.png" style="width:50px;height:50px;" /></a> <a href=""> </a>
</div><a href=""> </a>
</div><a href=""> </a>
</div><a href=""> </a>
</td>

<td>

<div align="center">

<div class="titre">
Top-sites
</div>

<div align="center">

<div class="partenaire">
<img src="http://www.smilchat.net/smiley/celebre/jacksparrow.gif" /><img src="http://www.smilchat.net/smiley/celebre/jacksparrow.gif" /><img src="http://www.smilchat.net/smiley/celebre/jacksparrow.gif" /><img src="http://www.smilchat.net/smiley/celebre/jacksparrow.gif" /><img src="http://www.smilchat.net/smiley/celebre/jacksparrow.gif" /><img src="http://www.smilchat.net/smiley/celebre/jacksparrow.gif" /><img src="http://www.smilchat.net/smiley/celebre/jacksparrow.gif" />
</div>

</div>

</div>

</td>

<td>

<div align="center">

<div class="titre">
Partenaires
</div>

<div align="center">

<div class="partenaire">

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" scrolldelay="2" direction="left">
<a target="_blank" href="http://killed-by-a-lover.bbactif.com/"><img src="http://i86.servimg.com/u/f86/19/47/74/16/logoki10.gif" class="KilledbyaLoverrpg" /></a> <a target="_blank" href="http://killed-by-a-lover.bbactif.com/"><img src="http://i86.servimg.com/u/f86/19/47/74/16/logoki10.gif" class="KilledbyaLoverrpg" /></a> <a target="_blank" href="http://killed-by-a-lover.bbactif.com/"><img src="http://i86.servimg.com/u/f86/19/47/74/16/logoki10.gif" class="KilledbyaLoverrpg" /></a> <a target="_blank" href="http://killed-by-a-lover.bbactif.com/"><img src="http://i86.servimg.com/u/f86/19/47/74/16/logoki10.gif" class="KilledbyaLoverrpg" /></a> <a target="_blank" href="http://killed-by-a-lover.bbactif.com/"><img src="http://i86.servimg.com/u/f86/19/47/74/16/logoki10.gif" class="KilledbyaLoverrpg" /></a>
</marquee>

</div>

</div>

</div>

</td>

</tr>

</tbody>

</table>

</div>

</div>
</div>

Code CSS :

Code:: /*PA par Laxy*/
#PA table {
margin:0 auto;
padding-top:5px;
width:700px
}

#PA table td {
padding:5px 10px
}

/**Cadre Partenaire**/
.partenaire {
width: 200px;
height: auto;
}

/** cadre divers **/
.cadre {
background:#5FA8D1;
padding:5px;
max-width:500px;
margin-top:-2px;
height:auto;
line-height:13px;
font-family:arial;
font-size:10px;
color:#C3CDC4;
text-align:justify
}

/** Cadre news **/
.nouveau {
background:#5FA8D1;
width:250px;
height:115px;
line-height:13px;
font-family:arial;
font-size:10px;
color:#C3CDC4;
text-align:justify;
overflow:auto
}

/** titres des blocs **/
.titre {
font-family:'covered by your grace',cursive;
font-size:40px;
line-height:100%;
font-face:bold;
color:#000000;
background-color:none;
text-shadow:2px 0 0 #FFFFFF
}

/** Cadre Staff **/
.staff {
width: 200px;
height: 120px;
overflow: hidden;
position: relative;
}
.staff_description {
width:200px;
height:120px;
padding: 5px;
overflow: auto;
}
.staff_img {
position: absolute;
min-width: 200px;
min-height: 120px;
top: 0;
left: 0;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-htm-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
transition: all 1s ease-out;
}

.staff:hover .staff_img {
left: 100%;
}

.membre {
width: 200px;
height: 120px;
overflow: hidden;
position: relative;
}
.membre_description {
width:200px;
height:120px;
padding: 5px;
overflow: auto;
}
.membre_img {
position: absolute;
min-width: 200px;
min-height: 120px;
top: 0;
left: 0;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-htm-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
transition: all 1s ease-out;
}

.membre:hover .membre_img {
left: 100%;
}
/*FIN MINI PA by Laxy*/