poké-zodiac

Messages : 171 Date d'inscription : 24/03/2013

Sujet: Codage de la PA

Mer 23 Avr - 2:47

Code:: <table id="tfa_table" cellpadding="5" cellspacing="10">

<tbody>

<tr>

<td rowspan="2" style="background: url(" http:="" i45.servimg.com="" u="" f45="" 11="" 95="" 30="" 70="" gfgf10.jpg")="" no-repeat="" scroll="" 0%="" transparent;="" width:="" 80px;"="">

<p>
Nulla hendrerit leo at ante laoreet posuere. Morbi pretium scelerisque lorem, eu posuere neque accumsan vitae.
</p>

</td>

<td colspan="2" style="background-image: url(" http:="" i65.servimg.com="" u="" f65="" 11="" 95="" 30="" 70="" 418.jpg");="" width:="" 100%;"="">

<p class="text_imag">
Le titre ou un message de bienvenu
</p>

</td>

</tr>

<tr>

<td style="width: 40%;">
<img src="http://i69.servimg.com/u/f69/13/29/02/28/gf10.png" alt="" /> Morbi molestie iaculis sapien <br /> <img src="http://i69.servimg.com/u/f69/13/29/02/28/gf10.png" alt="" /> Morbi molestie iaculis sapien
</td>

<td style="width: 40%;">
<img src="http://i69.servimg.com/u/f69/13/29/02/28/gf10.png" alt="" /> Morbi molestie iaculis sapien <br /> <img src="http://i69.servimg.com/u/f69/13/29/02/28/gf10.png" alt="" /> Morbi molestie iaculis sapien<br />
</td>

</tr>

<tr>

<td>

<div id="nav-menu">

<ul>

<li>
<a href="#">Ton lien 1</a>
</li>

<li>
<a href="#">Ton lien 2</a>
</li>

<li>
<a href="#">Ton lien 3</a>
</li>

<li>
<a href="#">Ton lien 4</a>
</li>

<li>
<a href="#">Ton lien 5</a>
</li>

</ul>

</div>

</td>

<td id="igauche" valign="top">

<h1>
Phasellus tristique viverra odio
</h1>

<p style="padding-left: 15px;">
<img src="http://i69.servimg.com/u/f69/13/29/02/28/gf10.png" alt="" /> Cras sed turpis ut leo accumsan accumsan <br /> <img src="http://i69.servimg.com/u/f69/13/29/02/28/gf10.png" alt="" /> Cras sed turpis ut leo accumsan accumsan <br /> <img src="http://i69.servimg.com/u/f69/13/29/02/28/gf10.png" alt="" /> Cras sed turpis ut leo accumsan accumsan <br /> <img src="http://i69.servimg.com/u/f69/13/29/02/28/gf10.png" alt="" /> Cras sed turpis ut leo accumsan accumsan <br /> <img src="http://i69.servimg.com/u/f69/13/29/02/28/gf10.png" alt="" /> Cras sed turpis ut leo accumsan accumsan <br /> <img src="http://i69.servimg.com/u/f69/13/29/02/28/gf10.png" alt="" /> Cras sed turpis ut leo accumsan accumsan
</p>

</td>

<td id="idroite" valign="top">

<h1>
Phasellus tristique viverra odio
</h1>

<p style="padding-right: 15px;">
Phasellus tristique viverra odio eget ullamcorper. Vivamus laoreet lacus id nisl hendrerit auctor. Ut blandit, nisl non interdum bibendum, mauris purus eleifend neque, quis blandit enim tellus non dui. Phasellus tristique viverra odio eget ullamcorper. Vivamus laoreet lacus id nisl hendrerit auctor. Ut blandit, nisl non interdum bibendum, mauris purus.
</p>

</td>

</tr>

<tr>

<td valign="top">


<h1>
Nos partenaires
</h1>

<div id="scroller_container">

