Code pour google chrome sur la PA

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Code pour google chrome sur la PA

Message par Oz-Chan le Jeu 15 Nov 2012 - 21:52

Bonsoir,
Je viens vous demander un petit peu d'aide. J'ai un petit problème de code sur ma PA. Il va très bien sur firefox comme vous pouvez le voir ici : mais sur google chrome cela me donne ceci :
Pouvez-vous m'aider?
Voici le code :
CSS
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:justify;
  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;
  -webkit-vertical-align:middle;
  -moz-border-radius:5px;
  -webkit-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;
  -webkit-box-shadow: 2px 2px 4px #000;
  -htm-transform:all;
  -htm-transition:1s;
  -moz-transform:all;
  -moz-transition:1s;
  -webkit-transform:all;
  -webkit-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' */

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/t2333-contexte">Lire la suite.</a> et <a href="http://pandora-hearts-abyss.forumactif.com/t2332-intrigues">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="" />
<p>
<strong>Rufus Barma - Barma</strong>
Duc aimant qu'aucune information ne lui échappe ! Il serait prêt à tout pour connaitre tous vos secrets.<a href="http://pandora-hearts-abyss.forumactif.com/t2319-04-famille-barma#26325"> Jouez moi !</a>
</p>
</li>
<li>
<img src="http://i30.servimg.com/u/f30/12/80/18/70/lily11.jpg" alt="" />
<p>
<strong>Lily Baskerville - Baskerville</strong>
Cadette des Baskervilles, c'est une sadique qui aime s'amuser. Chain Bandersnatch<a href="http://pandora-hearts-abyss.forumactif.com/t2321-05-famille-baskerville#26344"> Jouez moi !</a>
</p>
</li>
<li>
<img src="http://i40.servimg.com/u/f40/12/80/18/70/lacie10.jpg" alt="" />
<p>
<strong>Lacie Baskerville - Chain</strong>
 Mère des Alices sortie de L'Abysse, elle est maintenant errantes dans les ruelles de Réveil.<a href="http://pandora-hearts-abyss.forumactif.com/t2336-06-chains#26359"> Jouez moi !</a>
</p>
</li>

<li>
<img src="http://i41.servimg.com/u/f41/17/81/55/22/pkpo_b10.jpg" alt="" />
<p>
<strong>Liam Lunettes -  Barma/Pandora</strong> Membre de Pandora. Il se sert du March Hare comme Chain pour se battre. <a href="http://pandora-hearts-abyss.forumactif.com/t2319-04-famille-barma#26327"> 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>
Jeune fille ayant une mémoire absolue et la Rufus de son clan. <a href="http://pandora-hearts-abyss.forumactif.com/t2346-02-membres-des-baskervilles#26394">Jouez moi !</a>
</p>
</li>
<li>
<img src="http://i30.servimg.com/u/f30/12/80/18/70/sorcie10.jpg" alt="" />
<p>
<strong>Aelys Bernkastel- Sorcière</strong>Petite sorcière héritière de sa famille au pouvoir pratique mais lui faisant peur...<a href="http://pandora-hearts-abyss.forumactif.com/t2357-07-sorciers#26434">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>
Duchesse aimant les habitants de son pays. Mais pas pour autant sans autorité ! <a href="http://pandora-hearts-abyss.forumactif.com/t2354-05-noblesses#26422">Jouez moi !</a>
</p>
</li>
<li>
<img src="http://i30.servimg.com/u/f30/12/80/18/70/c2011010.jpg" alt="" />
<p>
<strong>Hellias Skyes - Chain</strong>
Chain attachant à la recherche de sa contractante illégale. Il manie le feu et la tempérance. <a href="http://pandora-hearts-abyss.forumactif.com/t2351-03-chains#26410"> Jouez moi !</a>
</p>
</li>

</ul>

