Difficultés avec codage infobulles

[L'ange noir]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 24 janvier
Lien du forum : https://sangsmelesoriginels.forumactif.com/

Description du problème

Bonjour

je rencontre une souci avec les infobulles. J'utilise une infobulle sur la PA de mon forum et quand je veux faire une modification dans les textes à l'intérieur de la bulle, le code fonctionne quand je le mets et que je valide une première fois. Mais quand je veux faire une autre modification et que je valide, le code modifié disparaît et est remplacé par un autre ou est déplacé sur la page HTML.

Pas facile à expliquer... désolé.
Voici le code CSS :

Code:

ul#predefinis {
 width: 650px; height: 97px;
 margin: 24px auto;
 padding: 0px;
 list-style-type: none;
 text-align: center;
 }

 ul#predefinis li {
 padding: 0; margin: 0;
 display: inline-block;
 position: relative;
 width: 72px; height: 97px;
 margin-right: 6px;
 }
 
 ul#predefinis li .info {display: none;}
 ul#predefinis li:hover .info { /* INFOBULLES */
 display: block;
 position: absolute;
 bottom: 105px; left: 0px;
 width: 200px; /* IMPORTANT */
 background: white;
 color: #202020;
 font-size: 10px;
 font-family: sans-serif;
 padding: 10px;
 text-align: left;
 border-radius: 5px;
 }
    /* EXCEPTION INFOBULLES 7 & 8 */
      ul#predefinis li:nth-child(7):hover .info, ul#predefinis li:nth-child(8):hover .info {
      bottom: 105px; right: 0px; left: auto;}
      ul#predefinis li:nth-child(7):hover .info .fleche, ul#predefinis li:nth-child(8):hover .info .fleche {
      bottom: -8px; right: 30px; left: auto;}
      /* FIN EXCEPTION */

Voici le code HTML

Code:

<ul id="predefinis">
                                                                                                                                                                                                                                                                                                                                                 
            <!--                                                                                                                                                      CHANGEMENT DES POSTES PREDEFINIS                                                                                                                                                      -->                                                                                                                                                     
            <li>
                                                                                                                                                                   <img alt="Perso prédéfinis ?" src="https://i.servimg.com/u/f10/20/11/47/12/artemi10.png" /> <span class="info"> </span>
               <center style="">
                  <span style="color: #ff0000;">Royaume</span>
               </center><span class="info"> Artemisia Winter <br /> Avatar => Sophie Turner <br /> Vampire d'âge apparent 20 ans mais a 338 ans d'âge réel. Située au Royaume de Bretagne. <span class="fleche">                                                                                                                                                   
                     <!--                                                                                                                                                      fleche invisible                                                                                                                                                      --></span></span>                                                                                                                                                   
            </li>

Je veux simplement changer la taille de Artémesia Winter et la couleur. Et dès que j'entre du code HTML en span, toute l'apparence change.

Une idée de ce qu'il se passe, s'il vous plait ?

[*Splash*]

Hi,
Ne fait pas tes modifications directement dans le code HTML. Copie/colle ton code HTML dans un éditeur, fait tes modifs et replace le code modifié à la place de l'ancien dans ta page HTML

