Problème de signe sur la PA.

[Oz-Chan]

Bonjour,
Dernier problème et après je vous laisse tranquille pour ma version ! >.<
Il y a un drôle de problème sur ma PA... Il y a 4 signes de carte mais pourtant, même avec le code, elle n'affiche que le trèfle sur ma deuxième colonne. oO Comme vous pouvez le voir ici :
Alors que j'aimerai cet ordre là qui est aussi dans mon CSS :
règlement ♠ ♦ Présentation
Question ♥ ♣ Bottin avatar
Relation ♣ ♥ Groupes
Chain & Pouvoir ♦ ♠ Demande de RP
Comme vous le voyez, les deux derniers trèfles de droite ne devrait pas être là..
Voici mon CSS de ma PA:

Code:

/* PA */
/* Les propriétés étranges de Lyloox, DEBUT */

.staff {
  display: inline-block;
}
.staff ul { font:.75em "lucida grande", arial, sans-serif; overflow:auto; background:#eee; list-style:none; } 
.staff li { width:100px; height:100px; position:relative;z-index:5; vertical-align:middle; -moz-border-radius:5px; padding:0px; overflow:hidden; float:left; } 
.staff li:hover { position:relative; z-index:10; box-shadow: 0px 0px 2px #000; -htm-transform:all;-htm-transition:1s;-moz-transform:all;-moz-transition:1s;-o-transform:all;}
.staff li:hover p { margin-top:-85px; } 
.staff strong { display:block; letter:spacing:2px; color:#EE6E6E; }
.staff a {color:#EE6E6E; font-weight:500; }

.staff div {
  display: inline-block;
}


/* Onglet 3 */

#onglet3 .admins img { border-radius:5%; border: 2px solid orange; margin:3px; }
#onglet3 h1, #onglet3 h2{ font-size:15px;font-family:Time News Roman,serif; font-style:italic; color:white; text-shadow: 0px 0px 3px #A40000;
-htm-transform:all;-htm-transition:1s;-o-transform:all;
  -o-transition:1s;-webkit-transform:all;-webkit-transition:1s; }
#onglet3 h1:hover, #onglet3 h2:hover { color:#A40000; text-shadow: -5px -3px 2px #870000, 16px 8px #FFA6A6;
-htm-transform:all;-htm-transition:1s;-o-transform:all;
  -o-transition:1s;-webkit-transform:all;-webkit-transition:1s;}
#onglet3 { margin:auto;}
#onglet3 .admins {display:block; text-align:center; }

#onglet3 .admins img {margin-top: 0px; margin-left: 0px;}

#onglet3 .coupsdecoeur
{ margin-left:170px; text-align:center; width:220px; padding:15px; border: 2px dotted #870000; border-radius:30px; 
  border-top: 3px solid #FFEF9C; border-right: 1px solid #870000; border-bottom: 3px solid #870000;
  border-left: 1px solid #FFEF9C;}
#onglet3 .credits {
clear: none;
margin: -292px 0 0 430px;
text-align: center;
width: 300px;
height: 256px;
background-color: whiteSmoke;
padding: 15px;
border: 3px solid #FFEF9C;
font-size: 11px;
}
#onglet3 .modos {text-align:center; display:block;}


/* Autres machins */

.onglet3 img { padding:2px; border: 1px solid; border-radius:7px; text-align:center; background-color:#EEEEEE; opacity:0.8; }
.onglet3 img {margin:6px; border: 1px solid; border-radius:7px; }
.onglet3:hover {opacity:1;}

.infobulle {position:relative;text-decoration:none; display:inline;}
.infobulle span {display:none; text-align:justify}
.infobulle:hover{background:none;cursor:help;z-index:999}
.infobulle:hover span{border-radius:5px;background-color:#EEEEEE; border-left: 3px solid #EC5E61; border-right: 3px solid #EC5E61;
  display:inline;left:50px;margin-right:5px;padding:8px;position:absolute;top:5px;white-space:normal;width:200px}

.onglets { text-align:center; margin:auto; display:block;cursor:pointer;}

.onglet { display:inline-block; height: 34px; width: 150px; }   

.onglet_0 { padding:8px; margin:3px; font-size:16px; }
        .onglet_1 { padding:8px; margin:3px; font-size:16px; }
       
        #onglet_abc.onglet_1{
        background: url('http://i43.servimg.com/u/f43/16/13/48/98/1o10.png');}
        #onglet_ledeuxieme.onglet_1{
        background: url(' http://i43.servimg.com/u/f43/16/13/48/98/o2o10.png');}
        #onglet_ghi.onglet_1 {
        background: url(' http://i43.servimg.com/u/f43/16/13/48/98/o3o10.png');}
       
        #onglet_abc.onglet_0{
        background: url(' http://i43.servimg.com/u/f43/16/13/48/98/1f10.png');}
        #onglet_ledeuxieme.onglet_0{
        background: url('  http://i43.servimg.com/u/f43/16/13/48/98/o2f10.png');}
        #onglet_ghi.onglet_0 {
        background: url('  http://i43.servimg.com/u/f43/16/13/48/98/o3f10.png');}