<!-- Liens par rapport aux predefs --><div id="navi"><div id="lienspredef"><span class="pique"><a href="http://pandora-hearts-abyss.forumactif.com/f154-predefinis-de-pandora-hearts">Prédéfinis mangas</a></span> <span class="trefle"><a href="http://pandora-hearts-abyss.forumactif.com/f156-predefinis-du-forum">Prédéfinis forum</a></span>  <span class="carreau"><a href="http://pandora-hearts-abyss.forumactif.com/t2334-postes-vacants">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="http://pandora-hearts-abyss.forumactif.com/t2330-reglement">Règlement</a></span><br />
<span class="coeur"><a href="http://pandora-hearts-abyss.forumactif.com/f121-questions-suggestions">Questions</a></span><br />
<span class="trefle"><a href="http://pandora-hearts-abyss.forumactif.com/f110-relationships">Relationship</a></span><br />
<span class="carreau"><a href="http://pandora-hearts-abyss.forumactif.com/t2343-bottin-des-chains-pouvoirs">Chain & Pouvoir</a></span><br />
</div><div class="colonne2">
<span class="carreau"><a href="http://pandora-hearts-abyss.forumactif.com/t2339-modele-de-presentation">Présentation</a></span><br />
<span class="trefle"><a href="http://pandora-hearts-abyss.forumactif.com/t2344-bottin-des-avatars">Bottin Avatars</a></span><br />
<span class="coeur"><a href="http://pandora-hearts-abyss.forumactif.com/t2331-les-groupes">Groupes</a></span><br />
<span class="pique"><a href="http://pandora-hearts-abyss.forumactif.com/t2338-guide-du-nouvel-arrivant">Guide nouvel arrivant</a></span> </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;"><i>«  Vous les avez vu ? Ces éclats de lumière blanc sortir de tous les coins de Réveil ? Des lueurs aveuglantes dégageant une atmosphère dérangeante. Serait-ce un lien avec l’Abysse ? Impossible, un nouveau monde s’offre-t-il à nous ?</i> »</br></br>

Le sol tremble, la nuit n’existe plus. Les membres de Pandora s’affolent et envoient leurs meilleurs troupes jeter un œil à cette lumière qui se trouve être l’opposé de l’Abysse. Des trous se forment de tous les côtés. Les habitants se font aspirer sans qu’ils ne comprennent ce qui leur arrive. Qu’est-il donc en train de se passer ? La capitale sombre-t-elle dans la folie ?<br /><br/> <a href="http://pandora-hearts-abyss.forumactif.com/t2384-event-wonderland-regles">Lire la suite</a> & <a href="http://pandora-hearts-abyss.forumactif.com/f159-welcome-in-wonderland">Participer</a></p>
</td>

<!-- News -->
<td class="blabladesnews">
<span> Wazzup on PHA ?</span><br><div style="height:250px; overflow:auto;">
<p><h2> 10.11.2012 -</h1> Le prédéfini de Jack Bezarius a été remis en libre. </p>
<p><h2> 07.11.2012 -</h1>Deux prédéfinis ont été ajoutés sur le forum ! Kuroi Hasegawa et Elliot L. Edenwayle. ~</p>
<p><h2> 04.11.2012 -</h1> Le chapitre 78 a été posté sur le forum. Bonne lecture !</p>
<p><h1> 26.10.2012 -</h1>Un topic pour vous aider à mettre un avatar et une couleur a été créé <a href="http://pandora-hearts-abyss.forumactif.com/t2474-mettre-un-avatar-choisir-votre-couleur-personnalisee" class="postlink"> A cette adresse. ~</a></p>
<p><h2> 10.10.2012 -</h1> Le chapitre 77 a été posté sur le forum et les prédéfinis de Freya, Symphonie ont été remis en libre.</p>
<p><h2> 23.09.2012 -</h1> Le forum autorise maintenant les membres à avoir quatre comptes. Amusez-vous bien !</p>
<p><h2> 21.09.2012 -</h1> Le prédéfini d'Elliot Nightray a été adapté à notre contexte et où nous en sommes dans le manga pour qu'il soit à nouveau jouable !</p>
<p><h1> 18.09.2012 -</h1>Un topic important a été posté dans le coin question. Nous demandons aux membres de venir donner leur avis pour voir si le projet sera mis en place.  <a href="http://pandora-hearts-abyss.forumactif.com/t2481-le-vrai-repaire-des-baskervilles#27883" class="postlink"> à cette adresse</a> Venez vous amuser !</p>
<p><h2> 11.09.2012 -</h1> Le chapitre 76 a été posté sur le forum !</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>
Nous allons faire que les derniers chapitres qui sortent comme nous nous sommes fait rattrapés. Le chapitre 78 a été posté sur le forum !</td><td style="border-left:4px dotted #FFEF9C; border-radius: 0px 0px 10px 10px;"> N'oubliez pas que nous sommes à la recherche d'un correcteur pour nous aider ! Venez postuler  <a href="http://pandora-hearts-abyss.forumactif.com/t2292-recrutement-correcteur" class="postlink"> Formulaire ici !</a> si le rôle vous intéresse.</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://i30.servimg.com/u/f30/12/80/18/70/nya10.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://i40.servimg.com/u/f40/12/80/18/70/revis10.jpg"/><p><strong>Revis Baserville</strong><br/><a href="http://pandora-hearts-abyss.forumactif.com/privmsg?mode=post&u=883">MP</a> - <a href="http://pandora-hearts-abyss.forumactif.com/u883">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="..."><a href="http://karnevale-avenue2.forumactif.org/"><img class="staffou" src="http://i40.servimg.com/u/f40/12/80/18/70/opiopi11.jpg"/></a> <br/>
<img class="staffou" src="http://i758.photobucket.com/albums/xx227/Cherryiis/PHA%20V10/staffempty.png"/></a> <a href=".."><img class="staffou" src="http://i758.photobucket.com/albums/xx227/Cherryiis/PHA%20V10/staffempty.png"/></a></span>  <a href="http://alone-in-heaven.forum.st/"><img class="staffou" src="http://i43.servimg.com/u/f43/16/13/48/98/bla10.jpg"/></a> <img src="http://i758.photobucket.com/albums/xx227/Cherryiis/PHA%20V10/staffempty.png" /><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://i40.servimg.com/u/f40/12/80/18/70/finoui11.jpg"/><p><strong>Finn Baskerville</strong><br/><a href="http://pandora-hearts-abyss.forumactif.com/privmsg?mode=post&u=892">MP</a> - <a href="http://pandora-hearts-abyss.forumactif.com/u892">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="http://pandora-hearts-abyss.forumactif.com/t2292-recrutement-correcteur#26045">Poste à prendre ici</a> - <a href="#"></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. <a href="http://pandora-hearts-abyss.forumactif.com/t2327-credits">Suite crédits ici</a></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 pour votre future aide !