<div class="jscroller2_up jscroller2_speed-40 jscroller2_mousemove">
<a href="http://www.xixi-pub.com" class="postlink" target="_blank"> <img src="http://i624.photobucket.com/albums/tt321/xixipub/883111.jpg" alt="Xixi'Pub © Forum de Publicité et d'Entraide" border="0" /> </a> <a href="http://atelier.sos-forum.net" class="postlink" target="_blank"> <img src="http://i83.servimg.com/u/f83/11/33/41/62/logoat10.png" /> </a> <a href="http://perseverance.fr-bb.com" class="postlink" target="_blank"> <img src="http://i66.servimg.com/u/f66/12/36/23/81/nouvea10.png" alt="" border="0" /> </a> <a href="http://twilightime.forumactif.com" class="postlink" target="_blank"> <img src="http://i68.servimg.com/u/f68/11/48/24/14/logo_810.png" alt="" border="0" /> </a> <a href="http://dailylife.forumactif.org/" class="postlink" target="_blank"> <img src="http://i64.servimg.com/u/f64/13/94/82/69/031010.png" alt="" border="0" /> </a> <a href="http://milopub.forumactif.org/" class="postlink" target="_blank"> <img src="http://sd-2.archive-host.com/membres/images/72698231053381489/MiloPub.png" alt="" border="0" /> </a>
</div>

</div>

</td>

<td valign="top">

<h1>
Les principaux membres du staff
</h1>


<div class="tfabulle">
<img alt="Thèmes F.A" title="Thèmes F.A" src="http://i65.servimg.com/u/f65/11/95/30/70/416.jpg" />
<div class="in_bulle">

<h2>
YAOUP Fondateur
</h2>

<p>
<img src="http://i65.servimg.com/u/f65/11/95/30/70/312.jpg" /> <br /> <a href="#Lien-Profil">Profil</a> <a href="#Lien-MP">MP</a>
</p>

</div>

</div>


<div class="tfabulle">
<img alt="Thèmes F.A" title="Thèmes F.A" src="http://i65.servimg.com/u/f65/11/95/30/70/614.jpg" />
<div class="in_bulle">

<h2>
Ouliiy co-admin
</h2>

<p>
<img src="http://i65.servimg.com/u/f65/11/95/30/70/116.jpg" /> <br /> <a href="#Lien-Profil">Profil</a> <a href="#Lien-MP">MP</a>
</p>

</div>

</div>


<div class="tfabulle">
<img alt="Thèmes F.A" title="Thèmes F.A" src="http://i65.servimg.com/u/f65/11/95/30/70/516.jpg" />
<div class="in_bulle">

<h2>
ROYAL Modo
</h2>

<p>
<img src="http://i65.servimg.com/u/f65/11/95/30/70/216.jpg" /> <br /> <a href="#Lien-Profil">Profil</a> <a href="#Lien-MP">MP</a>
</p>

</div>

</div>


<div class="tfabulle">
<img alt="Thèmes F.A" title="Thèmes F.A" src="http://i65.servimg.com/u/f65/11/95/30/70/416.jpg" />
<div class="in_bulle">

<h2>
YAOUP Fondateur
</h2>

<p>
<img src="http://i65.servimg.com/u/f65/11/95/30/70/312.jpg" /> <br /> <a href="#Lien-Profil">Profil</a> <a href="#Lien-MP">MP</a>
</p>

</div>

</div>

<div style="clear:both;">

</div>

</td>

<td valign="top">

<h1>
Lorem ipsum dolor sit amet
</h1>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet leo risus, pellentesque placerat mi. Pellentesque sit amet ligula .
</p>

</td>

</tr>

</tbody>
</table>

Messages : 171 Date d'inscription : 24/03/2013

Sujet: Re: Codage de la PA

Mer 23 Avr - 2:49

et ton CSS

