[Page d'Accueil]Une base pour travailler ...

Messages : 1690

La Page d'Accueil est très importante pour un forum.
Elle permet de voir en peu de temps tout ce qu'un forum peut offrir

Je vous propose ci-dessous des modèles que j'ai fait moi-même.

Ils sont bien sûr à modifier pour les couleurs et les images.
Si vous n'y arrivez pas, vous pouvez toujours demander de l'aide dans la section "Codage"

Veuillez laisser le crédit s'il vous plaît ...

Pôle Emploi HP

Messages : 1690

Page d'Accueil 1

A mettre dans "Message sur la page d'accueil"

Code:: <br><div style="margin: auto; text-align: center; width: 700px;">
</div><div style="text-align: center; width: 700px;">
<a href="http://" class="navigation"><b>Règlement</b></a>

<a href="http://" class="navigation"><b>Postes Vacants</b></a>

<a href="http://" class="navigation"><b>Guide</b></a>

<a href="http://" class="navigation"><b>Partenariat</b></a>

<a href="http://" class="navigation"><b>Section Invités</b></a>
</div>
<table style="margin: auto; text-align: center; width: 700px;">
<tbody><tr>
<td width="50%">
<span class="titre">
News
</span><br>
<div style="overflow: auto; width: 100%; height: 80px;">
<div style="margin: auto; text-align: left; width: 100%;">
</div>
<font size="1">
<ul>
<div align="left">
- Blablabla<br>
- Blablabla<br>
- Blablabla<br>
- Blablabla<br>
- Blablabla<br>
- Blablabla<br>
- Blablabla<br>
</div>
</ul>
</font>
</div>
<table>
<tbody><tr align="left">
<td><br><br>
<span class="titre">
Contexte
</span>
<br><div style="overflow: auto; width: 100%; height: 80px;">
<div style="margin: auto; text-align: left; width: 100%;">
</div>
<i style="text-align: justify;"><span style="font-size: 11px; line-height: normal;">Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici. Votre contexte ici.</span></i></div><br><br>
</td>
</tr>
</tbody></table>
</td>

<td class="droite" width="50%">
<br>
<table align="right">
<tbody>
<tr height="150">
<td>
<span style="font-size: 12px;">
<div style="margin: auto; width: 100%;">
</div>
<br>
<center><FORM><SELECT style="font-family: arial; color: white; border: 1px dotted black;-moz-border-radius:8px; font-size: 12; padding:3px; background-color: #8A8A8A;" onchange="location = this.options
[this.selectedIndex].value"> <OPTION selected >Top Partenaires</OPTION> <OPTION value=http://>Ami 1</OPTION> <OPTION value=http://>Ami 2</OPTION> <OPTION value=http://>Ami 3</OPTION> <OPTION value=http://>Ami 4</OPTION> <OPTION value=http://>Ami 5</OPTION> <OPTION value=http://>Ami 4</OPTION> <OPTION value=http://>Ami 6</OPTION> </SELECT> </FORM></center>
<br><br><br>
</span>
</td>
</tr>
<tr>
<td>
<span class="titre">
Staff
</span>
<br>
<center><a class="info"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"><span><center>Prénom Nom<br>Rang sur le Forum</center></span></a>
<a class="info"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"><span><center>Prénom Nom<br>Rang sur le Forum</center></span></a>
<a class="info"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"><span><center>Prénom Nom<br>Rang sur le Forum</center></span></a>
</center>
<br>
<br>
<br>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table><div style="margin: auto; text-align: center; width: 700px;">
</div><div style="text-align: right;">Page d'Accueil by <a href="http://pole-emploi-hp.forumsrpg.com/">Roxy</a></div>

A mettre dans le CSS

Code:: /*Page d'Accueil*/

.navigation
{background-color: #8A8A8A;
text-align: center;
width: 120px;
height: 15px;
border: 1px black dotted;
-border-radius: 10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
text-color:#000000;
text-decoration: none;
cursor:pointer;
display:inline-block;
margin-left:3px;
margin-right:3px;
padding: 3px;
}

.titre{
display:block;
border-bottom:4px #8A8A8A solid;
padding-bottom:10px;
font-weight:bold;
font-size:18px;
text-align:center;
}

* a.info {
position: relative;
color: white;
text-decoration: none;
}

a.info span {
display: none; /* on masque l'infobulle */

}
a.info:hover {
background: none; /* correction d'un bug IE */
z-index: 999; /* on définit une valeur pour l'ordre d'affichage */

cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
a.info:hover span {
display: inline; /* on affiche l'infobulle */
position: absolute;

white-space: normal;

top: 20px;
left: 10px;

background-color: #8A8A8A;

-moz-border-radius : 5px 5px 5px 5px;
padding: 3px;

border: 1px dashed white;
width: 150px;}

Pôle Emploi HP

Messages : 1690

Page d'Accueil 2

A mettre dans "Message sur la page d'accueil"

Code:: <SPAN class=genmed>
<TABLE class="forumline table1 bg3" cellSpacing=1 width="100%">
<TBODY>
<TR>
<TH class="thTop forabg" width="28%">Postes Vacants<BR></TH>
<TH class="thTop forabg" width="43%"><DIV align=center>Contexte</DIV></TH>
<TH class="thTop forabg" width="29%">Nos Partenaires</TH></TR><SPAN class=postbody></SPAN>
<TR>
<TD class=row3 align=middle><DIV align=center><SPAN class=postbody>
<center><div style="">
<a href="http://"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"></a> <a href="http://"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"></a></div><div style="">
<a href="http://"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"></a> <a href="http://"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"></a></div></center></SPAN></DIV></TD>
<TD class=row3 align=middle><DIV align=center><SPAN class=postbody><p>Votre contexte ici</p></SPAN></DIV></TD>
<TD class=row3 align=middle><SPAN class=postbody>
<CENTER> <A href="http://"><IMG src="http://img10.hostingpics.net/pics/956658Partenaires.png"></A><br><br>
<A href="http://"><IMG src="http://img10.hostingpics.net/pics/956658Partenaires.png"></A><br><br>
<A href="http://"><IMG src="http://img10.hostingpics.net/pics/956658Partenaires.png"></A></CENTER></SPAN></TD>
<TR><SPAN class=genmed></TR></TBODY></TABLE>
<TABLE class="forumline table1 bg3" cellSpacing=1 width="100%">
<TBODY>
<TR>
<TH class="thTop forabg" width="28%">News<BR></TH>
<TH class="thTop forabg" width="43%">Liens Rapides</TH>
<TH class="thTop forabg" width="29%">Crédits</TH></TR>
<TR>
<TD class=row3 align=middle><DIV align=center><SPAN class=postbody><marquee style="font-weight:bold; color:#000000; height:100px; width:250px; text-align:center" direction="up" scrollamount="2">
* News 1<br>
* News 2<br>
* News 3<br>
* News 4</marquee></SPAN></DIV></TD>
<TD class=row3 align=middle><DIV align=center>
<FORM><SELECT style="WIDTH: 268px" onchange="location = this.options
[this.selectedIndex].value"> <OPTION selected value=http://>Menu 1</OPTION> <OPTION value=http://>Menu 2</OPTION> <OPTION value=http://>Menu 3</OPTION> <OPTION value=http://>Menu 4</OPTION> <OPTION value=http://>Menu 5</OPTION> </SELECT> </FORM></DIV></TD>
<TD class=row3 align=middle>
<p><SPAN class=postbody><div style="text-align: center;"><FONT size=2>Page d'Accueil by <a href="http://pole-emploi-hp.forumsrpg.com/">Roxy</a></FONT></div></SPAN></p></TD></TR></TBODY></TABLE></SPAN></SPAN>

Pas de CSS pour cette présentation ...

Pôle Emploi HP

Messages : 1690

Page d'Accueil 3

A mettre dans "Message sur la page d'accueil"

Code:: <br><div style="margin: auto; text-align: center; width: 700px;">
</div><div style="text-align: center; width: 700px;">
<a href="http://" class="navigation"><b>Règlement</b></a>

<a href="http://" class="navigation"><b>Contexte</b></a>

<a href="http://" class="navigation"><b>Présentation</b></a>

<a href="http://" class="navigation"><b>Avatars</b></a>
</div>
<br><table style="margin: auto; text-align: center; width: 700px;">
<tbody><tr>
<td width="30%"><br><br><br>
<span class="titre">
Les Postes Vacants
</span>
<center><marquee onmouseover="this.stop()" ;="" padding:="" margin-left:="" 0px;="" width:="" 200px;="" height:="" 120px;="" onmouseout="this.start()" scrollamount="1" scrolldelay="1" direction="up"><center><div style="">
<a href="http://"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"></a> <a href="http://"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"></a></div><div style="">
<a href="http://"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"></a> <a href="http://"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"></a></div><div style="">
<a href="http://"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"></a> <a href="http://"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"></a></div>
</center></marquee><table><tbody><tr></tr></tbody></table></center><br><br>

</td><td width="35%">
<br>
<table>
<tbody><tr>
<td>
<span class="titre">
Le Contexte
</span>
<br>
<div style="overflow: auto; width: 100%; height: 100px;">
<div style="margin: auto; text-align: left; width: 100%;">
</div>
<font size="1">
</font><ul>
<font size="1"> </font><div align="justify"><font size="1">Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla
<br></font></div><font size="1"><br><br>

</font></ul></div></td>
</tr>
</tbody></table>
</td><td width="30%">
<br>
<table>
<tbody><tr>
<td>
<span class="titre">
Le Staff
</span>
<br>
<center><a class="info"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"><span><center>Prénom Nom<br>Rang sur le Forum</center></span></a> <a class="info"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"><span><center>Prénom Nom<br>Rang sur le Forum</center></span></a>
<br>
<a class="info"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"><span><center>Prénom Nom<br>Rang sur le Forum</center></span></a>
</center></td></tr></tbody></table><br>
<br>
<br>
</td>
</tr>
</tbody></table>

<br><table style="margin: auto; text-align: center; width: 700px;">
<tbody><tr>
<td width="50%">
<span class="titre">
Informations et Crédits
</span><br><br><br>
<center><center>Toute reproduction totale ou partielle du Forum est interdite.<br><br>

Page d'accueil par <a href="http://pole-emploi-hp.forumsrpg.com/">Roxy</a>.<br><br>

Ouverture du Forum le ...</center><table><tbody><tr></tr></tbody></table></center><br><br>

</td><td class="droite" width="50%">
<br>
<table align="right">
<tbody><tr>
<td>
<span class="titre">
Les Partenaires
</span>
<br>
<center><marquee onmouseover="this.stop()" ;="" padding:="" margin-left:="" 0px;="" width:="" 200px;="" height:="" 120px;="" onmouseout="this.start()" scrollamount="1" scrolldelay="1" direction="left"><center>
<center>
<a href="http://"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a> <a href="http://"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a> <a href="http://"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a> <a href="http://"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a></center></center></marquee><table><tbody><tr></tr></tbody></table></center><br><br></td></tr></tbody></table><br>
<br>
<br>
<br>
</td>
</tr>
</tbody></table>

A mettre dans le CSS

Code:: /*PA*/

.navigation{
list-style-type: none;
text-align: center;
display: inline;
text-align: center;
margin: 0 15px 0 0;
padding: 3px 8px 3px 8px;
text-decoration: none;
color: #93a3a4;
background-color: #000000;
border: 1px dotted #000000;
}
.navigation:hover{
background-color: #000000;
color: #DBDBDB;
}

.titre{
display:block;
border-bottom:4px double #000000;
padding-bottom:10px;
font-weight:bold;
font-size:14px;
text-align:center;
}

* a.info {
position: relative;
color: white;
text-decoration: none;
}

a.info span {
display: none; /* on masque l'infobulle */

}
a.info:hover {
background: none; /* correction d'un bug IE */
z-index: 999; /* on définit une valeur pour l'ordre d'affichage */

cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
a.info:hover span {
display: inline; /* on affiche l'infobulle */
position: absolute;

white-space: normal

top: 50px;
left: 50px;

background-color: #000000;

color: #93a3a4;
padding: 3px;

border: 1px solid #93a3a4;
width: 150px;}

Pôle Emploi HP

Messages : 1690

Page d'Accueil 4

A mettre dans "Message sur la page d'accueil"

Code:: <br><div style="margin: auto; text-align: center; width: 700px;">
</div><div style="text-align: center; width: 700px;">
<a href="http://" class="navigation"><b>Règlement</b></a>

<a href="http://" class="navigation"><b>Contexte</b></a>

<a href="http://" class="navigation"><b>Présentation</b></a>

<a href="http://" class="navigation"><b>Avatars</b></a>
</div>
<br>
<table>
<tr>
<td>
<table>
<tr>
<td id="desc"><p style="text-align:center;font-size:14px;"><div style="margin: auto; text-align: center; width: 60%;">
</div><span class="titre">
Le Contexte
</span></div>
<br>
<div style="overflow: auto; width: 90%; height: 100px;">
<div style="margin: auto; text-align: left; width: 100%;">
</div>
<font size="1">
</font><ul>
<font size="1"> </font><div align="justify"><font size="1">Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla Blablabla Blablabla Blabla Blablabla Blabla
<br></font></div><font size="1"><br><br>

</font></ul></div></td>
<td>
<td></div></div><br><br>
<div id="staff"><td class="droite" width="35%"><span class="titre">
Les Postes Vacants
</span>
<center><marquee onmouseover="this.stop()" ;="" padding:="" margin-left:="" 0px;="" width:="" 200px;="" height:=""60px;="" onmouseout="this.start()" scrollamount="1" scrolldelay="1" direction="up"><center><div style="">
<a href="http://"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"></a> <a href="http://"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"></a></div><div style="">
<a href="http://"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"></a> <a href="http://"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"></a></div><div style="">
<a href="http://"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"></a> <a href="http://"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"></a></div>
</center></marquee></td></tr></table></a> </div>
</td>
</tr>
</table>
<table><br><br>
<tr>
<td id="anim"><table style="margin: auto; text-align: center; width: 60%;"><span class="titre">
Le Staff
</span>
<br>
<center><a class="info"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"><span><center>Prénom Nom<br>Rang sur le Forum</center></span></a> <a class="info"><img src="http://img10.hostingpics.net/pics/143262IconePA.png"><span><center>Prénom Nom<br>Rang sur le Forum</center></table></td>
<td id="partenaire"><td class="droite" width="50%"><span class="titre">
Les Partenaires
</span>
<br>
<center><marquee onmouseover="this.stop()" ;="" padding:="" margin-left:="" 0px;="" width:="" 200px;="" height:="" 40px;="" onmouseout="this.start()" scrollamount="1" scrolldelay="1" direction="left"><center>
<center>
<a href="http://"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a> <a href="http://"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a> <a href="http://"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a> <a href="http://"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a></center></center></marquee><br><br>( <a href="http://">Les Autres</a> ) - ( <a href="http://">Vous ?</a> )</p></td>
<td><div id="credits"><span class="titre">
Informations et Crédits
</span><br><br><br>
<center><center>Toute reproduction totale ou partielle du Forum est interdite.<br><br>

Page d'Accueil par <a href="http://pole-emploi-hp.forumsrpg.com/">Roxy</a>.<br><br>

Ouverture du Forum le ...</center></div><hr /></td></tr></table></td></tr></table></div>

A mettre dans le CSS

Code:: /*PA*/

.navigation{
list-style-type: none;
text-align: center;
display: inline;
text-align: center;
margin: 0 15px 0 0;
padding: 3px 8px 3px 8px;
text-decoration: none;
color: #93a3a4;
background-color: #000000;
border: 1px dotted #000000;
}
.navigation:hover{
background-color: #000000;
color: #DBDBDB;
}

.titre{
display:block;
border-bottom:4px double #000000;
padding-bottom:10px;
font-weight:bold;
font-size:14px;
text-align:center;
}

* a.info {
position: relative;
color: white;
text-decoration: none;
}

a.info span {
display: none; /* on masque l'infobulle */

}
a.info:hover {
background: none; /* correction d'un bug IE */
z-index: 999; /* on définit une valeur pour l'ordre d'affichage */

cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
a.info:hover span {
display: inline; /* on affiche l'infobulle */
position: absolute;

white-space: normal

top: 50px;
left: 50px;

background-color: #000000;

color: #93a3a4;
padding: 3px;

border: 1px solid #93a3a4;
width: 150px;}

Pôle Emploi HP

Messages : 1690

Page d'Accueil 5

A mettre dans "Message sur la page d'accueil"

Code:: <div id="en_tete"><br><br>
<table cellpadding="0" cellspacing="0" width="800px">
<tbody><tr>
<td id="colonne_gauche"><h1>Navigation</h1><ul id="menu">
<li><a href="#">Avant de jouer</a>
<ul><li><a href="#">Règlement</a></li>
<li><a href="#">Contexte</a></li></ul></li>

<li><a href="#">Présentations</a>
<ul><li><a href="#">Fiche</a></li>
<li><a href="#">Présentation en cours</a></li></ul></li>

<li><a href="#">Postes Vacants</a>
<ul><li><a href="#">Scénarios des Membres</a></li>
<li><a href="#">Liste des Avatars</a></li></ul></li>
</ul></td>
<td id="colonne_centre"><h1>Contexte</h1><p>Votre contexte ici.</p></td>
<td id="colonne_droite"><h1>Staff</h1><br><div id="staff"><a href="http://" class="infobulle"><img src="http://img4.hostingpics.net/pics/535799MiniIcone.png" class="img_red_staff"><span><table class="tab_infobulle"><tbody><tr><td><img src="http://img4.hostingpics.net/pics/814675AvatarPA.png" class="avatar_staff"><br><p class="pseudo_staff">Prénom Nom<br><font size="1">Rang sur le Forum</font></p><p class="contact"><a href="http://">Voir son profil</a><br><a href="http://">Lui envoyer un MP</a></p></td></tr></tbody></table></span></a>
<a href="http://" class="infobulle"><img src="http://img4.hostingpics.net/pics/535799MiniIcone.png" class="img_red_staff"><span><table class="tab_infobulle"><tbody><tr><td><img src="http://img4.hostingpics.net/pics/814675AvatarPA.png" class="avatar_staff"><br><p class="pseudo_staff">Prénom Nom<br><font size="1">Rang sur le Forum</font></p><p class="contact"><a href="http://">Voir son profil</a><br><a href="http://">Lui envoyer un MP</a></p></td></tr></tbody></table></span></a>
<a href="http://" class="infobulle"><img src="http://img4.hostingpics.net/pics/535799MiniIcone.png" class="img_red_staff"><span><table class="tab_infobulle"><tbody><tr><td><img src="http://img4.hostingpics.net/pics/814675AvatarPA.png" class="avatar_staff"><br><p class="pseudo_staff">Prénom Nom<br><font size="1">Rang sur le Forum</font></p><p class="contact"><a href="http://">Voir son profil</a><br><a href="http://">Lui envoyer un MP</a></p></td></tr></tbody></table></span></a>
</div><br><center><a href="http://">Le Staff en Détail ...</a></center><br><br></td>
</tr>
</tbody></table>
<table cellpadding="0" cellspacing="0" width="800px">
<tbody><tr>
<td id="colonne_centre"><h1>Top Partenaires</h1><br><div id="partenaires"><br><a href="http://" target="_blank"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a> <a href="http://" target="_blank"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a> <a href="http://" target="_blank"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a> <a href="http://"target="_blank"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a><br><br></div></td>
<td id="colonne_droite"><h1>Crédits</h1><br><p>Page d'accueil by <a href="http://pole-emploi-hp.forumsrpg.com/" target="_blank">Roxy</a></p></td>
</tr>
</tbody></table><br><br>
</div>

A mettre dans le CSS

Code:: /*PAGE D'ACCUEIL*/
#en_tete{
width: 700 px;
background-color: #000C1B;
margin:auto;
-border-radius: 30px;
-moz-border-radius:30px;
-webkit-border-radius:30px;
-khtml-border-radius:30px;
}

#en_tete #colonne_gauche{
width : 200px;
}

#en_tete #colonne_centre{
width : 300px;
}

#en_tete #colonne_droite{
width : 200px;
}