Dernière édition par Oz-Chan le Lun 19 Nov 2012 - 16:05, édité 1 fois

Oz-Chan
****

Messages : 252
Inscrit(e) le : 01/01/2010

http://pandora-hearts-abyss.forumactif.com/index.htm
Oz-Chan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour google chrome sur la PA

Message par Oz-Chan le Ven 16 Nov 2012 - 22:02

Up !

Oz-Chan
****

Messages : 252
Inscrit(e) le : 01/01/2010

http://pandora-hearts-abyss.forumactif.com/index.htm
Oz-Chan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour google chrome sur la PA

Message par Invité le Sam 17 Nov 2012 - 7:59

Bonjour,
Google chrome n'a pas toute les fonctionnalité du css.
Merci

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour google chrome sur la PA

Message par Oz-Chan le Sam 17 Nov 2012 - 8:02

Bonjour,
merci de votre aide !
C'est donc impossible de mettre mes cases comme je le voudrais en ressemblance à firefox en ajoutant un code bien précis pour google chrome?
Cordialement.

Oz-Chan
****

Messages : 252
Inscrit(e) le : 01/01/2010

http://pandora-hearts-abyss.forumactif.com/index.htm
Oz-Chan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour google chrome sur la PA

Message par Invité le Sam 17 Nov 2012 - 8:10

Bonjour,
Je crois qu'il y en a un , mais je ne sait pas le quel.
Après vous pouvez mettre un message sur votre forum :
Forum optimisé pour

Merci

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour google chrome sur la PA

Message par Milouze14 le Sam 17 Nov 2012 - 8:30

Salut Oz-Chan,

pas de soucis de mon côté avec Chrome,
es tu à jour avec ce navigateur?

Regarde tout en haut à droite clic sur le bouton (trois petits traits verticaux)
puis cliques sur "A propos" .

La dernière version est celle ci :Version 23.0.1271.64 m

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4628
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour google chrome sur la PA

Message par Invité le Sam 17 Nov 2012 - 8:36

Bonjour,
Moi j'ai le même problème sur le forum de Oz-Chan et ma version est la dernière.
Merci

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour google chrome sur la PA

Message par AenigmA le Sam 17 Nov 2012 - 8:41

Bonjour, pas bon avec chrome (dernière version aussi). Arrondis non correct et décollage en haut, comme sur ton image2.

AenigmA
+ Hyperactif +

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour google chrome sur la PA