[L'ange noir]

ok, merci. Je vais essayer ça et je reviens te dire.

[L'ange noir]

Bonsoir

Ca ne change rien. Le code se remet comme il le veux. Est ce qu'il y a un code qui peut l'obliger à faire ça ? Franchement, je ne comprends pas comment c'est possible.

Si vous avez une idée de la raison pour laquelle cela se produit, je suis preneur.

je continue à chercher de mon côté.

[L'ange noir]

Bon, ça bug toujours.

Voilà ce que j'ai écrit. Ce n'est pas du grand codage, je suis pas trop fort.

Code:

<img src="https://i.servimg.com/u/f10/20/11/47/12/artemi10.png" alt="Perso prédéfinis ?" />        <span class="info"> <h3><center><span style="color: #ff0000;">Prédéfini du Royaume</center></span></h3>Artemisia Winter <br /> Avatar => Sophie Turner <br /> Vampire d'âge apparent 20 ans. Age réel 338 ans. Résidente du Royaume de Bretagne. <span class="fleche">

En prévisualisation ça rend très bien.

Mais quand je valide et que je retourne voir le code, il est comme ceci :

Code:

<img src="https://i.servimg.com/u/f10/20/11/47/12/artemi10.png" alt="Perso prédéfinis ?" />        <span class="info"> </span>
               <h3 style="">
                  
                  <center>
                      <span style="color: #ff0000;">Prédéfini du Royaume</span>
                  </center>
                  
               </h3><span class="info">Artemisia Winter <br /> Avatar => Sophie Turner <br /> Vampire d'âge apparent 20 ans. Age réel 338 ans. Résidente du Royaume de Bretagne. <span class="fleche"> 

Et forcément, sur le forum ça me décale tout, puisque le titre en h3 ne se trouve pas là où je veux le mettre.

[Neptunia]

Bonjour ^^

Si vous avez une idée de la raison pour laquelle cela se produit, je suis preneur.

Une des particularités de l'éditeur, est de corriger ou du moins tenter de corriger le code incorrect.

Si on prend votre dernier exemple, l'éditeur referme votre premier span avant son contenu parce que ce contenu n'a rien à faire dans un span.

Chaque balise a ses propres caractéristiques et on ne peut pas imbriquer n'importe quoi n'importe comment.
Si on prend un exemple de la vie courante, on pourra faire rentrer un criminel dans une voiture de police, le criminel pourrait éventuellement mettre les policiers dans sa poche mais jamais il ne pourra mettre la voiture dans sa poche.

En html c'est pareil. Un span est un élément de type en ligne et il ne pourra accepter que d'autres éléments en ligne. La balise <center> qui est un élément de type bloc n'a rien à faire dans un span. N'a d'ailleurs rien à faire dans un code HTML vu qu'elle est obsolète depuis la fin du siècle dernier.

Essayez de remplacer votre <span> ... </span> par <div class="info" align="center">...</div> et ça devrait déjà aller mieux

P.S. Les deux autres span devraient passer

[L'ange noir]

Oh, j'ai compris. Donc je vais faire une div. Le tout est d'y parvenir.

Merci encore, je me lance.

[L'ange noir]

Bonjour

J'ai essayer de faire une div. Rien n'y fait. Je n'arrive pas à entrer un texte avec un style différent du l'autre texte déjà dans la bulle. Je n'arrive pas à comprendre pourquoi. Peut-être faut il tout recoder.

J'avoue que je sèche sur ce coup. Si quelqu'un a une idée, ce serait super.

Merci d'avance

[Scoubifitz]

Bonjour,

Éditez votre page HTML en MODE AVANCE , puis remplacez entièrement votre code par celui-ci :

Code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
<title>PA NALU</title>
<style>
/*** GENERAL ***/
#titreforum
{
color: #D6F1EA;
padding-top: 15px;
margin-bottom: -20px;
}
#pa {background:#202020; width: 800px; margin: 0 auto; color: #fff; line-height: 1.3;}
#pa a {
color: #83a7a7; text-decoration: none;
border-bottom: 1px dotted #f9979d;
-webkit-transition: color .2s linear;
transition: color .2s linear;
}
#pa a:hover {
color: #83a7a7; text-decoration: none;
border-bottom: 1px solid #f9979d;
}
#credits {
font-family: sans-serif;
margin-left: 26px;
font-size: 12px;
color: #606060;
}
#credits a {
padding-left: 20px;
background: url("https://2img.net/r/hpimg4/pics/171045Ship.png") no-repeat left;
background-size: 14px 14px;
color: #aa434d !important;
text-decoration: none !important;
border: 0px !important;
}
#credits a:hover {
color: #f79292 !important;
}
#credits span {color: #aa434d !important;}
/* CREATION DE 3 ONGLETS POUR NAVIGUER ENTRE LES PAGES */
ul#onglets {
width: 650px; height: 30px;
margin: 30px auto;
padding: 10px 0;
list-style-type: none;
text-align: center;
}
ul#onglets li {
display: inline-block;
margin-right: 6px;
width: 210px; height: 30px;
}
ul#onglets li:hover {
height: 32px;
position: relative; top: -2px;
background: #202020;
cursor: pointer;
}
ul#onglets li:last-child, ul#contentnav li:last-child, ul#predefinis li:last-child { margin-right: 0px;} /* = retrait de l'espace à droite. */
/* CREATION DES PANNEAUX CONTENANT LES 3 CONTENUS DIFFERENTS */
ul#contentOnglets {
width: 650px; min-height: 310px;
margin: 0 auto;
list-style-type: none;
padding: 0;
position: relative;
}
ul#contentOnglets li {
/*position: absolute;*/
top: 0; left: 0;
width: 650px;
}
ul#contentnav {
width: 650px; height: 170px;
margin: 0px auto;
padding: 0px;
list-style-type: none;
text-align: center;
}
ul#contentnav li {
padding: 0; margin: 0;
display: inline-block;
position: static;
width: 320px; height: 170px;
margin-right: 6px;
overflow: hidden;
}
/*** PREMIER ONGLET ***/
#contentcontexte, #contentmenu {
width: 320px; height: 170px;
overflow-y: scroll;
overflow-x: none;
position: relative;
font-family: sans-serif;
font-size: 12px;
color: 83a7a7;
line-height: 1.3;
letter-spacing: 1px;
text-align: left;
}
#contentcontexte p {
margin-bottom: 36px;
text-indent: 20px;
}
#contentcontexte img {
position: absolute;
left: 0; top: 0; opacity: 1;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#contentmenu img {
position: absolute;
right: 0; top: 0; opacity: 1;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#contentcontexte:hover img {
left: -320px; opacity: 0;
}
#contentmenu:hover img {
right: -320px; opacity: 0;
}
#contentmenu a {
display: block;
width: 100%; max-width: 100%;
height: 28.33px; line-height: 28.33px;
border: 0;
background: rgba(146,86,86,0);
padding-left: 20px;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
#contentmenu a:hover {
display: block;
width: 100%;
height: 28.33px; line-height: 28.33px;
border: 0;
background: rgba(146,86,86,1);
color: #202020;
}
ul#predefinis {
width: 650px; height: 97px;
margin: 24px auto;
padding: 0px;
margin-top: 15px;
list-style-type: none;
text-align: center;
}
ul#predefinis li {
padding: 0; margin: 0;
display: inline-block;
position: relative;
width: 72px; height: 97px;
margin-right: 6px;
}
ul#predefinis li .info {display: none;}
ul#predefinis li:hover .info { /* INFOBULLES */
display: block;
position: absolute;
bottom: 105px; left: 0px;
width: 200px; /* IMPORTANT */
background: white;
color: #202020;
font-size: 10px;
font-family: sans-serif;
padding: 10px;
text-align: left;
border-radius: 5px;
}
/* EXCEPTION INFOBULLES 7 & 8 */
ul#predefinis li:nth-child(7):hover .info, ul#predefinis li:nth-child(8):hover .info {
bottom: 105px; right: 0px; left: auto;}
ul#predefinis li:nth-child(7):hover .info .fleche, ul#predefinis li:nth-child(8):hover .info .fleche {
bottom: -8px; right: 30px; left: auto;}
/* FIN EXCEPTION */
.fleche { /* PETIT CURSEUR QUI CIBLE QUEL PERSO ON PARLE */
width: 15px; height: 8px;
background: url("https://i.servimg.com/u/f39/19/07/10/81/fleche10.png") no-repeat;
position: absolute;
bottom: -8px; left: 30px;
}
ul#predefinis li .info a {
color: #f9979d; text-decoration: none;
border-bottom: 1px dotted #f9979d;
}
ul#predefinis li .info a:hover {
color: #202020; text-decoration: none;
border-bottom: 1px solid #f9979d;
}
ul#predefinis li img {
opacity: .7;
}
ul#predefinis li:hover img {
opacity: 10;
}
/**** DEUXIEME ONGLET ****/
ul#presentStaff {
width: 230px;
list-style-type: none;
padding: 20px; margin-left: -15px; 0 auto;
text-align: center;
}
ul#presentStaff li {
position: static;
display: inline-block;
width: 60px; height: 60px;
margin: 6px 3px ;
}
/*cadre et texte*/
ul#presentStaff li.explic {
position: static;
display: inline-block;
width: 210px; height: 80px;
border: 2px solid #f9979d;
padding: 10px 5px;
vertical-align: middle;
overflow-y: scroll;
color: #83a7a7;
font-family: sans-serif;
font-size: 12px;
}
/*titre*/
ul#presentStaff li.explic h2 {
display: inline-block;
margin: 0; padding: 0 10px;
color: #f9979d;
font-family: sans-serif;
font-size: 16px; font-weight: normal;
border-bottom: 1px dotted #f9979d;
}
ul#presentStaff li:hover img {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
/**** SLIDESHOW -- DON'T TOUCH ! ***/
/*Widget Sujets récents*/
#recent_topics {
color: white;
font-size: 14px;
height: 215px;
width: 305px;
overflow-y:hidden;
overflow-x:auto;
}
.slideshow,
.slide {
width: 340px; max-width: 340px;
height: 240px; max-height: 240px;
}
.slideshow {
border: 2px solid #000;
float : right;
margin-left: 10px;
margin-top: 20px;
padding: 10px;
color:#BD882D;
background-image:url(https://i.servimg.com/u/f10/20/11/47/12/sans_t18.png);
background-size: cover;
overflow: hidden;
}
#slideshowvideo {
margin: 15px 65px 0 auto;
overflow: hidden;
width: 225px; max-width: 225px;
height: 215px; max-height: 215px;
background-color: red;
border: 4px solid #925656;
font-family: sans-serif;
font-size: 12px;
color: gray;       /* ========= >> >> >> Couleur texte dans le slideshow */
}
.slideshow div {
position: relative;
top: 0;
right: 0;
}
.slide {
margin: 0;
overflow: auto;
display: inline-block;
vertical-align: middle;
text-align: center;
color: white;
}
.slide p {
margin: 10px;
text-align: justify;
}
.slide h2 { /* ========= >> >> >> Style titre dans le slideshow */
display: inline-block;
margin: 6px 0 0 0; padding: 0 10px;
color: #f9979d;
font-family: sans-serif;
font-size: 16px; font-weight: normal;
border-bottom: 1px dotted #f9979d;
}
#credcss {position: absolute; bottom: -27px; right: 0;}
#credcss, #credcss a { font-size: 9px; color: #404040; text-transform: uppercase; font-family: sans-serif; border: 0 !important;}
/***** FINNNN SLIDESHOOOWWWW ****/
/*** TROISIEME ONGLET ***/
/*TOP PARTENAIRES*/
#toppartenaires { padding-left: 0px;}
#toppartenaires h1
{margin: 10px; margin-top: 20px; margin-bottom: 5px; }
ul#sous-toppartenaires {
display: block;
width: 280px; max-width: 280px;
height: 130px; max-height: 130px;
margin: 10px; padding: 0;
list-style-type: none;
text-align: center;
float: left;
}
ul#sous-toppartenaires li {
position: static;
width: 88px; height: 31px;
overflow: hidden; display: inline-block;
margin-right: 2px; margin-bottom: 2px;
background: white;
}
#sous-toppartenaires li img, .topsites img{
opacity: .5;
-webkit-transition: all .2s linear;
transition: all .2s linear;
}
#sous-toppartenaires li:hover img, .topsites img:hover {
opacity: 1;
-webkit-transition: all .2s linear;
transition: all .2s linear;
}
/*PARTENAIRES*/
#partenaires {position: relative;}
#partenaires h1
{margin-left: 65px; margin-top: 20px; margin-bottom: 5px; }
ul#sous-partenaires {
display: block;
width: 280px; max-width: 280px;
height: 130px; max-height: 130px;
margin-left: 20px; margin-top: 10px;
list-style-type: none;
text-align: center;
}
ul#sous-partenaires li {
position: static;
width: 88px; height: 31px;
overflow: hidden; display: inline-block;
margin-right: 2px; margin-bottom: 2px;
background: white;
}
#sous-partenaires li img, .topsites img{
opacity: .5;
-webkit-transition: all .2s linear;
transition: all .2s linear;
}
#sous-partenaires li:hover img, .topsites img:hover {
opacity: 1;
-webkit-transition: all .2s linear;
transition: all .2s linear;
}
/*TOPSITES*/
.topsites a {
border: 0px !important;
margin-right: 4px;
margin-left: 5px;
}
</style>
</head>
<body>
<div id="pa">
<div id="titreforum"><p style="font: bold 15px sans-serif; text-align:center;;">Forum ouvert depuis le 8 août 2007 ! Interdit aux moins de 18 ans </p>
</p>
</div>
<ul id="onglets">
<li onclick="javascript:onglet1()">
<img alt="Général" src="https://i.servimg.com/u/f10/20/11/47/12/211.jpg"/>
</li>
<li onclick="javascript:onglet2()">
<img alt="Informations" src="https://i.servimg.com/u/f10/20/11/47/12/hytreh10.jpg"/>
</li>
<li onclick="javascript:onglet3()">
<img alt="Coin du vote" src="https://i.servimg.com/u/f10/20/11/47/12/jeyhbg10.jpg"/>
</li>
</ul>
<ul id="contentOnglets">
<li id="part1">
<!-- LE 1ER ONGLET COMMENCE ICI -->
<ul id="contentnav">
<li id="contentcontexte">
<img alt="Contexte" src="https://i.servimg.com/u/f10/20/11/47/12/sans_t12.jpg"/>
<div id="contexte">
<div align="justify">
<p>
2030 : Toi qui a eu la curiosité de franchir cette porte, te sens-tu l’essence d’un vampire dominant et maître du monde ? Préférerais-tu avoir le coeur qui balance entre l’humain et le vampire en devenant un dévot et en protégeant ton dominus ou ta domina ? Ou encore souhaites-tu tout simplement rester un humain, mais prend garde des crocs ne sont jamais loin pour guetter ta jugulaire. Lire le contexte t'aidera à faire ton choix.
</p>
</div>
</div>
</li>
<li id="contentmenu">
<img alt="Navigation" src="https://i.servimg.com/u/f10/20/11/47/12/1sans_10.jpg"/>
<div id="menu">
  <a href="">Règlement</a>
  <a href="">Contexte</a>
  <a href="">News</a>
  <a href="">Présentations</a>
  <a href="">Guide du débutant</a>
  <a href="">Listing du Forum</a>