#en_tete tr{
vertical-align:top;
}

#en_tete h1{
propriété;
background-color: #93A299;
text-align: center;
margin: 0 15px 0 0;
padding: 3px 8px 3px 8px;
color: black;
}

#navigation a:hover{
background-color: #93A299;
color: #FFFFFF;
font-variant : small-caps;
}

#en_tete p{
text-align:center;
}

#en_tete #partenaires{
text-align:center;
}

#staff{
text-align:center;
}

/*INFOBULLE*/
a.infobulle {
position: relative;
text-decoration:none;
}

a.infobulle img{
border:0;
}

a.infobulle span {
display: none; /*Masque l'infobulle*/
}
a.infobulle:hover {
background: none; /*Pour le "bug" d'internet explorer*/
z-index: 999;
}

a.infobulle:hover span {
display: inline; /*Pour afficher l'infobulle au passage de la souris*/
position: absolute;
width:130px;;
text-align:center;
z-index: 999;

white-space: nowrap; /*Pour éviter les retours à la ligne non désirés*/

bottom: 25px; /*Position de l'infobulle*/
left: 20px;

background-color:#93A299;/*Couleur de fond*/

color: black; /*Couleur du texte*/
padding: 3px;

/*Bordures de l'infobulle*/
border: 1px double black;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-bottomleft:5px;
-webkit-border-radius-bottomright:5px;
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
-border-radius-bottomleft:5px;
-border-radius-bottomright:5px;
-border-radius-topleft:5px;
-border-radius-topright:5px;
-khtml-border-radius-bottomleft:5px;
-khtml-border-radius-bottomright:5px;
-khtml-border-radius-topleft:5px;
-khtml-border-radius-topright:5px;
}