Message par Milouze14 le Sam 17 Nov 2012 - 9:00

Rolling Eyes ,
oups, j'ai parlé trop vite (enfin écrit Very Happy ).
Effectivement il y a un bug,
m'en vait regarder tout çà Wink .
a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4628
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour google chrome sur la PA

Message par Milouze14 le Sam 17 Nov 2012 - 10:16

Re, bon il y avait des incompréhensions sur les bordures et bien d'autre bricoles,
la css modifiée:



Il faut aussi paramétrer la taille des images :
#predef img
{
width:160px
;height:84px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius: 10px;
}
le code a été ajouté à la css



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:justify;
      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 img{width:160px;height:84px;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius: 10px;}
    #predef {margin-left:21px; }
    #predef ul { font:.75em "lucida grande", arial, sans-serif;
      overflow:auto;
      width:495px;
      background:#96734c;
      list-style:none; }
    #predef li { 
      width:160px;
      height:84px;
      position:relative;
      z-index:5;
      margin:5px 0px 5px -60px;
      vertical-align:middle;
      -webkit-vertical-align:middle;
      -moz-border-radius:16px;
      -webkit-border-radius:16px;
      border-radius: 16px;
      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;
      -webkit-box-shadow: 2px 2px 4px #000;
      -htm-transform:all;
      -htm-transition:1s;
      -moz-transform:all;
      -moz-transition:1s;
      -webkit-transform:all;
      -webkit-transition:1s;
      -o-transform:all;}
    #predef p {
      font-size:10px;
      height:84px;
      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;
          -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
      border-radius: 8px;
      }
    #predef li:hover p
    {
    margin-top:-85px;

    }
    #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' */


a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4628
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour google chrome sur la PA

Message par Oz-Chan le Sam 17 Nov 2012 - 20:48

Merci de votre aide !
Par contre, du coup j'ai deux nouveaux problèmes qui apparaissent sur chrome et non sur firefox...

Le wazzip passe en dessous de la ligne sur chrome mais pas sur firefox...
Pareil pour les dates oranges. Elles sont censé clignoté mais ne le font plus sur google chrome...
Pouvez-vous aussi m'aider pour ces problèmes qui sont apparu avec le règlement de l'autre?
Merci encore !

Oz-Chan
****

Messages : 252
Inscrit(e) le : 01/01/2010

http://pandora-hearts-abyss.forumactif.com/index.htm
Oz-Chan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour google chrome sur la PA

Message par Milouze14 le Dim 18 Nov 2012 - 5:17

Salut Oz-Chan,

tu as changé le code HTML de ta P.A,
il aurait été judicieux de le donner ici Wink .

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4628
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour google chrome sur la PA

Message par Oz-Chan le Dim 18 Nov 2012 - 5:19

Bonjour,
Je n'ai rajouté que le code que tu m'as donné et rien de plus. Le HTML, je l'ai mis directement dans mon premier poste et il n'a pas changé depuis. >.<
merci encore de ton aide !

Oz-Chan
****

Messages : 252
Inscrit(e) le : 01/01/2010

http://pandora-hearts-abyss.forumactif.com/index.htm
Oz-Chan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour google chrome sur la PA

Message par Milouze14 le Dim 18 Nov 2012 - 5:27

Re,
désolé j'avais omis de regarder tout le code html,
as tu un script en relation pour faire défiler les annonces (dates) car chez moi
cela reste sur le texte "Cent ans auparavant".

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4628
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour google chrome sur la PA

Message par Oz-Chan le Dim 18 Nov 2012 - 5:29

C'est sur le deuxième onglet du CSS, le << cent auparavant >> c'est sur le premier onglet de ma PA. ^^ le Wazzup et le clignotement et dans les news.

Oz-Chan
****

Messages : 252
Inscrit(e) le : 01/01/2010

http://pandora-hearts-abyss.forumactif.com/index.htm
Oz-Chan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour google chrome sur la PA

Message par Milouze14 le Dim 18 Nov 2012 - 5:32

Merci,
mais je voulais savoir dans ce module,
si les dates défilées seules sur ton forum ?
a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4628
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour google chrome sur la PA

Message par Oz-Chan le Dim 18 Nov 2012 - 5:35

Re,
Nonon. Les dates ne font que clignoter et non défiler. C'est plus agréable surtout que c'est sur le deuxième onglet. ^^
Encore merci !