.contenu_onglet { padding:5px; display:none; height:434px}

.imageetcontexte { text-align:justify; border-left: 3px solid #FFEF9C; border-right: 3px solid #FFEF9C; padding:10px; }

.blabladesnews { text-align:center; margin:20px; width:530px; max-width:550px; overflow:auto; padding:15px; border: 2px dotted #FFEF9C; border-radius:30px; 
  border-top: 3px solid #FFEF9C; border-right: 1px solid #FFEF9C; border-bottom: 3px solid #FFEF9C;
  border-left: 1px solid #FFEF9C;border-radius: 10px 10px 0px 0px;  }
.blabladesnews span { float:right;font-size:23px; margin-top:-30px; font-family:Verdana,Arial,Helvetica,sans-serif; color:#FFDF40; text-shadow: 0px 0px 5px #FFDF40;
-htm-transform:all;-htm-transition:1s;-moz-transform:all;-moz-transition:1s;-o-transform:all;
  -o-transition:1s;-webkit-transform:all;-webkit-transition:1s; }
.blabladesnews span:hover {  margin-right:90px; color:FFEF9C; text-shadow: -16px -9px #FF733B, 2px 3px 1px #A40000;
-htm-transform:all;-htm-transition:1s;-moz-transform:all;-moz-transition:1s;-o-transform:all;
  -o-transition:1s;-webkit-transform:all;-webkit-transition:1s;}
.blabladesnews h1 { color:#FF733B; text-decoration:blink; display:inline; }
.blabladesnews h2 { color:#FFDF40; display:inline; }

/* Animations des prédéfinis, onglet 1 de la PA */
#predef {margin-left:21px; }
#predef ul { font:.75em "lucida grande", arial, sans-serif; overflow:auto; width:495px; background:#96734c; list-style:none; } 
#predef li {  border-radius: 16px; width:163px; height:85px; position:relative;z-index:5; margin:5px 0px 5px -60px; vertical-align:middle; -moz-border-radius:5px; padding:0px; border: 3px solid #870000; overflow:hidden; float:left; } 
#predef li:hover { position:relative; z-index:10; margin-left:-40px; border-color:#FFDF40; box-shadow: 2px 2px 4px #000; -htm-transform:all;-htm-transition:1s;-moz-transform:all;-moz-transition:1s;-o-transform:all;}
#predef p { font-size:10px; height:85px; padding:0 10px; opacity:.8; background:#96734c; -webkit-transition: margin-top 1.5s ease-out; -moz-transition: margin-top 1.5s ease-out; transition: margin-top 1.5s ease-out; } 
#predef li:hover p { margin-top:-88px; } 
#predef strong { padding-top:3px; display:block; }
#predef a {color:#FFDF40; font-weight:500; }

/* Mise en page des liens de navigation, onglet 1 de la PA */
#navi {float:left; display:block;}
#navi .entete { width:450px; position:relative; margin-top:-20px; -htm-transform:all;-htm-transition:1s;-o-transform:all;
  -o-transition:1s;-webkit-transform:all;-webkit-transition:1s;-moz-transform:all;-moz-transition:1s; text-align:center; color:#FFEF9C; text-shadow: 0px 0px 5px yellow; font-family:Time News Roman, serif; margin:auto; display:block; z-index:150; font-size:18px; font-style:italic;}
#navi .entete:hover { -htm-transform:all;-htm-transition:1s;-moz-transform:all;-moz-transition:1s;-o-transform:all;
  -o-transition:1s;-webkit-transform:all;-webkit-transition:1s; color:#FF733B; letter-spacing:3px; text-shadow: 0px 0px 5px #FF8A8A; }
#liens { background-image: url(http://i43.servimg.com/u/f43/16/13/48/98/sprout11.png); background-repeat: no-repeat; background-position : center ;  border-radius: 30px; display:table-cell; vertical-align:middle; height:120px; width:500px; max-width:540px; margin:auto; border: 2px solid #870000; border-radius:30px; font-family:Verdana,Arial,Helvetica,sans-serif; font-size: 12px; text-align:center; background-color: #C24444; }
.colonne1 { float:left;width:255px; }
.colonne2 { margin-left:260px; display:block;}
.colonne1 a, .colonne2 a {-htm-transform:all;-htm-transition:1s;-moz-transform:all;-moz-transition:1s;-o-transform:all;
  -o-transition:1s;-webkit-transform:all;-webkit-transition:1s; padding-left:10px;padding-left:}
.colonne2 .pique a:before { content: "♠"; padding-right:5px; }
.colonne2 .carreau a:before { content: "♦"; padding-right:5px; }
.colonne2 .coeur a:before { content: "♥"; padding-right:5px; }
.colonne2 .trefle a:before { content: "♣"; padding-right:5px; }

.colonne1 .pique a:before { content: "♠"; padding-right:5px; }
.colonne1 .carreau a:before { content: "♦"; padding-right:5px; }
.colonne1 .coeur a:before { content: "♥"; padding-right:5px; }
.colonne1 .trefle a:before{ content: "♣"; padding-right:5px; }

.colonne1 a:hover {-htm-transform:all;-htm-transition:1s;-moz-transform:all;-moz-transition:1s;-o-transform:all;
  -o-transition:1s;-webkit-transform:all;-webkit-transition:1s; text-transform:none; text-decoration:none !important; color:#FF733B; letter-spacing:3px;padding-left:60px !important;}
.colonne2 a:hover {-htm-transform:all;-htm-transition:1s;-moz-transform:all;-moz-transition:1s;-o-transform:all;
  -o-transition:1s;-webkit-transform:all;-webkit-transition:1s; text-transform:none; text-decoration:none !important; color:#FF733B; letter-spacing:3px;padding-right:60px !important;}


/* Les propriétés étranges de Lyloox, FIN */

/* Le bazar ajouté de Foocha' */

.onglets span {
margin-right: 75px;
}

#onglet_abc {
margin-left: 72px;
}

#onglet3 {
  border-spacing:0px;
}

/* contexte onglet 1 */

.contexte {
height: 180px;
overflow: auto;
max-width: 355px;
display: block;
margin: auto;
margin-top: 3px;
background-color: #C24444;
padding: 15px;
border: 3px solid #870000;
font-size: 11px;
border-radius: 16px;
overflow: auto;
}

/* navigation predefs onglet 1 */

#lienspredef {
display: table-cell;
vertical-align: middle;
height: 55px;
width: 500px;
max-width: 540px;
margin: auto;
border: 2px solid #870000;
border-radius: 30px;
  font-size: 12px;
font-family: Verdana,Arial,Helvetica,sans-serif;
text-align: center;
background-color: #C24444;
}

#lienspredef a {
-htm-transform: all;
-htm-transition: 1s;
-moz-transform: all;
-moz-transition: 1s;
-o-transform: all;
-o-transition: 1s;
-webkit-transform: all;
-webkit-transition: 1s;
padding-left: 10px;
}

#lienspredef .pique a:before { content: "♠"; padding-right:5px; }
#lienspredef .carreau a:before { content: "♦"; padding-right:5px; }
#lienspredef .trefle a:before { content: "♣"; padding-right:5px; }

#lienspredef a:hover {-htm-transform:all;-htm-transition:1s;-moz-transform:all;-moz-transition:1s;-o-transform:all;
  -o-transition:1s;-webkit-transform:all;-webkit-transition:1s; text-transform:none;
text-decoration:none !important; color:#FF733B; letter-spacing:3px;}
/* staff */

.fonda {
        height:62px;
  display: inline-block;
}
.fonda ul {
  font:.75em "lucida grande", arial, sans-serif;
  overflow:auto;
  background:#eee;
  list-style:none; } 

.fonda li {
  width:230px;
  height:80px;
  position:relative;
  z-index:5;
  vertical-align:middle;
  border-radius:5px;
  adding:0px;
  overflow:hidden;
  float:left;
  margin-right: 8px;
  border: 2px solid #FFDF40;
  padding:2px;
  margin-bottom: -8px;
} 

.fonda p {
font-size: 20px;
height: 82px;
opacity: .8;
background: #96734c;
-webkit-transition: margin-top 1.5s ease-out;
-moz-transition: margin-top 1.5s ease-out;
transition: margin-top 1.5s ease-out;
  padding:6px;
}

.fonda li:hover {
  position:relative;
  z-index:10;
  -htm-transform:all;
  -htm-transition:1s;
  -moz-transform:all;
  -moz-transition:1s;
  -o-transform:all;
  border: 2px solid #DE0000;
  padding:2px;
}
.fonda li:hover p { margin-top:-85px; } 

.admin {
      height:89px;
  display: inline-block;
}
.admin ul {
  font:.75em "lucida grande", arial, sans-serif;
  overflow:auto;
  background:#96734c;
  list-style:none; } 

.admin li {
  width:145px;
  height:100px;
  position:relative;
  z-index:5;
  vertical-align:middle;
  border-radius:5px;
  adding:0px;
  overflow:hidden;
  float:left;
  margin-right: 8px;
  border: 2px solid #FFDF40;
  padding:2px;
  margin-bottom: -8px;
} 

.admin p {
font-size: 14px;
height: 97px;
opacity: .8;
background: #96734c;
-webkit-transition: margin-top 1.5s ease-out;
-moz-transition: margin-top 1.5s ease-out;
transition: margin-top 1.5s ease-out;
  padding:6px;
}

.admin li:hover {
  position:relative;
  z-index:10;
  -htm-transform:all;
  -htm-transition:1s;
  -moz-transform:all;
  -moz-transition:1s;
  -o-transform:all;
  border: 2px solid #FF7B47;
  padding:2px;
}
.admin li:hover p { margin-top:-105px; }

.modo {
        height:65px;
  display: inline-block;
}
.modo ul {
  font:.75em "lucida grande", arial, sans-serif;
  overflow:auto;
  background:#96734c;
  list-style:none; } 

.modo li {
  width:85px;
  height:65px;
  position:relative;
  z-index:5;
  vertical-align:middle;
  border-radius:5px;
  adding:0px;
  overflow:hidden;
  float:left;
  margin-right: 8px;
  border: 2px solid #FFDF40;
  padding:2px;
} 

.modo p {
font-size: 10px;
height: 63px;
opacity: .8;
background: #96734c;
-webkit-transition: margin-top 1.5s ease-out;
-moz-transition: margin-top 1.5s ease-out;
transition: margin-top 1.5s ease-out;
  padding:6px;
  padding-top: 5px;
}

.modo li:hover {
  position:relative;
  z-index:10;
  -htm-transform:all;
  -htm-transition:1s;
  -moz-transform:all;
  -moz-transition:1s;
  -o-transform:all;
  border: 2px solid #cba78f;
  padding:2px;
}
.modo li:hover p { margin-top:-68px; }

/* Credits */

.creditstd {
  height:115px;
background-repeat: no-repeat;
padding-left: 43px;
background-position-x: 38px;
}

#blacredits {
width: 480px;
  background-color: #C24444;
text-align: justify;
height: 77px;
overflow: auto;
margin-bottom: 8px;
  border: 1px solid #870000;
border-radius: 5px;
padding: 2px;
}
 
/* coup de coeur */

.coupcoeur img {
margin-right: 6px;
margin-bottom: 8px;
    -htm-transform:all;
  -htm-transition:1s;
  -moz-transform:all;
  -moz-transition:1s;
  -o-transform:all;
  border: 2px solid #EFFF94;
  border-radius: 5px;
  padding:2px;
}

.coupcoeur img:hover {
border: 2px solid #F07F05;
    -htm-transform:all;
  -htm-transition:1s;
  -moz-transform:all;
  -moz-transition:1s;
  -o-transform:all;
  padding:2px;
}


.coupcoeur div {
 color:#FFEF9C;
  height:19px;
font-size: 23px;
margin-top: 2px;
font-family: Verdana,Arial,Helvetica,sans-serif;
text-shadow: 0px 0px 5px #FFEF9C;
-htm-transform: all;
-htm-transition: 1s;
-moz-transform: all;
-moz-transition: 1s;
-o-transform: all;
-o-transition: 1s;
-webkit-transform: all;
-webkit-transition: 1s;
margin-bottom: -6px;
}

.coupcoeur div:hover { 
  color:#FFDF40;
  text-shadow: -16px -9px #FFA6A6, 2px 3px 1px #A40000;
-htm-transform:all;
  -htm-transition:1s;
  -moz-transform:all;
  -moz-transition:1s;
  -o-transform:all;
  -o-transition:1s;
  -webkit-transform:all;
  -webkit-transition:1s;
}

/* Fin du bazar ajouté de Foocha' */

et le HTML :

Code:

<!-- javascript permettant l'attribution des onglets -->
<script type="text/javascript">
//<!--
function change_onglet(name)
{
document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
document.getElementById('contenu_onglet_'+name).style.display = 'block';
anc_onglet = name;
}
-->//
</script>
<table width="950px" height="434px" style="background-image:url(http://i42.servimg.com/u/f42/13/82/15/09/kyu112.jpg); border-radius:5px; -o-border-radius:5px; -webkit-border-radius:5px;"><tr><td><div class="contenu_onglet" id="contenu_onglet_abc"><div class="imageetcontexte" style="float:right;">

<center><img src="http://i42.servimg.com/u/f42/17/52/74/50/fichet10.jpg" /></center><p class="contexte"><b>Cent ans auparavant...</b><br/><br/>

Terreur, haine, désespoir… tout n’était que ténèbres sur la capitale, tandis que les corps tombaient les uns après les autres, la vie les laissant derrière elle, abandonnés sur cette terre de souffrance. Glen Baskerville était devenu complètement fou. Ivre de rage, il ne croyait plus en rien depuis la disparition de sa chère et tendre Lacie. L’amour de sa vie l’avait laissé, et plus rien ne valait la peine d’être vécu en ce monde. Il ordonna à ses fidèles Baskerville de réduire la ville à terre et à sang. Qui aurait cru que ce jour-là, qui avait si bien commencé pour chacun, tel un jour banal dans la vie quotidienne, une pièce de théâtre que l’on s’évertuait à répéter, allait se terminer ainsi ? Ca avait commencé par une attaque… et puis plus rien. Sablier disparut, et la Tragédie prit fin.<br/><br/>

<i>Il est une histoire que l’on raconte aux enfants pour leur faire peur. Une histoire qui dit que s’ils ne sont pas sages, les Messagers de l’Abysse, dans leur long manteau rouge sang, viendront les chercher, eux et tous les criminels, pour les enfermer dans une prison. Et une fois à l’intérieur, il est impossible d’en ressortir…</i><br/><br/><a href="http://pandora-hearts-abyss.forumactif.com/t1414-contexte">Lire la suite.</a> et <a href="http://pandora-hearts-abyss.forumactif.com/t1414-contexte">Lire les intrigues.</a><br/><br/></p>

</div><div style="max-width:600px; width:540px;">
<ul id="predef">
<!-- Première ligne des prédefs (1 à 4) -->
<li>
<img src="http://i42.servimg.com/u/f42/17/52/74/50/rufus10.jpg" alt="" /> <!-- Pour que les 4 tiennent, les images sont "coupées" à 163*85px : les plus grandes auront un bout coupé et les plus petites un vide entre l'image et le bord. On peut modifier cette taille dans le CSS au niveau de l'id " #predef " associée à la classe " .li " -->
<p>
<strong>Rufus Barma - Barma</strong>
Une phrase qui le décrit, son caractère, ses capacités. <a href="LIEN">Jouez moi !</a>
</p>
</li>
<li>
<img src="http://i42.servimg.com/u/f42/17/52/74/50/will10.jpg" alt="" />
<p>
<strong>Will of the Abyss - Civils</strong>
Une phrase qui le décrit, son caractère, ses capacités. <a href="LIEN">Jouez moi !</a>
</p>
</li>
<li>
<img src="http://i42.servimg.com/u/f42/17/52/74/50/ada10.jpg" alt="" />
<p>
<strong>Ada Bezarius - Bezarius</strong>
Une phrase qui le décrit, son caractère, ses capacités. <a href="LIEN">Jouez moi !</a>
</p>
</li>

<li>
<img src="http://i42.servimg.com/u/f42/17/52/74/50/echo10.jpg" alt="" />
<p>
<strong>Echo Nightray - Nightray</strong>Une phrase qui le décrit, son caractère, ses capacités. <a href="LIEN">Jouez moi !</a>
</p>
</li>

<!-- Deuxième ligne des prédefs (5 à 8) -->

<li>
<img src="http://i42.servimg.com/u/f42/17/52/74/50/anna11.jpg" alt="" />
<p>
<strong>Annaïck L. Baskerville - Baskerville</strong>
Une phrase qui le décrit, son caractère, ses capacités. <a href="LIEN">Jouez moi !</a>
</p>
</li>
<li>
<img src="http://i42.servimg.com/u/f42/17/52/74/50/khain10.jpg" alt="" />
<p>
<strong>Khaine Blackson - Pandora</strong>Une phrase qui le décrit, son caractère, ses capacités. <a href="LIEN">Jouez moi !</a>
</p>
</li>

<li>
<img src="http://i42.servimg.com/u/f42/17/52/74/50/yuuko10.jpg" alt="" />
<p>
<strong>Kagami Rafton - Noblesse</strong>
Une phrase qui le décrit, son caractère, ses capacités. <a href="LIEN">Jouez moi !</a>
</p>
</li>
<li>
<img src="http://i42.servimg.com/u/f42/17/52/74/50/shion10.jpg" alt="" />
<p>
<strong>Light Seadworthy - Sorcier</strong>
Une phrase qui le décrit, son caractère, ses capacités. <a href="LIEN">Jouez moi !</a>
</p>
</li>

</ul>

<!-- Liens par rapport aux predefs --><div id="navi"><div id="lienspredef"><span class="pique"><a href="#">Prédéfinis mangas</a></span> <span class="trefle"><a href="#">Prédéfinis forum</a></span>  <span class="carreau"><a href="#">Postes vacants</a></span></div></div>

</div>

<!--  Liste des liens de navigation --><div id="navi"><div class="entete">Bienvenue, {USER&amp;#8288;NAME} !</div><div id="liens"><div class="colonne1">
<span class="pique"><a href="/t92-reglement">Règlement</a></span><br />
<span class="coeur"><a href="f4-questions-sugestions-probleme">Questions</a></span><br />
<span class="trefle"><a href="/f11-relations">Relationship</a></span><br />
<span class="carreau"><a href="LIEN">Chain & Pouvoir</a></span><br />
</div><div class="colonne2">
<span class="carreau"><a href="/t93-modele-de-presentation">Présentation</a><br />
<span class="trefle"><a href="/f12-bottin-des-avatars">Bottin Avatars</a><br />
<span class="coeur"><a href="Lien du blabla">Groupes</a><br />
<span class="pique"><a href="LIEN">Demande de RP</a> </div>
</div>      </div>
</div>

<!--  Fin du premier onglet,
début du deuxième --><div class="contenu_onglet" id="contenu_onglet_ledeuxieme">

<table> <!-- j'ai choisi de faire le placement des différents trucs par tableau --> <tr>

<!-- Events -->
<td rowspan="2" class="imageetcontexte">
<img src="http://i42.servimg.com/u/f42/17/52/74/50/fichet11.jpg"><br /> <p style="  height:220px;  overflow:auto;  width:300px;  display: block;  margin: auto;  margin-top:15px;  background-color:#C24444;  padding:15px;  border: 3px solid #870000;  max-width:325px;  border-radius: 16px;">« Oyé oyé braves gens ! Venez, prenez part à la fête ! Revêtez vos plus beaux costumes, vos masques les plus délurés, et admirez les confettis qui colorent le ciel ! Allons allons, ne vous faites pas prier, et entrez dans la danse ! »<br/><br/>

La troupe de saltimbanques qui animait le centre de Réveil ne perdait pas une occasion d’entrainer un ou deux passants dans leur joyeuse ronde. C’était jour de fête, et personne n’avait le droit de faire bande à part. Tel un pacte secrètement scellé entre les différents partis, aucune dispute, aucune bataille n’éclaterait pour venir gâcher la Sainte-Brigitte qui égayait les rues de la capitale. <br /><br/> <a href="http://pandora-hearts-abyss.forumactif.com/t1690-event-de-la-ste-brigitte-topic-principal">Lire la suite & Participer</a></p>
</td>

<!-- News -->
<td class="blabladesnews">
<span> Wazzup on PHA ?</span><br><div style="height:250px; overflow:auto;">

<p><h1> 28.01.2012 -</h1> Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news.</p>
<p><h2> 21.01.2012 -</h2> Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news.  </p>
<p><h2> 14.01.2012 -</h2> Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news.  </p>
<p><h2> 07.01.2012 -</h2> Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news.  </p>
<p><h2> 00.01.2012 -</h2> Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news.  </p>

</div>
</td>
</tr>
<tr>
<td>

<!-- Hors-News  -->

<table cellpadding="20" style="table-layout:fixed;border-bottom: 4px solid #FFEF9C;border-right: 1px solid #FFEF9C; border-left: 1px solid #FFEF9C; border-radius: 10px 10px 10px 10px;"><tr><td>
Petite phrase hors news Petite phrase hors newsPetite phrase hors newsPetite phrase hors newsPetite phrase hors newsPetite phrase hors news </td><td style="border-left:4px dotted #FFEF9C; border-radius: 0px 0px 10px 10px;">Petite phrase hors newsPetite phrase hors newsPetite phrase hors newsPetite phrase hors news</td></tr></table>

</td>
</tr>
</table>
</div>

<!-- Fin du deuxième onglet,
début du troisième --><div class="contenu_onglet" id="contenu_onglet_ghi"><div id="onglet3">
 <table id="onglet3">
  <tr>
  <!-- IMAGE POUR FAIRE JOULI -->
   <td rowspan="2" style="border-left: 3px solid #FFEF9C;padding-left: 34px;border-right: 3px solid #FFEF9C;padding-right: 20px;"><img src="http://i42.servimg.com/u/f42/17/52/74/50/fichet12.jpg"/></td>
  <!-- STAFF FONDA -->
   <td style="border-right: 3px solid #FFEF9C;padding-right: 23px;"><ul class="fonda">
  <li><img src="http://i42.servimg.com/u/f42/17/52/74/50/staffa10.jpg"/><p><strong>Ayumi Hasegawa</strong><br/><a href="http://pandora-hearts-abyss.forumactif.com/privmsg?mode=post&u=1">MP</a> - <a href="http://pandora-hearts-abyss.forumactif.com/u1">Profil</a></p></li>
  <li><img src="http://i42.servimg.com/u/f42/17/52/74/50/staffg10.jpg"/><p><strong>Gilbert Nightray</strong><br/><a href="http://pandora-hearts-abyss.forumactif.com/privmsg?mode=post&u=380">MP</a> - <a href="http://pandora-hearts-abyss.forumactif.com/u380">Profil</a></p></li>
</ul></td>
</tr>
<tr><!-- STAFF ADMIN -->
   <td style="border-right: 3px solid #FFEF9C;padding-right: 23px;"><ul class="admin"><li style="margin-right:16px;"><img src="http://i42.servimg.com/u/f42/17/52/74/50/staffw10.jpg"/><p><strong>Wonderland</strong><br/><a href="#">MP</a> - <a href="#">Profil</a></p></li>
  <li style="margin-right:16px;"><img src="http://i42.servimg.com/u/f42/17/52/74/50/staffl10.jpg"/><p><strong>Leo Baskerville</strong><br/><a href="http://pandora-hearts-abyss.forumactif.com/privmsg?mode=post&u=411">MP</a> - <a href="http://pandora-hearts-abyss.forumactif.com/u411">Profil</a></p></li>
  <li><img src="http://i42.servimg.com/u/f42/17/52/74/50/staffa11.jpg"/><p><strong>Alice B-Rabbit</strong><br/><a href="http://pandora-hearts-abyss.forumactif.com/privmsg?mode=post&u=422">MP</a> - <a href="http://pandora-hearts-abyss.forumactif.com/u422">Profil</a></p></li>
</ul></td>
</tr>
<tr>
  <!-- COUP DE COEUR -->
   <td class="coupcoeur" style="border-left: 3px solid #FFEF9C;padding-left: 34px;border-right: 3px solid #FFEF9C;padding-right: 20px;" rowspan="2"><div> Coup de ♥ du staff</div><br/><br/>
 <a href="http://tales-of-world.forumactif.org/"><img class="staffou" src="http://i40.servimg.com/u/f40/12/80/18/70/pa11.jpg"/></a>  <a href="http://airgear.highforum.net/"><img class="staffou" src="http://i43.servimg.com/u/f43/16/13/48/98/hws12510.jpg"/></a>  <a href="http://elegance-temptation.forumsactifs.net/"><img class="staffou" src="http://i40.servimg.com/u/f40/12/80/18/70/ele10.jpg"/></a>  <a href="http://nova-crystallis.forumactif.org/"><img class="staffou" src="http://i40.servimg.com/u/f40/12/80/18/70/light10.jpg"/></a><br/>
 <a href="http://floral-fascination.forumsactifs.com/"><img class="staffou" src="http://i40.servimg.com/u/f40/12/80/18/70/floral10.jpg"/></a></span>  <a href="http://karnevale-avenue2.forumactif.org/"><img class="staffou" src="http://i40.servimg.com/u/f40/12/80/18/70/opiopi11.jpg"/></a>  <img src="http://illiweb.com/fa/pbucket.gif" />  <img src="http://illiweb.com/fa/pbucket.gif" /><br/></td>
  <!-- STAFF MODO -->
   <td style="border-right: 3px solid #FFEF9C;padding-right: 23px;"><ul class="modo">
  <li style="margin-right:42px;"><img src="http://i42.servimg.com/u/f42/17/52/74/50/staffk10.jpg"/><p><strong>Krestell Jezequel </strong><br/><a href="http://pandora-hearts-abyss.forumactif.com/privmsg?mode=post&u=532">MP</a> - <a href="http://pandora-hearts-abyss.forumactif.com/u532">Profil</a></p></li>
  <li style="margin-right:42px;"><img src="http://i42.servimg.com/u/f42/17/52/74/50/staffl11.jpg"/><p><strong>Liz Readers</strong><br/><a href="http://pandora-hearts-abyss.forumactif.com/privmsg?mode=post&u=639">MP</a> - <a href="http://pandora-hearts-abyss.forumactif.com/u639">Profil</a></li>
  <li style="margin-right:43px;"><img src="http://i42.servimg.com/u/f42/17/52/74/50/stafff10.jpg"/><p><strong>Fuyu Akeno</strong><br/><a href="http://pandora-hearts-abyss.forumactif.com/privmsg?mode=post&u=820">MP</a> - <a href="http://pandora-hearts-abyss.forumactif.com/u820">Profil</a></p></li>
  <li><img src="http://i40.servimg.com/u/f40/12/80/18/70/iouoiu10.jpg"/><p><strong>Correcteur</strong><br/><a href="#">MP</a> - <a href="#">Profil</a></p></li>
</ul></td>
</tr>
<tr>
  <!-- CREDITS -->
   <td class="creditstd" style="border-right: 3px solid #FFEF9C;">
    <div id="blacredits"><img height="50px" width="50px" style="float:left;margin-left:5px;" src="http://img100.imageshack.us/img100/1514/firefoxbaggsicon.png"/>Forum optimisé pour <b>Mozilla </b> Firefox. Tout autre navigateur pourrait mal afficher certaines choses ou vous ralentir.
Le manga Pandora Hearts appartient à <b>Jun Mochizuki</b>. Codage de la V.11 par <b>Ayumi Hasegawa</b> avec l'aide d'<b>Alice</b> pour la structure, <b><a href="http://www.elegance-temptation.com/u1138">Lyloox</a></b> & <b><a href="http://www.elegance-temptation.com/u1184">Foocha'</a></b> pour la PA. Thème par <b>Ayumi Hasegawa.</b> Toute copie  est strictement interdite. Suite crédit ici</div></div></td>
</tr>
</table>
<!-- Fin du troisième onglet -->
</td></tr>
<!-- Placement en tableau des onglets, en bas, avec changement en javascript -->
<tr><td><div class="onglets">
<span class="onglet_0 onglet" id="onglet_abc" onclick="javascript:change_onglet('abc');"></span>
        <span class="onglet_0 onglet" id="onglet_ledeuxieme" onclick="javascript:change_onglet('ledeuxieme');"></span>
        <span class="onglet_0 onglet" id="onglet_ghi" onclick="javascript:change_onglet('ghi');"></span>
</div>
</td></tr></table>

<!--  Fin de la PA -->

<!-- javascript permettant de choisir l'onglet affiché au chargement de la page -->
<script type="text/javascript">
//<!--
var anc_onglet = 'abc';
change_onglet(anc_onglet);
//-->
</script>
<table style="position: fixed; bottom: 50px; left: 0px;z-index:10000;"><tr><td><iframe src="    /chatbox/index.forum?page=front;" id="chatboxpop" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0"></iframe></td><td style="vertical-align: bottom;"><img src="http://img811.imageshack.us/img811/1567/chatboxopenb.png" onClick="document.getElementById('chatboxpop').style.display=(this.src=='http://img811.imageshack.us/img811/1567/chatboxopenb.png')?'block':'none';this.src=(this.src=='http://img811.imageshack.us/img811/1567/chatboxopenb.png')?'http://img444.imageshack.us/img444/1227/chatboxclose.png':'http://img811.imageshack.us/img811/1567/chatboxopenb.png';"/></td></tr></table>

Je vous remercie d'avance pour votre future aide !

[Invité]

Bonjour,

Pourquoi être passé par le CSS - ce qui me semble bien compliqué - et ne pas plutôt avoir ajouté les symboles directement dans le code HTML?

Quoi qu'il en soit, en fermant les span dans le code HTML ça fonctionne correctement:

<div class="colonne2">
<span class="carreau"><a href="/t93-modele-de-presentation">Présentation</a></span><br />
<span class="trefle"><a href="/f12-bottin-des-avatars">Bottin Avatars</a></span><br />
<span class="coeur"><a href="Lien du blabla">Groupes</a></span><br />
<span class="pique"><a href="LIEN">Demande de RP</a></span></div>
</div>

Bien sincèrement.

[Oz-Chan]

Bonjour,
c'était pour avoir un meilleur espacement. ^^
C'était tout bête en faite... Je vous remercie beaucoup pour votre aide encore une fois !