.tab_infobulle{
width:130px;
border:0;
position:relative;
}

.img_red_staff{
border:0;
padding:2px;
}

.pseudo_staff{
font-weight:bold;
font-size:12px;
color:black;
border-bottom:1px dotted black;
}

.avatar_staff{
margin:auto;
height:150px;
}

Pôle Emploi HP

Messages : 1690

Page d'Accueil 6

A mettre dans "Message sur la page d'accueil"

Code:: <div id="en_tete"><br><br>
<table cellpadding="0" cellspacing="0" width="800px">
<tbody><tr>
<td id="colonne_gauche"><h1>Bienvenue</h1><br><blockquote>Ton texte de bienvenue ici. Ton texte de bienvenue ici. Ton texte de bienvenue ici. Ton texte de bienvenue ici. Ton texte de bienvenue ici. Ton texte de bienvenue ici. Ton texte de bienvenue ici. Ton texte de bienvenue ici. Ton texte de bienvenue ici. Ton texte de bienvenue ici.</blockquote><br><br><h1>PV Disponibles</h1><p><center><marquee onmouseover="this.stop()" ;="" padding:="" margin-left:="" 0px;="" width:="" 200px;="" height:="" 120px;="" onmouseout="this.start()" scrollamount="4" scrolldelay="1" direction="left"><div style=""><img src="http://img4.hostingpics.net/pics/668851Icone.png"> <img src="http://img4.hostingpics.net/pics/668851Icone.png"> <img src="http://img4.hostingpics.net/pics/668851Icone.png"> <img src="http://img4.hostingpics.net/pics/668851Icone.png"></div></marquee><div style="text-align: center;"><a href="http://"> + de PV</a></div></center></p><br><br><h1>News du Forum</h1><br><blockquote>Tes news ici. Tes news ici. Tes news ici. Tes news ici. Tes news ici. Tes news ici. Tes news ici. Tes news ici. Tes news ici. Tes news ici.</blockquote></td>
<td id="colonne_centre"></td>
<td id="colonne_droite"><h1>Liens Rapide</h1><div style="text-align: center; width: 300px;"><br><br>
<a href="http://" class="navigation"><b>Règlement</b></a><br>
<a href="http://" class="navigation"><b>Contexte</b></a><br>
<a href="http://" class="navigation"><b>Présentation</b></a><br>
<a href="http://" class="navigation"><b>Avatars</b></a>
</div><br><br><h1>Staff</h1><br><div id="staff"><a href="http://" class="infobulle"><img src="http://img4.hostingpics.net/pics/668851Icone.png" class="img_red_staff"><span><table class="tab_infobulle"><tbody><tr><td><p class="pseudo_staff">Prénom et Nom<br><font size="1">Rang sur le Forum</font></p><p class="contact"><a href="http://">Voir son profil</a><br><a href="http://">Lui envoyer un MP</a></p></td></tr></tbody></table></span></a>
<a href="http://" class="infobulle"><img src="http://img4.hostingpics.net/pics/668851Icone.png" class="img_red_staff"><span><table class="tab_infobulle"><tbody><tr><td><p class="pseudo_staff">Prénom et Nom<br><font size="1">Rang sur le Forum</font></p><p class="contact"><a href="http://">Voir son profil</a><br><a href="http://">Lui envoyer un MP</a></p></td></tr></tbody></table></span></a>
</div><br><br><h1>Top Partenaires</h1><p><a href="http://"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a> <a href="http://"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a> <a href="http://"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a></p></td>
</tr>
</tbody></table><br><br><div style="margin: auto; text-align: center; width: 800px;">
</div><div style="text-align: right;">Page d'Accueil by <a href="http://pole-emploi-hp.forumsrpg.com/">Roxy</a></div></div>