Oz-Chan
****

Messages : 252
Inscrit(e) le : 01/01/2010

http://pandora-hearts-abyss.forumactif.com/index.htm
Oz-Chan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour google chrome sur la PA

Message par Milouze14 le Dim 18 Nov 2012 - 5:38

Ok merci,
mais je vais paraitre idiot, mais je ne trouve pas comment activer les dates ,
quel onglet déclenche ce menu ?? Embarassed Embarassed .



Edit: j'ai trouvé et te tiens informé Wink .
a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4628
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour google chrome sur la PA

Message par Oz-Chan le Dim 18 Nov 2012 - 5:39

Le deuxième onglet. Vous arrivez dessus, vous voyez directement les news avec la date en jaune et les plus importante en jaune qui clignotent en orange. Sauf que cet effet ne marche pas sur chrome mais que sur firefox alors que je l'aimerais aussi sur chrome.
Merci encore !

Oz-Chan
****

Messages : 252
Inscrit(e) le : 01/01/2010

http://pandora-hearts-abyss.forumactif.com/index.htm
Oz-Chan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour google chrome sur la PA

Message par Milouze14 le Dim 18 Nov 2012 - 5:56

Re,
la balise blink n'est pas supportée par IE et Chrome,
mais j'ai trouvé un script qui te donneras satisfaction.
Le temps de mettre tout çà en place et je reviens dans un bon quart d'heure Wink .

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4628
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour google chrome sur la PA

Message par Oz-Chan le Dim 18 Nov 2012 - 5:57

D'accord !
Merci de vous occupés de mes deux petits problèmes ! Et je vous dis bonne chance. ^^

Oz-Chan
****

Messages : 252
Inscrit(e) le : 01/01/2010

http://pandora-hearts-abyss.forumactif.com/index.htm
Oz-Chan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour google chrome sur la PA

Message par Milouze14 le Dim 18 Nov 2012 - 9:45

Re,
alors on va modifier le code html:
supprimes tout et remplace par:
On va laisser la fonction blink( clignote)
mais on compense par un script pour Chrome.
Le soucis avec ce dernier c'est qu'il interprète qu un seul clignotement.
Le code qui va déclancher:
Code:
<h1 ID="news"> 26.10.2012 -</h1>


Code:

  <SCRIPT language="javascript">
  function cligno() {
  if(document.getElementById("news").style.visibility != 'hidden')
{
      document.getElementById("news").style.visibility = 'hidden';
     }
   else{
   document.getElementById("news").style.visibility = 'visible';
   }
  }
  var timer=setInterval("cligno()", 1000);
