Bon alors voilà l'exemple.
Historique d'exempleVoici le code source html :
Code:
<html>
<head>
<link href="styles.css" media="all" rel="stylesheet" type="text/css" />
<title>Historique</title>
</head>
<body background="http://goldenage.nainwak.org/images/style/cellpic4.gif" style="background-repeat: repeat;">
<table id="tableau">
<tr class="entete">
<td>Date</td><td>Type</td><td>Détails</td>
</tr>
<tr id="closeRange">
<td class="date">20-05-2009 10:12:52</td><td class="type">Attaque physique</td>
<td><p><a href="historique.html" class="info_perso"><b id="closeRange">Toro</b><em class="ennemis">
<i>Nom :</i> <b>Toro</b><br /><i>Clan :</i> Orientaux<br /><i>Guilde :</i> Les sabres dansants<br /><i>Grade :</i> Général
</em></a> vous a attaqué, il vous a fait <b>587</b> points de dégâts.
<br />Vous avez riposté en infligeant <b>146</b> points de dégâts.
</p></td>
</tr>
<tr id="closeRange">
<td class="date">20-05-2009 10:12:56</td><td class="type">Attaque physique</td>
<td><p>Vous avez esquivé une attaque de <a href="historique.html" class="info_perso"><b id="closeRange">Toro</b><em class="ennemis">
<i>Nom :</i> <b>Toro</b><br /><i>Clan :</i> Orientaux<br /><i>Guilde :</i> Les sabres dansants<br /><i>Grade :</i> Général</em></a>.
<br />Vous avez riposté en infligeant <b>243</b> points de dégâts.
</p></td>
</tr>
<tr id="spell">
<td class="date">20-05-2009 10:44:15</td><td class="type">Attaque magique</td>
<td><p><a href="historique.html" class="info_perso"><b id="spell">Medusa</b><em class="ennemis">
<i>Nom :</i> <b>Medusa</b><br /><i>Clan :</i> Orientaux<br /><i>Guilde :</i> Les sabres dansants<br /><i>Grade :</i> Reine
</em></a> vous a lancé un sort, elle vous a fait <b>2498</b> points de dégâts.
<br />Vous ne pouvez pas riposter à une attaque magique.
</p></td>
</tr>
<tr id="spell">
<td class="date">20-05-2009 10:45:08</td><td class="type">Attaque magique</td>
<td><p>Vous êtes pris dans l'aire d'effet du sort de <a href="historique.html" class="info_perso"><b id="spell">Medusa</b><em class="ennemis">
<i>Nom :</i> <b>Medusa</b><br /><i>Clan :</i> Orientaux<br /><i>Guilde :</i> Les sabres dansants<br /><i>Grade :</i> Reine
</em></a>. Elle vous a causé <b>476</b> points de dégâts.
<br />Vous ne pouvez pas riposter à une attaque magique.
</p></td>
</tr>
<tr id="soin">
<td class="date">20-05-2009 11:02:12</td><td class="type">Soin</td>
<td><p><a href="historique.html" class="info_perso"><b id="soin">Binabik</b><em class="amis">
<i>Nom :</i> <b>Binabik</b><br /><i>Clan :</i> Occidentaux<br /><i>Guilde :</i> La confrérie argentée<br /><i>Grade :</i> Comte<br /><i>Classe :</i> Moine<br /><i>Rang :</i> 5
</em></a> vous a soigné, il vous a rendu <b>1561</b> points de vie.
</p></td>
</tr>
<tr id="longRange">
<td class="date">20-05-2009 11:28:49</td><td class="type">Attaque à distance</td>
<td><p><a href="historique.html" class="info_perso"><b id="longRange">Tonton</b><em class="ennemis">
<i>Nom :</i> <b>Tonton</b><br /><i>Clan :</i> Nordistes<br /><i>Guilde :</i> Les sangliers furieux<br /><i>Grade :</i> Duc
</em></a> vous a tiré dessus, Il vous a causé <b>476</b> points de dégâts.
<br />Vous ne pouvez pas riposter à une attaque à distance.
</p></td>
</tr>
<tr id="longRange">
<td class="date">20-05-2009 11:29:00</td><td class="type">Attaque à distance</td>
<td><a>Vous avez paré une attaque à distance de <a href="historique.html" class="info_perso"><b id="longRange">Tonton</b><em class="ennemis">
<i>Nom :</i> <b>Tonton</b><br /><i>Clan :</i> Nordistes<br /><i>Guilde :</i> Les sangliers furieux<br /><i>Grade :</i> Duc
</em></a>.
<br />Vous ne pouvez pas riposter à une attaque à distance.
</a></td>
</tr>
<tr id="spell">
<td class="date">20-05-2009 11:33:01</td><td class="type">Attaque magique</td>
<td><p><a href="historique.html" class="info_perso"><b id="spell">Medusa</b><em class="ennemis">
<i>Nom :</i> <b>Medusa</b><br /><i>Clan :</i> Orientaux<br /><i>Guilde :</i> Les sabres dansants<br /><i>Grade :</i> Reine
</em></a> vous a lancé un sort, elle vous a fait <b>1896</b> points de dégâts.
<br />Vous ne pouvez pas riposter à une attaque magique.
</p></td>
</tr>
<tr id="mort">
<td class="date">20-05-2009 11:33:01</td><td class="type">Mort</td>
<td><p>Vous avez été tué par : <a href="historique.html" class="info_perso"><b id="mort">Medusa</b><em class="ennemis">
<i>Nom :</i> <b>Medusa</b><br /><i>Clan :</i> Orientaux<br /><i>Guilde :</i> Les sabres dansants<br /><i>Grade :</i> Reine
</em></a>.
</p></td>
</tr>
<tr id="soin">
<td class="date">20-05-2009 16:18:50</td><td class="type">Résurrection</td>
<td><p><a href="historique.html" class="info_perso"><b id="soin">Binabik</b><em class="amis">
<i>Nom :</i> <b>Binabik</b><br /><i>Clan :</i> Occidentaux<br /><i>Guilde :</i> La confrérie argentée<br /><i>Grade :</i> Comte<br /><i>Classe :</i> Moine<br /><i>Rang :</i> 5
</em></a> vous a ramené à la vie, il vous a rendu <b>2561</b> points de vie.
</p></td>
</tr>
<tr id="closerange">
<td class="date">20-05-2009 16:31:09</td><td class="type">Titan</td>
<td><p>Vous êtes pris dans l'aire d'effet du <a href="historique.html" class="info_perso"><b id="closeRange">Titan Nordiste</b><em class="ennemis">
<i>Invocation :</i> <b>Titan Nordiste</b><br /><i>Clan :</i> Nordiste<br /><i>Niveau :</i> 70<br />
</em></a>, il vous a causé <b>816</b> points de dégâts.
</p></td>
</tr>
<tr id="chant">
<td class="date">20-05-2009 16:43:21</td><td class="type">Malédiction</td>
<td><p>Vous avez résisté à une malédiction de : <a href="historique.html" class="info_perso"><b id="chant">Benadur</b><em class="ennemis">
<i>Nom :</i> <b>Benadur</b><br /><i>Clan :</i> Nordiste<br /><i>Guilde :</i> Le sanctuaire de Thor<br /><i>Grade :</i> Duc
</em></a>.
</p></td>
</tr>
<tr id="chant">
<td class="date">20-05-2009 16:43:27</td><td class="type">Malédiction</td>
<td><p><a href="historique.html" class="info_perso"><b id="chant">Benadur</b><em class="ennemis">
<i>Nom :</i> <b>Benadur</b><br /><i>Clan :</i> Nordiste<br /><i>Guilde :</i> Le sanctuaire de Thor<br /><i>Grade :</i> Duc
</em></a> vous a maudit de <b>249</b> points de malédiction.
</p></td>
</tr>
<tr id="ressources">
<td class="date">20-05-2009 19:05:06</td><td class="type">Ressources</td>
<td><p>Les Nordistes ont gagné le contrôle de la mine <a href="historique.html" class="info_item"><b id="ressources">Akrama</b><em>
<b>Mine Akrama</b><br /><i>Clan :</i> Nordistes<br /><i>Type :</i> Mine de fer<br /><i>Position :</i> Inconnue
</em></a>.
</p></td>
</tr>
<tr id="ressources">
<td class="date">20-05-2009 20:53:19</td><td class="type">Ressources</td>
<td><p>Les Orientaux ont gagné le contrôle de la Scierie <a href="historique.html" class="info_item"><b id="ressources">Taramis</b><em>
<b>Mine Taramis</b><br /><i>Clan :</i> Orientaux<br /><i>Type :</i> Scierie de bois précieux<br /><i>Position :</i> Inconnue
</em></a>.
</p></td>
</tr>
<tr id="ressources">
<td class="date">20-05-2009 22:23:34</td><td class="type">Ressources</td>
<td><p><a href="historique.html" class="info_perso"><b id="ressources">Zéthos</b><em class="guilde">
<i>Nom :</i> <b>Zéthos</b><br /><i>Clan :</i> Occidentaux<br /><i>Guilde :</i> Les Sectateurs<br /><i>Grade :</i> Duc<br /><i>Classe :</i> Guerrier<br /><i>Rang :</i> 5
</em></a> a extrait la dernière ressource de la mine <a href="historique.html" class="info_item"><b id="ressources">BlackSabbath</b><em>
<b>Mine BlackSabbath</b><br /><i>Clan :</i> Occidentaux<br /><i>Type :</i> Mine de mithril<br /><i>Position :</i> Oklamah 27;12
</em></a>, cherchez un autre filon.
</p></td>
</tr>
<tr id="guilde">
<td class="date">21-05-2009 09:17:24</td><td class="type">Guilde</td>
<td>Marzy a quitté la guilde.</td>
</tr>
<tr id="guilde">
<td class="date">21-05-2009 09:20:31</td><td class="type">Guilde</td>
<td>Marzy a été recruté dans la guilde par SirGalahaad.</td>
</tr>
<tr id="guilde">
<td class="date">21-05-2009 10:33:54</td><td class="type">Guilde</td>
<td>Marzy a été viré de la guilde par Sir_DEC.</td>
</tr>
<tr id="guilde">
<td class="date">21-05-2009 11:00:31</td><td class="type">Guilde</td>
<td>Gharcy a été promue nouveau Officier de la guilde par SirGalahaad.</td>
</tr>
<tr id="guilde">
<td class="date">21-05-2009 11:00:35</td><td class="type">Guilde</td>
<td>Gharcy a été promue nouveau Chef de la guilde par SirGalahaad.</td>
</tr>
<tr id="autre">
<td class="date">21-05-2009 12:42:09</td><td class="type">Commerce</td>
<td><p><a href="historique.html" class="info_perso"><b id="autre">Garat</b><em class="amis">
<i>Nom :</i> <b>Garat</b><br /><i>Clan :</i> Occidentaux<br /><i>Guilde :</i> La confrérie argentée<br /><i>Grade :</i> Compte<br /><i>Classe :</i> Spadassin<br /><i>Rang :</i> 5
</em></a> vous a acheté : <a href="historique.html" class="info_item"><b id="autre">Bouclier en fer</b><em>
<p id="center"><b>Bouclier en fer</b>
<br /><i>Ce bouclier rond en fer est très résistant aux attaques perçantes. N'ayez plus peur des flêches !</i>
<br />Requis : Niveau 50, Force 75
<br />Recommandé : Niveau 60
<br />Type : Bouclier lourd
<br />Protection : 75
<br />Durabilité : 120 / 120
</em></a> pour 161 pièces d'or.
</p></td>
</tr>
<tr id="autre">
<td class="date">21-05-2009 13:35:03</td><td class="type">Boutique</td>
<td>Folitude a utilisé votre portail et vous fait gagner 384 pièces d'or.</td>
</tr>
<tr id="autre">
<td class="date">21-05-2009 14:38:13</td><td class="type">Boutique</td>
<td>Tak vous a fait réparer son équipement, pour 4 pièces d'or.</td>
</tr>
<tr id="guilde">
<td class="date">21-05-2009 16:23:54</td><td class="type">Guilde</td>
<td>Sir_DEC a fait un don à la guilde de 8500 pièces d'or.</td>
</tr>
<tr id="quete">
<td class="date">22-05-2009 19:22:04</td><td class="type">Quête</td>
<td>Vous avez accepté une nouvelle quête : Crime et chatiment</td>
</tr>
<tr id="quete">
<td class="date">24-05-2009 08:35:40</td><td class="type">Quête</td>
<td>Vous avez terminé avec succès la quête : Crime et chatiment</td>
</tr>
<tr id="quete">
<td class="date">24-05-2009 09:01:18</td><td class="type">Quête</td>
<td>Vous avez abandonné la quête : Le collectionneur</td>
</tr>
</table>
</body>
</html>
Voici le code source css :
Code:
#tableau, #tableau caption
{
margin: auto;
}
#tableau
{
border: #DDEEFF 2px solid;
border-collapse: separate;
border-spacing: 2px;
border-color: #B5A088;
empty-cells: hide;
width=100%;
}
#mort
{
color:red;
background-color: #FFDADA;
border: #FFDADA 1px solid;
font-size: 13px;
text-decoration:none;
}
#guilde
{
color:green;
background-color: #CCFFCC;
border: #CCFFCC 1px solid;
font-size: 13px;
text-decoration:none;
}
#closeRange
{
color: #FF6600;
background-color: #FFFFCC;
border: #FFFFCC 1px solid;
font-size: 13px;
text-decoration:none;
}
#longRange
{
color: #FF6600;
background-color: #FFFFCC;
border: #FFFFCC 1px solid;
font-size: 13px;
text-decoration:none;
}
#spell
{
color: #FF6600;
background-color: #FFFFCC;
border: #FFFFCC 1px solid;
font-size: 13px;
text-decoration:none;
}
#chant
{
color: #808000;
background-color: #FFFFCC;
border: #FFFFCC 1px solid;
font-size: 13px;
text-decoration:none;
}
#soin
{
color:blue;
background-color: #CCFFFF;
border: #CCFFFF 1px solid;
font-size: 13px;
text-decoration:none;
}
#general
{
color:purple;
background-color: #FFCC66;
border: #FFCC66 1px solid;
font-size: 13px;
text-decoration:none;
}
#ressources
{
color:maroon;
background-color: #F5E0C8;
border: #F5E0C8 1px solid;
font-size: 13px;
text-decoration:none;
}
#quete
{
color: #800080;
background-color: #EECCFF;
border: #EECCFF 1px solid;
font-size: 13px;
text-decoration:none;
}
#autre
{
color:black;
background-color: #DDDDDD;
border: #DDDDDD 1px solid;
font-size: 13px;
text-decoration:none;
}
tr.entete {
color:black;
text-align:center;
font:bold;
}
td.date {
text-align:center;
}
td.type {
text-align:center;
}
td.desc {
text-align:right;
}
#center {
text-align:center;
}
/* ---------- INFOBULLES PERSONNAGES ---------- */
a.info_perso em {
display:none;
}
a.info_perso:hover {
border: 0;
position: relative;
z-index: 500;
color: #808080;
text-decoration:none;
}
a.info_perso:hover em {
font-style: normal;
display: block;
position: absolute;
top: 20px;
left: -10px;
padding: 5px;
color: #000;
border: 1px solid #bbb;
background: #FFFFFF;
width:200px;
/* essayer avec la couleur #D5C0A8 en background */
}
a.info_perso:hover em.amis {
background: #CCFFFF;
}
a.info_perso:hover em.ennemis {
background: #FFDADA;
}
a.info_perso:hover em.guilde {
background: #CCFFCC;
}
a.info_perso:hover em.other {
background: #FFFFFF;
}
/* ---------- INFOBULLES OBJETS ---------- */
a.info_item em {
display:none;
}
a.info_item:hover {
border: 0;
position: relative;
z-index: 500;
color: #808080;
text-decoration:none;
}
a.info_item:hover em {
font-style: normal;
display: block;
position: absolute;
top: 20px;
left: -10px;
padding: 5px;
color: #000;
border: 1px solid #bbb;
background: #B5A088;
width:300px;
}
/* ---------- INFOBULLES QUETES ---------- */
a.info_quest em {
display:none;
}
a.info_quest:hover {
border: 0;
position: relative;
z-index: 500;
color: #808080;
text-decoration:none;
}
a.info_quest:hover em {
font-style: normal;
display: block;
position: absolute;
top: 20px;
left: -10px;
padding: 5px;
color: #000;
border: 1px solid #bbb;
background: #EECCFF;
width:300px;
}
Bon, c'est pas très compatible 100% sur Firefox (certaines infos bulles ne marchent pas, et il ne doit pas y avoir soulignement sur les liens).
Je suis pas très satisfait du rendu final. Je vais essayer d'améliorer tout ça.