A mettre dans le CSS

Code:: /*PAGE D'ACCUEIL*/
#en_tete{
width: 800 px;
background-image: url("http://img4.hostingpics.net/pics/148206FondNoir.png");
margin:auto;
}

#en_tete #colonne_gauche{
width : 450px;
}

#en_tete #colonne_droite{
width : 350px;
}

#en_tete h1{
propriété;
background-color: black;
text-align: center;
margin: 0 15px 0 0;
padding: 3px 8px 3px 8px;
color: white;
}

#navigation a:hover{
background-color: #93A299;
color: #663F25;
font-variant : small-caps;
}

#en_tete p{
text-align:center;
}

#en_tete #partenaires{
text-align:center;
}

#staff{
text-align:center;
}

/*INFOBULLE*/
a.infobulle {
position: relative;
text-decoration:none;
}

a.infobulle img{
border:0;
}

a.infobulle span {
display: none; /*Masque l'infobulle*/
}
a.infobulle:hover {
background: none; /*Pour le "bug" d'internet explorer*/
z-index: 999;
}

a.infobulle:hover span {
display: inline; /*Pour afficher l'infobulle au passage de la souris*/
position: absolute;
width:130px;;
text-align:center;
z-index: 999;

white-space: nowrap; /*Pour éviter les retours à la ligne non désirés*/

bottom: 25px; /*Position de l'infobulle*/
left: 20px;

background-image: url("http://img4.hostingpics.net/pics/148206FondNoir.png");/*Image de fond*/

color: black; /*Couleur du texte*/
padding: 3px;

/*Bordures de l'infobulle*/
border: 1px double black;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-bottomleft:5px;
-webkit-border-radius-bottomright:5px;
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
-border-radius-bottomleft:5px;
-border-radius-bottomright:5px;
-border-radius-topleft:5px;
-border-radius-topright:5px;
-khtml-border-radius-bottomleft:5px;
-khtml-border-radius-bottomright:5px;
-khtml-border-radius-topleft:5px;
-khtml-border-radius-topright:5px;
}