</SCRIPT>
<!-- 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/t2333-contexte">Lire la suite.</a> et <a href="http://pandora-hearts-abyss.forumactif.com/t2332-intrigues">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="" />
    <p>
    <strong>Rufus Barma - Barma</strong>
    Duc aimant qu'aucune information ne lui échappe ! Il serait prêt à tout pour connaitre tous vos secrets.<a href="http://pandora-hearts-abyss.forumactif.com/t2319-04-famille-barma#26325"> Jouez moi !</a>
    </p>
    </li>
    <li>
    <img src="http://i30.servimg.com/u/f30/12/80/18/70/lily11.jpg" alt="" />
    <p>
    <strong>Lily Baskerville - Baskerville</strong>
    Cadette des Baskervilles, c'est une sadique qui aime s'amuser. Chain Bandersnatch<a href="http://pandora-hearts-abyss.forumactif.com/t2321-05-famille-baskerville#26344"> Jouez moi !</a>
    </p>
    </li>
    <li>
    <img src="http://i40.servimg.com/u/f40/12/80/18/70/lacie10.jpg" alt="" />
    <p>
    <strong>Lacie Baskerville - Chain</strong>
    Mère des Alices sortie de L'Abysse, elle est maintenant errantes dans les ruelles de Réveil.<a href="http://pandora-hearts-abyss.forumactif.com/t2336-06-chains#26359"> Jouez moi !</a>
    </p>
    </li>

    <li>
    <img src="http://i41.servimg.com/u/f41/17/81/55/22/pkpo_b10.jpg" alt="" />
    <p>
    <strong>Liam Lunettes -  Barma/Pandora</strong> Membre de Pandora. Il se sert du March Hare comme Chain pour se battre. <a href="http://pandora-hearts-abyss.forumactif.com/t2319-04-famille-barma#26327"> 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>
    Jeune fille ayant une mémoire absolue et la Rufus de son clan. <a href="http://pandora-hearts-abyss.forumactif.com/t2346-02-membres-des-baskervilles#26394">Jouez moi !</a>
    </p>
    </li>
    <li>
    <img src="http://i30.servimg.com/u/f30/12/80/18/70/sorcie10.jpg" alt="" />
    <p>
    <strong>Aelys Bernkastel- Sorcière</strong>Petite sorcière héritière de sa famille au pouvoir pratique mais lui faisant peur...<a href="http://pandora-hearts-abyss.forumactif.com/t2357-07-sorciers#26434">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>
    Duchesse aimant les habitants de son pays. Mais pas pour autant sans autorité ! <a href="http://pandora-hearts-abyss.forumactif.com/t2354-05-noblesses#26422">Jouez moi !</a>
    </p>
    </li>
    <li>
    <img src="http://i30.servimg.com/u/f30/12/80/18/70/c2011010.jpg" alt="" />
    <p>
    <strong>Hellias Skyes - Chain</strong>
    Chain attachant à la recherche de sa contractante illégale. Il manie le feu et la tempérance. <a href="http://pandora-hearts-abyss.forumactif.com/t2351-03-chains#26410"> Jouez moi !</a>
    </p>
    </li>

    </ul>

    <!-- Liens par rapport aux predefs --><div id="navi"><div id="lienspredef"><span class="pique"><a href="http://pandora-hearts-abyss.forumactif.com/f154-predefinis-de-pandora-hearts">Prédéfinis mangas</a></span> <span class="trefle"><a href="http://pandora-hearts-abyss.forumactif.com/f156-predefinis-du-forum">Prédéfinis forum</a></span>  <span class="carreau"><a href="http://pandora-hearts-abyss.forumactif.com/t2334-postes-vacants">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="http://pandora-hearts-abyss.forumactif.com/t2330-reglement">Règlement</a></span><br />
    <span class="coeur"><a href="http://pandora-hearts-abyss.forumactif.com/f121-questions-suggestions">Questions</a></span><br />
    <span class="trefle"><a href="http://pandora-hearts-abyss.forumactif.com/f110-relationships">Relationship</a></span><br />
    <span class="carreau"><a href="http://pandora-hearts-abyss.forumactif.com/t2343-bottin-des-chains-pouvoirs">Chain & Pouvoir</a></span><br />
    </div><div class="colonne2">
    <span class="carreau"><a href="http://pandora-hearts-abyss.forumactif.com/t2339-modele-de-presentation">Présentation</a></span><br />
    <span class="trefle"><a href="http://pandora-hearts-abyss.forumactif.com/t2344-bottin-des-avatars">Bottin Avatars</a></span><br />
    <span class="coeur"><a href="http://pandora-hearts-abyss.forumactif.com/t2331-les-groupes">Groupes</a></span><br />
    <span class="pique"><a href="http://pandora-hearts-abyss.forumactif.com/t2338-guide-du-nouvel-arrivant">Guide nouvel arrivant</a></span> </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;"><i>«  Vous les avez vu ? Ces éclats de lumière blanc sortir de tous les coins de Réveil ? Des lueurs aveuglantes dégageant une atmosphère dérangeante. Serait-ce un lien avec l’Abysse ? Impossible, un nouveau monde s’offre-t-il à nous ?</i> »</br></br>

    Le sol tremble, la nuit n’existe plus. Les membres de Pandora s’affolent et envoient leurs meilleurs troupes jeter un œil à cette lumière qui se trouve être l’opposé de l’Abysse. Des trous se forment de tous les côtés. Les habitants se font aspirer sans qu’ils ne comprennent ce qui leur arrive. Qu’est-il donc en train de se passer ? La capitale sombre-t-elle dans la folie ?<br /><br/> <a href="http://pandora-hearts-abyss.forumactif.com/t2384-event-wonderland-regles">Lire la suite</a> & <a href="http://pandora-hearts-abyss.forumactif.com/f159-welcome-in-wonderland">Participer</a></p>
    </td>

    <!-- News -->
    <td class="blabladesnews">
    <span> Wazzup on PHA ?</span><br><div style="height:250px; overflow:auto;">
    <p><h2> 10.11.2012 -</h2> Le prédéfini de Jack Bezarius a été remis en libre. </p>
    <p><h2> 07.11.2012 -</h2>Deux prédéfinis ont été ajoutés sur le forum ! Kuroi Hasegawa et Elliot L. Edenwayle. ~</p>
    <p><h2>04.11.2012 -</h2> Le chapitre 78 a été posté sur le forum. Bonne lecture !</p>
    <p><h1 ID="news"> 26.10.2012 -</h1>Un topic pour vous aider à mettre un avatar et une couleur a été créé <a href="http://pandora-hearts-abyss.forumactif.com/t2474-mettre-un-avatar-choisir-votre-couleur-personnalisee" class="postlink"> A cette adresse. ~</a></p>
    <p><h2> 10.10.2012 -</h2> Le chapitre 77 a été posté sur le forum et les prédéfinis de Freya, Symphonie ont été remis en libre.</p>
    <p><h2> 23.09.2012 -</h2> Le forum autorise maintenant les membres à avoir quatre comptes. Amusez-vous bien !</p>
    <p><h2> 21.09.2012 -</h2> Le prédéfini d'Elliot Nightray a été adapté à notre contexte et où nous en sommes dans le manga pour qu'il soit à nouveau jouable !</p>