/* CONFIGURATION DE LA TABLE */
#tfa_table{
width:1030px;
color:#81FF7F;
font: 12px orbitron;
background: #1e1e1e;
border: 3px solid #014FBE;
margin: 3px auto;
-moz-border-radius: 12px ;
-webkit-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 2px 2px 2px #000;
-webkit-box-shadow: 2px 2px 2px #000;
box-shadow: 2px 2px 2px #000;
-moz- text-shadow: 1px 1px 2px #000;
-webkit- text-shadow: 1px 1px 2px #000;
text-shadow: 1px 1px 2px #000;
}
/* CELLULES */
#tfa_table td{
background-color: #0f100f;
border: 3px solid #014FBE;
margin: 3px;
padding: 6px;
-moz-border-radius: 12px ;
-webkit-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 2px 2px 2px #000;
-webkit-box-shadow: 2px 2px 2px #000;
box-shadow: 2px 2px 2px #000;
}
/* LES LIENS */
#tfa_table a{
text-decoration:none;
color:#af946e;
}
/* TITRES */
#tfa_table h1{
font: bold 15px orbitron;
margin: 3px auto;
padding: 0;
color: #014FBE;
border-bottom: 1px dotted #014FBE;
}
/* PARAGRAPHE CONTENANT LE TITRE DU FORUM (ou texte de bienvenu) */
.text_imag{
color: #d8f795;
text-align: center;
vertical-align: middle;
font: Bold 30px Impact;
}
/* CELLULE AVEC FOND DECO DE GAUCHE */
#igauche{
background: url("https://i.servimg.com/u/f69/13/29/02/28/j11.png") no-repeat bottom left #0f100f;
border: 3px solid #014FBE;
padding: 6px;
-moz-border-radius: 12px ;
-webkit-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 2px 2px 2px #000;
-webkit-box-shadow: 2px 2px 2px #000;
box-shadow: 2px 2px 2px #000;
}
/* CELLULE AVEC FOND DECO DE DROITE */
#idroite{
background: url("https://i.servimg.com/u/f69/13/29/02/28/j11.png") no-repeat bottom right #0f100f;
border: 3px solid #014FBE;
padding: 6px;
-moz-border-radius: 12px ;
-webkit-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 2px 2px 2px #000;
-webkit-box-shadow: 2px 2px 2px #000;
box-shadow: 2px 2px 2px #000;
}

/* ---- NAVIGATION ---- */

/* LISTE UL */
#nav-menu ul{
list-style: none;
padding: 0;
margin: 0;
}
/* ELEMENT DE LISTE */
#nav-menu li{
float: left;
margin: 0 2px;
}
/* LIENS */
#nav-menu li a{
display: block;
background: url(https://i.servimg.com/u/f65/11/95/30/70/o10.jpg);
border: 2px solid #014FBE;
height: 25px;
line-height: 25px;
width: 138px;
font: bold 15px orbitron;
color: #d8f795;
text-decoration: none;
text-align: center;
-moz-border-radius: 12px 3px 12px 3px ;
-webkit-border-radius: 12px 3px 12px 3px ;
border-radius: 12px 3px 12px 3px ;
-moz-box-shadow: 2px 2px 2px #000;
-webkit-box-shadow: 2px 2px 2px #000;
box-shadow: 2px 2px 2px #000;
margin: 2px 0px 2px 0px;
}
/* LIENS AU SURVOL */
#nav-menu li a:hover{
color: #bfcd48;
font-style: italic;
}

/* Scroller Box */
#scroller_container {
width: 120px;
height: 70px;
overflow: hidden;
margin: auto;
text-align: center;
}
#dummy {;# }
#scroller_container {
overflow: auto;
}

/* INFOBULLES */
.tfabulle{
position: relative;
float: left;
margin: 3px;
padding: 0;
}
/* PARTIE MASQUEE DE L INFOBULLE */
.in_bulle {
display: none;
margin: 0;
padding: 0;
}
/* CONFIGURATION-PARAMÈTRES DE L INFOBULLE VISIBLE AU SURVOL */
.tfabulle:hover .in_bulle{
background: #424242;
border: 2px solid #014FBE;
position: absolute;
z-index: 999;
display: block;
width: auto;
margin: 0;
padding:3px;
top: 62px;
left: 35px;
text-align: center;
-moz-border-radius: 7px ;
-webkit-border-radius: 7px ;
border-radius:7px ;
-moz-box-shadow: 0px 0px 4px #000;
-webkit-box-shadow: 0px 0px 4px #000;
box-shadow: 0px 0px 4px #000;
}
/* PARAGRAPHE DE L INFOBULLE */
.in_bulle p{
color: #000;
margin: 0;
padding: 0;
}
/* TITRE DANS L INFOBULLE */
.in_bulle h2{
font: 13px orbitron;
color:#014FBE;
border-bottom: 1px dasched #014FBE;
margin: 0;
padding: 0;
text-align: center;
}