</div>
</li>
</ul>
<ul id="predefinis">
<!-- CHANGEMENT DES POSTES PREDEFINIS -->
<li>
<img alt="Perso prédéfinis ?" src="https://i.servimg.com/u/f10/20/11/47/12/artemi10.png"/>
<span class="info"><br/>
  Artemisia Winter <br/>
  Avatar => Sophie Turner <br/>
  Vampire d'âge apparent 20 ans. <br/>
  Age réel 338 ans. <br/>
  Résidente du Royaume de Bretagne.
  <span class="fleche"><!-- fleche invisible --></span>
  </span>
</li>
<li>
<img alt="Perso prédéfinis ?" src="https://i.servimg.com/u/f10/20/11/47/12/david_10.png"/>
  <span class="info">Linon Spiros
    <span class="fleche"><!-- fleche invisible --></span>
  </span>
</li>
<li>
<img alt="Perso prédéfinis ?" src="https://i.servimg.com/u/f10/20/11/47/12/varsha10.png"/>
  <span class="info">Varsha Kumar
    <span class="fleche"><!-- fleche invisible --></span>
  </span>
</li>
<li>
<img alt="Perso prédéfinis ?" src="https://i.servimg.com/u/f10/20/11/47/12/kahina10.png"/>
  <span class="info">Kahina Opeyemi
    <span class="fleche"><!-- fleche invisible --></span>
  </span>
</li>
<li>
<img alt="Perso prédéfinis ?" src="https://i.servimg.com/u/f10/20/11/47/12/mary_k10.png"/>
  <span class="info">Mary Keegan
    <span class="fleche"><!-- fleche invisible --></span>
  </span>
</li>
<li>
<img alt="Perso prédéfinis ?" src="https://i.servimg.com/u/f10/20/11/47/12/mercut10.png"/>
  <span class="info">Mercutio De Azzero
    <span class="fleche"><!-- fleche invisible --></span>
  </span>
</li>
<li>
<img alt="Perso prédéfinis ?" src="https://i.servimg.com/u/f10/20/11/47/12/liliya10.png"/>
  <span class="info">Liliya Ulkina
    <span class="fleche"><!-- fleche invisible --></span>
  </span>
</li>
<li>
<img alt="Perso prédéfinis ?" src="https://i.servimg.com/u/f10/20/11/47/12/devika10.png"/>
  <span class="info">Devika Laman
    <span class="fleche"><!-- fleche invisible --></span>
  </span>
</li>
</ul>
</li>
<!-- FIN DU PREMIER ONGLET -->
<li id="part2" style="display: none;">
<!-- LE 2EME ONGLET COMMENCE ICI -->
<table style="width: 650px;" border="0">
<tr>
<td valign="top" style="width: 230px;">
<ul id="presentStaff">
<!-- CHANGEMENT STAFF 1 -->
<li onmouseover="javascript:staff1()">
<img alt="Staff" src="https://i.servimg.com/u/f24/19/42/82/69/sans_t25.png"/>
</li>
<li onmouseover="javascript:staff3()">
<img alt="Staff" src="https://i.servimg.com/u/f24/19/42/82/69/test9610.png"/>
</li>
<li class="explic">
<!-- CHANGEMENT INFOS STAFF -->
<div id="defaut">
<h2>Les membres du staff </h2>
<p>Laissez-nous vous présenter les membres de notre staff.</p>
</div>
<div id="staff1" style="display: none;">
<h2>Sélène Craft </h2>
<p>Fondatrice de VK. Veille au grain et fait office d'autorité pour tous les membres
</p>
</div>
<div id="staff2" style="display: none;">
<h2>
Membre 2 </h2>
<p>
Il est michant !!!
</p>
</div>
<div id="staff3" style="display: none;">
<h2>
L'Ange Noir </h2>
<p>
Toujours disponible. Une question, un doute, les mp frappent à sa porte et l'Ange vous répond sans détour !
</p>
</div>
<div id="staff4" style="display: none;">
<h2>
Le Démon </h2>
<p>
Quand un rebondissement se prépare, le Démon n'est jamais loin. Une idée d'évolution de contexte, le Démon tend l'oreille et la met en application ! Grapheur officiel.
</p>
</div>
<div id="staff5" style="display: none;">
<h2>
La Dévotion </h2>
<p>
Vous désirez devenir partenaire, adressez-vous à La Dévotion. Un problème de code et elle sera toute aussi réceptive. Un peu de graphisme est loin de l'effrayer également !
</p>
</div>
<div id="staff6" style="display: none;">
<h2>
L'oracle </h2>
<p>
L'ordre du forum passe par L'oracle. Vous souhaitez changer de statut, ou archiver un sujet, elle le fera sans difficulté.
</p>
</div>
</li>
<!-- CHANGEMENT STAFF 2 -->
<li onmouseover="javascript:staff4()">
<img alt="Staff" src="https://i.servimg.com/u/f24/19/42/82/69/test310.png"/>
</li>
<li onmouseover="javascript:staff5()">
<img alt="Staff" src="https://i.servimg.com/u/f24/19/42/82/69/sans_t24.png"/>
</li>
<li onmouseover="javascript:staff6()">
<img alt="Staff" src="https://i.servimg.com/u/f24/19/42/82/69/sans_t23.png"/>
</li>
</ul>
</td>
<td valign="top">
<!-- SLIDESHOW + VIDEO -->
<!-- Slideshow infini horizontal -->
<div class="slideshow" id="slideshow">
<div id="slideshow-container">
<!-- CHANGEMENT SLIDE ACTUELS -->
<div class="slide">
<h2>
Derniers messages postés </h2>
<table>
<tr style="">
<td align="center">
<marquee onmouseover="this.stop();" onmouseout="this.start();" direction="up" behavior="none" scrollamount="3" scrollamountstyle="height: 270px;">
<div id="recent_topics">
</div>
<script type="text/javascript"> jQuery.get('/portal',function(data){
jQuery('#recent_topics').html(jQuery(data).find('.forumline td.row1').html());
});
</script>
</marquee>
</td>
</tr>
</table>
</div>
</div>
</div>
<!-- fin slideshow -->
<div id="credcss">
Slideshow by <a href="http://www.css-actif.com/t13010-slideshow-horizontal-infini">CSSActif</a>
</div>
</td>
</tr>
<tbody>
</tbody>
</table>
</li>
<!-- FIN DU DEUXIEME ONGLET -->
<li id="part3" style="display: none;">
<!-- LE 3EME ONGLET COMMENCE ICI -->
<div align="center">
</div>
<table style="width: 650px;" border="0">
<tr style="">
<td id="toppartenaires" valign="top">
<!-- partenaires & topsites -->
<div align="left">
<h1>
<img alt="Nos partenaires" src="https://i.servimg.com/u/f43/19/65/31/91/parten10.png"/>
</h1>
</div>
<br/>
<div align="left">
<ul id="sous-toppartenaires">
<li>
<a href="http://20serneuerung.forumactif.com/" target="_blank"><img alt="Nom Partenaire" src="https://i.imgur.com/d8ngmIU.jpg"/></a>
</li>
<li>
<a href="http://asaria-evolution.forumactif.org" target="_blank"><img alt="Nom Partenaire" src="https://2img.net/r/hpimg4/pics/663170368006asatest.gif"/></a>
</li>
<li>
<a href="http://atlantisinsurrection.forumactif.fr" target="_blank"><img alt="Nom Partenaire" src="https://2img.net/image.noelshack.com/fichiers/2014/32/1407326857- bouton8831pegase.png"/></a>
</li>
<li>
<a href="http://clan-kravt.fr/index.php" target="_blank"><img alt="Nom Partenaire" src="http://www.pixenli.com/images/1437/1437740289001813800.png"/></a>
</li>
<li>
<a href="http://divinetemptation.forumactif.org" target="_blank"><img alt="Nom Partenaire" src="https://2img.net/r/hpimg4/pics/537513DivineTemptation3.jpg"/></a>
</li>
<li>
<a href="http://laserenissime.forumactif.org/" target="_blank"><img alt="Nom Partenaire" src="https://www.zupimages.net/up/17/14/tcxq.gif"/></a>
</li>
</ul>
</div>
<!-- partenaires -->
</td>
<td id="partenaires" valign="top">
<!-- partenaires & topsites -->
<div align="center">
<h1>
<img alt="Nos partenaires" src="https://i.servimg.com/u/f43/19/65/31/91/parten11.png"/>
</h1>
</div>
<br/>
<div align="center">
<ul id="sous-partenaires">
<li>
<a href="http://20serneuerung.forumactif.com/" target="_blank"><img alt="Nom Partenaire" src="https://i.imgur.com/d8ngmIU.jpg"/></a>
</li>
<li>
<a href="http://asaria-evolution.forumactif.org" target="_blank"><img alt="Nom Partenaire" src="https://2img.net/r/hpimg4/pics/663170368006asatest.gif"/></a>
</li>
<li>
<a href="http://atlantisinsurrection.forumactif.fr" target="_blank"><img alt="Nom Partenaire" src="https://2img.net/image.noelshack.com/fichiers/2014/32/1407326857- bouton8831pegase.png"/></a>
</li>
<li>
<a href="http://clan-kravt.fr/index.php" target="_blank"><img alt="Nom Partenaire" src="http://www.pixenli.com/images/1437/1437740289001813800.png"/></a>
</li>
<li>
<a href="http://divinetemptation.forumactif.org" target="_blank"><img alt="Nom Partenaire" src="https://2img.net/r/hpimg4/pics/537513DivineTemptation3.jpg"/></a>
</li>
<li>
<a href="http://laserenissime.forumactif.org/" target="_blank"><img alt="Nom Partenaire" src="https://www.zupimages.net/up/17/14/tcxq.gif"/></a>
</li>
</ul>
</div>
<br/>
<div>
<h1 style="margin-left: -45px; margin-top:-35px; padding: 10px; !important;">
<img alt="Nos Topsites" src="https://i.servimg.com/u/f39/19/07/10/81/topsit10.png"/>
</h1>
</div>
<div style="margin-left: -75px;>
<div class=" topsites" "" ">
<!-- CHANGEMENT TOP SITES -->
<a href="#" target="_blank"><img alt="" src="https://i.servimg.com/u/f24/19/42/82/69/plume_10.png"/></a>
<a href="#" target="_blank"><img alt="" src="https://i.servimg.com/u/f24/19/42/82/69/plume_10.png"/></a>
<a href="#" target="_blank"><img alt="" src="https://i.servimg.com/u/f24/19/42/82/69/plume_10.png"/></a>
<a href="#" target="_blank"><img alt="" src="https://i.servimg.com/u/f24/19/42/82/69/plume_10.png"/></a>
<a href="#" target="_blank"><img alt="" src="https://i.servimg.com/u/f24/19/42/82/69/plume_10.png"/></a>
<a href="#" target="_blank"><img alt="" src="https://i.servimg.com/u/f24/19/42/82/69/plume_10.png"/></a>
<a href="#" target="_blank"><img alt="" src="https://i.servimg.com/u/f24/19/42/82/69/plume_10.png"/></a>
<a href="#" target="_blank"><img alt="" src="https://i.servimg.com/u/f24/19/42/82/69/plume_10.png"/></a>
<p id="credits">
<span style="font-size: 10px;">~ Codée avec <span></span> sur <a href="http://www.never-utopia.com/" target="_blank">Never-Utopia</a></span>
</p>
</div>
</td>
</tr>
</table>
</li>
</ul>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function () {
//VARIABLES MODIFIABLES
var delaiSwitch    = 5000;                    // Délai (en ms) d'affichage d'un slide
var delaiTransition = 1000;                    // Délai (en ms) de l'animation de transition
var direction      = 'left';                  // Sens (left ou right) du défilement
var idSlideshow    = '#slideshow';            // ID du slideshow
var idContainer    = '#slideshow-container';  // ID du container
//VARIABLES SYSTEME
var slideshowWidth  = parseInt($(idSlideshow).css('width'));
var slideshowHeight  = parseInt($(idSlideshow).css('height'));
var nbSlides        = $(idContainer+' > .slide').length;
//ADAPTE LA TAILLE DU CONTENEUR AU NOMBRE DE BLOCS QU'IL CONTIENT
$(idContainer).css('width', slideshowWidth*nbSlides+'px');
//REDEFINIT LE CONTENU POUR SUPPRIMER LES EVENTUELS ECARTS DUS AUX BORDERS
if(direction==='right') {
var decalageLeft = -slideshowWidth*(nbSlides-1);
$(idContainer).css('left', decalageLeft+'px');
$(idContainer+' > .slide').each(function() {
var el = $(this).remove();
$(idContainer).prepend(el);
}, this);
} else {
$(idContainer+' > .slide').each(function() {
var el = $(this).remove();
$(idContainer).append(el);
}, this);
}
//ADAPTE LA TAILLE DES IMAGES AUX DIMENSIONS DU SLIDESHOW
$(idSlideshow+' img').css('max-width', slideshowWidth);
$(idSlideshow+' img').css('max-height', slideshowHeight);
//LANCEMENT DE L'ANIMATION
setInterval(function() {
if (false && autoUpdate) navigate('right');
},timeTrans);
//FONCTION DE DEFILEMENT
function slideshow() {
var compteur = 0;      // Compte les slides ayant bougé
if(direction==='right') {
$(idContainer+' > .slide').animate({left: '+='+slideshowWidth}, delaiTransition, function() {
compteur++;
// Lorsque le dernier slide à bougé, on crée la boucle
if(compteur===nbSlides) {
var el = $(idContainer+' > .slide:last').remove();
$(idContainer).prepend(el);
$(idContainer+' > .slide').css('left', '0');
compteur = 0;
}
});
} else {
$(idContainer+' > .slide').animate({left: '-='+slideshowWidth}, delaiTransition, function() {
compteur++;
// Lorsque le dernier slide à bougé, on crée la boucle
if(compteur===nbSlides) {
var el = $(idContainer+' > .slide:first').remove();
$(idContainer).append(el);
$(idContainer+' > .slide').css('left', '0');
compteur = 0;
}
});
}
}
});
function onglet1() {
document.getElementById('part1').style.display='block';
document.getElementById('part2').style.display='none';
document.getElementById('part3').style.display='none';}
function onglet2() {
document.getElementById('part1').style.display='none';
document.getElementById('part2').style.display='block';
document.getElementById('part3').style.display='none';}
function onglet3() {
document.getElementById('part1').style.display='none';
document.getElementById('part2').style.display='none';
document.getElementById('part3').style.display='block';}
// FIN ONGLETS
function staff1() {
document.getElementById('defaut').style.display='none';
document.getElementById('staff1').style.display='block';
document.getElementById('staff2').style.display='none';
document.getElementById('staff3').style.display='none';
document.getElementById('staff4').style.display='none';
document.getElementById('staff5').style.display='none';
document.getElementById('staff6').style.display='none';}
function staff2() {
document.getElementById('defaut').style.display='none';
document.getElementById('staff1').style.display='none';
document.getElementById('staff2').style.display='block';
document.getElementById('staff3').style.display='none';
document.getElementById('staff4').style.display='none';
document.getElementById('staff5').style.display='none';
document.getElementById('staff6').style.display='none';}
function staff3() {
document.getElementById('defaut').style.display='none';
document.getElementById('staff1').style.display='none';
document.getElementById('staff2').style.display='none';
document.getElementById('staff3').style.display='block';
document.getElementById('staff4').style.display='none';
document.getElementById('staff5').style.display='none';
document.getElementById('staff6').style.display='none';}
function staff4() {
document.getElementById('defaut').style.display='none';
document.getElementById('staff1').style.display='none';
document.getElementById('staff2').style.display='none';
document.getElementById('staff3').style.display='none';
document.getElementById('staff4').style.display='block';
document.getElementById('staff5').style.display='none';
document.getElementById('staff6').style.display='none';}
function staff5() {
document.getElementById('defaut').style.display='none';
document.getElementById('staff1').style.display='none';
document.getElementById('staff2').style.display='none';
document.getElementById('staff3').style.display='none';
document.getElementById('staff4').style.display='none';
document.getElementById('staff5').style.display='block';
document.getElementById('staff6').style.display='none';}
function staff6() {
document.getElementById('defaut').style.display='none';
document.getElementById('staff1').style.display='none';
document.getElementById('staff2').style.display='none';
document.getElementById('staff3').style.display='none';
document.getElementById('staff4').style.display='none';
document.getElementById('staff5').style.display='none';
document.getElementById('staff6').style.display='block';}
</script>
</body>
</html>

Ce code a été nettoyé de tout espace superflu , balise répétitive , etc ...

Pour toute modification ultérieure , pensez à éditer en mode avancé .

[L'ange noir]

Merci beaucoup pour ce travail de nettoyage.

Je vais sans doute y voir beaucoup plus clair pour résoudre mon problème d'info bulles.

Merci encore.

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 7 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est archivé afin de ne pas perdre les réponses apportées.