<p><h1 ID="news">18.09.2012 -</h1>Un topic important a été posté dans le coin question. Nous demandons aux membres de venir donner leur avis pour voir si le projet sera mis en place.  <a href="http://pandora-hearts-abyss.forumactif.com/t2481-le-vrai-repaire-des-baskervilles#27883" class="postlink"> à cette adresse</a> Venez vous amuser !</p>
    <p><h2> 11.09.2012 -</h2> Le chapitre 76 a été posté sur le forum !</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>
    Nous allons faire que les derniers chapitres qui sortent comme nous nous sommes fait rattrapés. Le chapitre 78 a été posté sur le forum !</td><td style="border-left:4px dotted #FFEF9C; border-radius: 0px 0px 10px 10px;"> N'oubliez pas que nous sommes à la recherche d'un correcteur pour nous aider ! Venez postuler  <a href="http://pandora-hearts-abyss.forumactif.com/t2292-recrutement-correcteur" class="postlink"> Formulaire ici !</a> si le rôle vous intéresse.</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://i30.servimg.com/u/f30/12/80/18/70/nya10.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://i40.servimg.com/u/f40/12/80/18/70/revis10.jpg"/><p><strong>Revis Baserville</strong><br/><a href="http://pandora-hearts-abyss.forumactif.com/privmsg?mode=post&u=883">MP</a> - <a href="http://pandora-hearts-abyss.forumactif.com/u883">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="..."><a href="http://karnevale-avenue2.forumactif.org/"><img class="staffou" src="http://i40.servimg.com/u/f40/12/80/18/70/opiopi11.jpg"/></a> <br/>
    <img class="staffou" src="http://i758.photobucket.com/albums/xx227/Cherryiis/PHA%20V10/staffempty.png"/></a> <a href=".."><img class="staffou" src="http://i758.photobucket.com/albums/xx227/Cherryiis/PHA%20V10/staffempty.png"/></a></span>  <a href="http://alone-in-heaven.forum.st/"><img class="staffou" src="http://i43.servimg.com/u/f43/16/13/48/98/bla10.jpg"/></a> <img src="http://i758.photobucket.com/albums/xx227/Cherryiis/PHA%20V10/staffempty.png" /><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://i40.servimg.com/u/f40/12/80/18/70/finoui11.jpg"/><p><strong>Finn Baskerville</strong><br/><a href="http://pandora-hearts-abyss.forumactif.com/privmsg?mode=post&u=892">MP</a> - <a href="http://pandora-hearts-abyss.forumactif.com/u892">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="http://pandora-hearts-abyss.forumactif.com/t2292-recrutement-correcteur#26045">Poste à prendre ici</a> - <a href="#"></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. <a href="http://pandora-hearts-abyss.forumactif.com/t2327-credits">Suite crédits ici</a></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>