.tab_infobulle{
width:130px;
border:0;
position:relative;
}

.img_red_staff{
border:0;
padding: 2px;
}

.pseudo_staff{
font-weight:bold;
font-size:12px;
color:black;
border-bottom:1px dotted black;
}

Pôle Emploi HP

Messages : 1690

Page d'Accueil 7

A mettre dans "Message sur la page d'accueil"

Code:: <div style="width: 800px"><div id="descr"><h1 class="h1_pres">Contexte</h1>
<p>Votre Contexte ici ...</p></div><div class="staffs">
<h2 class="h2_pres">Nos partenaires</h2><div id="partenaires"><br><a href="http://" target="_blank"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a> <a href="http://" target="_blank"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a> <a href="http://" target="_blank"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a> <a href="http://"target="_blank"><img src="http://img10.hostingpics.net/pics/956658Partenaires.png"></a><br><br></div>

<h2 class="h2_pres">Crédits</h2><p>Page d'accueil by <a href="http://pole-emploi-hp.forumsrpg.com/" target="_blank">Roxy</a></p>
</div><div class="staffs"><h1 class="h1_pres">Staff</h1><div id="staff"><a href="http://" class="infobulle"><img src="http://img4.hostingpics.net/pics/535799MiniIcone.png" class="img_red_staff"><span><table class="tab_infobulle"><tbody><tr><td><img src="http://img4.hostingpics.net/pics/814675AvatarPA.png" class="avatar_staff"><br><p class="pseudo_staff">Prénom Nom<br><font size="1">Rang sur le Forum</font></p><p class="contact"><a href="http://">Voir son profil</a><br><a href="http://">Lui envoyer un MP</a></p></td></tr></tbody></table></span></a>
<a href="http://" class="infobulle"><img src="http://img4.hostingpics.net/pics/535799MiniIcone.png" class="img_red_staff"><span><table class="tab_infobulle"><tbody><tr><td><img src="http://img4.hostingpics.net/pics/814675AvatarPA.png" class="avatar_staff"><br><p class="pseudo_staff">Prénom Nom<br><font size="1">Rang sur le Forum</font></p><p class="contact"><a href="http://">Voir son profil</a><br><a href="http://">Lui envoyer un MP</a></p></td></tr></tbody></table></span></a>
<a href="http://" class="infobulle"><img src="http://img4.hostingpics.net/pics/535799MiniIcone.png" class="img_red_staff"><span><table class="tab_infobulle"><tbody><tr><td><img src="http://img4.hostingpics.net/pics/814675AvatarPA.png" class="avatar_staff"><br><p class="pseudo_staff">Prénom Nom<br><font size="1">Rang sur le Forum</font></p><p class="contact"><a href="http://">Voir son profil</a><br><a href="http://">Lui envoyer un MP</a></p></td></tr></tbody></table></span></a>
</div><br><center><a href="http://">Le Staff en Détail ...</a></center><br><br></div><div class="navigation"><h1 class="h1_pres">Navigation</h1>
<ul id="menu">
<li><a href="#">Avant de jouer</a>
<ul><li><a href="#">Règlement</a></li>
<li><a href="#">Contexte</a></li></ul></li>

<li><a href="#">Présentations</a>
<ul><li><a href="#">Fiche</a></li>
<li><a href="#">Présentation en cours</a></li></ul></li>

<li><a href="#">Postes Vacants</a>
<ul><li><a href="#">Scénarios des Membres</a></li>
<li><a href="#">Liste des Avatars</a></li></ul></li>
</ul>
</div></div>

A mettre dans le CSS

Code:: /*PAGE D'ACCUEIL */

/* les titre */
.h2_pres{
background-color: black;
font-size: 14px;
text-shadow: 0px 0px 9px #777;
color: #ffffff;
border-bottom: 1px dashed #ffffff;}

.h1_pres{
background-color: black;
font-size: 16px;
text-align: center;
text-shadow: 0px 0px 9px #777;
color: #ffffff;
border-bottom: 1px dashed #ffffff;}

/* les boites */
#descr{
background-color: black;
float: left;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
width: 770px;
margin-top:10px;
margin-bottom: 20px;
margin-right: 30px;
margin-left: 10px;
Padding-left: 10px;
Padding-bottom: 10px;
text-align: left;
border: 1px dashed #ffffff;
height: 98px;
font-size: 12px;
color: white;}

.staffs{
height: 215px;
width: 250px;
float: left;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
margin-left: 10px;
border: 1px dashed #ffffff;
background-color: black;
text-align: center;}

.navigation{
height: 215px;
width: 250px;
background-color: black;
float: left;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
margin-left: 10px;
border: 1px dashed #ffffff;
text-align: left;}

/*INFOBULLE*/
a.infobulle {
position: relative;
text-decoration:none;
}

a.infobulle img{
border:0;
}

a.infobulle span {
display: none; /*Masque l'infobulle*/
}
a.infobulle:hover {
background: none; /*Pour le "bug" d'internet explorer*/
z-index: 999;
}

a.infobulle:hover span {
display: inline; /*Pour afficher l'infobulle au passage de la souris*/
position: absolute;
width:130px;;
text-align:center;
z-index: 999;

white-space: nowrap; /*Pour éviter les retours à la ligne non désirés*/

bottom: 25px; /*Position de l'infobulle*/
left: 20px;

background-color:#93A299;/*Couleur de fond*/

color: black; /*Couleur du texte*/
padding: 3px;

/*Bordures de l'infobulle*/
border: 1px double black;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-bottomleft:5px;
-webkit-border-radius-bottomright:5px;
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
-border-radius-bottomleft:5px;
-border-radius-bottomright:5px;
-border-radius-topleft:5px;
-border-radius-topright:5px;
-khtml-border-radius-bottomleft:5px;
-khtml-border-radius-bottomright:5px;
-khtml-border-radius-topleft:5px;
-khtml-border-radius-topright:5px;
}

.tab_infobulle{
width:130px;
border:0;
position:relative;
}

.img_red_staff{
border:0;
padding:2px;
}

.pseudo_staff{
font-weight:bold;
font-size:12px;
color:black;
border-bottom:1px dotted black;
}

.avatar_staff{
margin:auto;
height:150px;
}

Pôle Emploi HP

Messages : 1690

Page d'Accueil 8

Onglet 1

Onglet 2

Onglet 3

A mettre dans "Message sur la page d'accueil"

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Un système d'onglet en javascript</title>
<script type="text/javascript">
//
</script>
</head>
<body>
<div class="systeme_onglets">
<div class="onglets">
<span class="onglet_0 onglet" id="onglet_quoi" onclick="javascript:change_onglet('quoi');">Accueil</span>
<span class="onglet_0 onglet" id="onglet_qui" onclick="javascript:change_onglet('qui');">Postes Vacants</span>
<span class="onglet_0 onglet" id="onglet_chose" onclick="javascript:change_onglet('chose');">Staff et Crédits</span>
</div>
<div class="contenu_onglets">
<div class="contenu_onglet" id="contenu_onglet_quoi">
<br>
<br><div style="margin: auto; text-align: center; width: 700px;">
</div><div style="text-align: center; width: 800px;">
<table width="800px" cellpadding="0" cellspacing="0"><tr><td><h1><a href="http://" class="navigation"><font face="Georgia"><b>Règlement</b></font></a></h1></td>

<td><h1><a href="http://" class="navigation"><font face="Georgia"><b>Présentation</b></font></a></h1></td>

<td><h1><a href="http://" class="navigation"><font face="Georgia"><b>Avatars</b></font></a></h1></td></tr></table>

</div>
<br><br>
Nous demandons ... lignes minimum.<br><br><br><br><table width="800px" cellpadding="0" cellspacing="0">
<tr><td id="colonne gauche" class="titre"><h1>Contexte</h1><br><div style="width:350px;height:150px;overflow:auto;"><p><strong>I</strong>ci sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte. Ici sera inscrit le contexte.</p></div></td><td id="colonne droite" class="titre"><h1>News du Forum</h1><p>Le forum a ouvert ses portes le ...</p><p>Autre News</p></td></tr></table><br>
</font>
</div>
</div>
<div class="contenu_onglet" id="contenu_onglet_qui">
<br><table><tr><td><div style="border: 4px solid white; padding: 10px; width: 80px; height: 80px;-moz-border-radius: 100px; background-image: url(http://img4.hostingpics.net/pics/668851Icone.png);"></div></td><td><div style="border: 4px solid white; padding: 10px; width: 80px; height: 80px;-moz-border-radius: 100px; background-image: url(http://img4.hostingpics.net/pics/668851Icone.png);"></div></td><td><div style="border: 4px solid white; padding: 10px; width: 80px; height: 80px;-moz-border-radius: 100px; background-image: url(http://img4.hostingpics.net/pics/668851Icone.png);"></div></td><td><div style="border: 4px solid white; padding: 10px; width: 80px; height: 80px;-moz-border-radius: 100px; background-image: url(http://img4.hostingpics.net/pics/668851Icone.png);"></div></td></tr></table><br>

<h1><a href="http://" class="navigation"><b>Voir tous les Postes Vacants</b></a></h1></div>
</div>
<div class="contenu_onglet" id="contenu_onglet_chose">
<br><table width="800px" cellpadding="0" cellspacing="0">
<br><h1>Staff et Crédits</h1><br><tr><td><div style="text-align: center;"><p>Toute reproduction totale ou partielle du Forum est interdite.<br><br><br>Page d'Accueil par <a href="http://fofolies.forumotion.com/forum.htm">Roxy</a></p></div><br></td><td><a class="info"><div style="border: 4px solid white; padding: 10px; width: 80px; height: 80px;-moz-border-radius: 100px; background-image: url(http://img4.hostingpics.net/pics/668851Icone.png);"></div><span><center>Prénom Nom<br>Rang sur le Forum</center></span></a></td><td><a class="info"><div style="border: 4px solid white; padding: 10px; width: 80px; height: 80px;-moz-border-radius: 100px; background-image: url(http://img4.hostingpics.net/pics/668851Icone.png);"></div><span><center>Prénom Nom<br>Rang sur le Forum</center></span></a></td><td><a class="info"><div style="border: 4px solid white; padding: 10px; width: 80px; height: 80px;-moz-border-radius: 100px; background-image: url(http://img4.hostingpics.net/pics/668851Icone.png);"></div><span><center>Prénom Nom<br>Rang sur le Forum</center></span></a></td></tr></table></div>
<script type="text/javascript">
//
</script>
</body>
</html>

A mettre dans le CSS

Code:: /*Page d'Accueil*/
.navigation{
list-style-type: none;
text-align: center;
display: inline;
margin: 0 15px 0 0;
padding: 3px 8px 3px 8px;
color: #AE8C76;
text-decoration: none;
font-size:20px;
}
.navigation:hover{
color: #AE8C76;
}

.onglet
{
display:inline-block;
margin-left:3px;
margin-right:3px;
padding: 3px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-khtml-border-radius:5px;
border: 2px solid black;
background-color: white ;
color: #663F25;
cursor:pointer;
}
.onglet_0
{
background: white;
border-bottom:2px solid black;
}
.onglet_1
{
background:#D9D6CE;
border-bottom:0px solid black;
padding-bottom:4px;
}
.contenu_onglet
{
background-image: url("http://img4.hostingpics.net/pics/778266FondPApng.png");
border: 2px solid black;
-moz-border-radius : 5px;
margin-top:-1px;
padding:5px;
display:none;
color:#D9D6CE;
}
ul
{
margin-top:0px;
margin-bottom:0px;
margin-left:-10px;
}
h1
{
margin:0px;
padding:0px;
}

h1{
propriété;
background-image: url("http://i1016.photobucket.com/albums/af284/emelyc/grossf5.jpg");
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-border-radius: 15px;
-khtml-border-radius:15px;
border: 2px solid black;
text-align: center;
margin: 0 15px 0 0;
padding: 3px 8px 3px 8px;
color: black;
font-weight:bold;
font-size:18px;
text-align:center;
}

#colonne_gauche, #colonne_droite{
width : 400px;
}

* a.info {
position: relative;
color: black;
text-decoration: none;
}

a.info span {
display: none; /* on masque l'infobulle */

}
a.info:hover {
background: none; /* correction d'un bug IE */
z-index: 999; /* on définit une valeur pour l'ordre d'affichage */

cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
a.info:hover span {
display: inline; /* on affiche l'infobulle */
position: absolute;

white-space: normal;

top: 50px;
left: 10px;

background-color: white;

color: #4A2113;
-moz-border-radius : 5px 5px 5px 5px;
padding: 3px;

border: 2px solid black ;
width: 150px;}

Pôle Emploi HP

Messages : 799

Page d'accueil 9
(les images de fond et du staff sont modifiables bien entendu)

[Page d'Accueil]Une base pour travailler ... Aperau15

A mettre dans "Message sur la page d'accueil"

Code:: <div id="en_tete">

<p>
<a href=# class="lien_nav_entete">• Contexte & groupes</a>
<a href=# class="lien_nav_entete">• Règlement</a>
<a href=# class="lien_nav_entete">• Présentation</a>
<a href=# class="lien_nav_entete">• Poste Vacants</a> </p>

<table>
<tr>
<td class="titre_tableau_entete">Contexte</td>
<td class="titre_tableau_entete">Scoops</td>
<td class="titre_tableau_entete">Nouveautés et staff</td>
</tr>

<tr>

<td class="tableau_entete"><marquee style="height: 240px; width: 190px" direction="up" onmouseover=this.stop(); onmouseout=this.start(); SCROLLAMOUNT=1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tortor est. Phasellus sed libero vitae odio interdum ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus ac lacus lectus, imperdiet varius ante. Aliquam mattis metus sit amet elit pharetra accumsan. Maecenas lacinia cursus pellentesque. Morbi venenatis commodo lorem, ultrices eleifend magna gravida et. Aliquam erat volutpat. Donec nec nisl vel eros elementum consequat vel eu purus. Phasellus ut sem tellus. Sed augue tortor, tincidunt vel vulputate et, facilisis nec justo. Nulla sollicitudin luctus odio non dignissim. </marquee></td>

<td class="tableau_entete"><div style="margin:auto; overflow-y: auto; height: 250px; width: 200px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tortor est. Phasellus sed libero vitae odio interdum ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus ac lacus lectus, imperdiet varius ante. Aliquam mattis metus sit amet elit pharetra accumsan. Maecenas lacinia cursus pellentesque. Morbi venenatis commodo lorem, ultrices eleifend magna gravida et. Aliquam erat volutpat. Donec nec nisl vel eros elementum consequat vel eu purus. Phasellus ut sem tellus. Sed augue tortor, tincidunt vel vulputate et, facilisis nec justo. Nulla sollicitudin luctus odio non dignissim. </div></td>

<td><DIV style="height: 122px; width: 200px; border: 2px solid #95ADA3; border-radius: 15px; padding: 10px; margin: auto; overflow-y: auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tortor est. Phasellus sed libero vitae odio interdum ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus ac lacus lectus, imperdiet varius ante.</DIV><DIV style="height: 122px; width: 200px; border: 2px solid #95ADA3; border-radius: 15px; padding: 10px; text-align:center;">

<a href="#" class="info_bulle"><img src="http://i63.servimg.com/u/f63/14/93/14/05/image_12.jpg" onMouseOver="this.src ='http://i63.servimg.com/u/f63/14/93/14/05/image_13.jpg';" onMouseOut="this.src ='http://i63.servimg.com/u/f63/14/93/14/05/image_12.jpg';" /><span><table cellspacing="1" cellpadding="1" border="0"><tr><td>Pseudo ~ Rang</td></tr></table></span></a>

<a href="#" class="info_bulle"><img src="http://i63.servimg.com/u/f63/14/93/14/05/image_12.jpg" onMouseOver="this.src ='http://i63.servimg.com/u/f63/14/93/14/05/image_13.jpg';" onMouseOut="this.src ='http://i63.servimg.com/u/f63/14/93/14/05/image_12.jpg';" /><span><table cellspacing="1" cellpadding="1" border="0"><tr><td>Pseudo ~ Rang</td></tr></table></span></a>

<a href="#" class="info_bulle"><img src="http://i63.servimg.com/u/f63/14/93/14/05/image_12.jpg" onMouseOver="this.src ='http://i63.servimg.com/u/f63/14/93/14/05/image_13.jpg';" onMouseOut="this.src ='http://i63.servimg.com/u/f63/14/93/14/05/image_12.jpg';" /><span><table cellspacing="1" cellpadding="1" border="0"><tr><td>Pseudo ~ Rang</td></tr></table></span></a>

</DIV></td>
</tr>
</table>

</div>

A mettre dans le CSS

Code:: /****************************************/
/*ENTETE*/

#en_tete{
background-image:url('http://i63.servimg.com/u/f63/14/93/14/05/fondco12.jpg');
margin-top: -10px;
}

.lien_nav_entete{
border: 2px solid #95ADA3;
border-radius: 50px;
padding: 2px;
}

.lien_nav_entete:hover{
border:2px dotted #5F7A70;
font-variant:small-caps;
text-decoration: none !important;
}

.titre_tableau_entete {
font-variant: small-caps;
font-size: 18px;
font-color: #5F7A70;
height: 25px;
border: 2px solid #95ADA3;
border-radius: 15px;
padding: 5px;
}

.tableau_entete {
height: 250px;
width: 200px;
border: 2px solid #95ADA3;
border-radius: 15px;
padding: 10px;
}

/*INFOBULLE*/
.info_bulle{
position:relative
}

.info_bulle span{
display:none
}

.info_bulle:hover span{
display:inline;
width: 175px;
height: 25px;
background-color:#000000;
border: 2px solid #e31f5b;
border-radius: 10px;
padding: 5px;
text-decoration: none !important;

position: absolute;
bottom: -35px;
left: -60px;
}

Pôle Emploi HP

Pôle Emploi HP