Ta feuille de style:
Supprimes le contenu donné et
remplace par celui-ci:
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:justify;
          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
            {
          position:relative;
          float:right;
          right:0;
          font-size:23px;
          margin-top:-20px;
          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 #news { color:#FF733B; text-decoration:blink; display:inline; }
        .blabladesnews h2 { color:#FFDF40; display:inline; }

        /* Animations des prédéfinis, onglet 1 de la PA */
    #predef img{width:160px;height:84px;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius: 10px;}
        #predef {margin-left:21px; }
        #predef ul { font:.75em "lucida grande", arial, sans-serif;
          overflow:auto;
          width:495px;
          background:#96734c;
          list-style:none; }
        #predef li {
          width:160px;
          height:84px;
          position:relative;
          z-index:5;
          margin:5px 0px 5px -60px;
          vertical-align:middle;
          -webkit-vertical-align:middle;
          -moz-border-radius:16px;
          -webkit-border-radius:16px;
          border-radius: 16px;
          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;
          -webkit-box-shadow: 2px 2px 4px #000;
          -htm-transform:all;
          -htm-transition:1s;
          -moz-transform:all;
          -moz-transition:1s;
          -webkit-transform:all;
          -webkit-transition:1s;
          -o-transform:all;}
        #predef p {
          font-size:10px;
          height:84px;
          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;
              -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
          border-radius: 8px;
          }
        #predef li:hover p
        {
        margin-top:-85px;

        }
        #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' */

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4628
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour google chrome sur la PA

Message par Oz-Chan le Dim 18 Nov 2012 - 18:44

Le clignotement est bon ! Par contre, le wazzup embête encore.. Sur firefox il est bon mais sur Chrome, il n'est pas à la même place et toujours sous la barre jaune :

Est-il possible qu'il soit en dessus ainsi qu'à la même place que firefox sans pour autant déplacer quelque chose sur firefox? >.<
Merci encore !

Oz-Chan
****

Messages : 252
Inscrit(e) le : 01/01/2010

http://pandora-hearts-abyss.forumactif.com/index.htm
Oz-Chan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour google chrome sur la PA

Message par Milouze14 le Dim 18 Nov 2012 - 20:24

Re,

dans la CSS:
trouve ceci:
Code:
.blabladesnews span

puis dans :
Code:
margin-top:-20px;
diminues la valeur si besoin Wink

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4628
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour google chrome sur la PA

Message par Oz-Chan le Dim 18 Nov 2012 - 22:23

Re,
C'est ce que j'ai fait mais les valeurs ne sont pas identiques sur firefox et chrome. Sur firefox, elle est bonne mais sur chrome, beaucoup trop haute alors qu'elles sont pourtant exactement pareil niveau taille. J'ai déjà essayé de changé c'est aussi comme ça que j'ai vu que la barre jaune passait en dessus du texte sur chrome. Ce que je ne désire pas. ><

Oz-Chan
****

Messages : 252
Inscrit(e) le : 01/01/2010

http://pandora-hearts-abyss.forumactif.com/index.htm
Oz-Chan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour google chrome sur la PA

Message par Milouze14 le Lun 19 Nov 2012 - 8:26

Salut Oz-Chan,

il ne vaut mieux pas regarder avec Internet Explorer alors Very Happy .

J'ai la version 10 et voici le résultat:


Il vaudrait mieux voir avec la personne qui a conçut cette PA Wink .

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4628
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour google chrome sur la PA

Message par Oz-Chan le Lun 19 Nov 2012 - 8:49

Bonjour,
c'est normal car le forum n'est pas du tout fait pour internet explorer. =3.
Donc il est pas possible de résoudre le problème sur Chrome?
Encore merci.

Oz-Chan
****

Messages : 252
Inscrit(e) le : 01/01/2010

http://pandora-hearts-abyss.forumactif.com/index.htm
Oz-Chan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour google chrome sur la PA

Message par Milouze14 le Lun 19 Nov 2012 - 8:55

Re,
il faut que tu saches que beaucoup d'utilisateurs fonctionne avec ce navigateur Wink .
Donc ton forum ne sera pas fonctionnel pour eux Exclamation .
Pour Chrome je ne peux pas faire grand chose de plus,
désolé ....

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4628
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour google chrome sur la PA

Message par Oz-Chan le Lun 19 Nov 2012 - 16:05

Re,
Ce n'est pas grave. J'ouvrirai un sujet exprès pour ce petit bug plus tard comme il n'est pas hyper important. ( j'en ai deux plus énervant. >< )
Je vous remercie de votre aide en tout cas !

Oz-Chan
****

Messages : 252
Inscrit(e) le : 01/01/2010

http://pandora-hearts-abyss.forumactif.com/index.htm
Oz-Chan a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum