C'est la fin du projet CSSActif, vous trouverez les explications ici : Fin de CSSActif, ouverture du forum. Le forum reste cependant ouvert à tous et ses ressources sont entièrement disponibles. Merci à tous !
Derniers sujets
» Vos partenaires dans le footer
Sam 10 Nov 2018, 09:39 par FredR

» Mettre votre © Copyright dans le footer de votre forum
Sam 10 Nov 2018, 09:25 par FredR

» Effet pour vos sous-forums
Sam 10 Nov 2018, 06:13 par FredR

» Pour faire des beaux titres de sous-forums
Sam 10 Nov 2018, 05:55 par FredR

» Bouton ''Sélectionner le contenu'', pour les codes
Sam 10 Nov 2018, 05:41 par FredR

» Modifier l'apparence du titre des topics
Sam 10 Nov 2018, 05:28 par FredR

» Début d'un sujet/Fond pour sujet important
Sam 10 Nov 2018, 02:45 par FredR

» Previsualiser le premier message d'un sujet
Ven 09 Nov 2018, 12:49 par FredR


Partagez | 
 

Souci d'affichage Chrome et Firefox

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Voir le profil de l'utilisateur http://oyoken.forumactif.org/
avatar
{ Membre }
{ Membre }

Masculin Messages : 34



Bonjour/Bonsoir,

Tout d'abord j'espère avoir bien recherché si mon problème était déjà arrivé (ce dont je suis quasiment sûr mais comme j'arrive pas à mettre les bons mots-clés je rame).

Mon problème étant tout simplement une différence d'affichagede mon panneau d'accueil entre les deux navigateurs que sont Firefox et Google Chrome.

Sur Firefox le code est Ok et tout passe normalement mais lorsque je visualise le rendu sous Chrome, le panneau d'accueil est complètement déformé. Les infobulles avec les images ne fonctionnent plus alors que celles faites avec du texte fonctionnent très bien scratch

Ayant du mal à m'en sortir tout seul sur ce coup là, une âme charitable en ces périodes de fêtes saurait-elle me débloquer..?

Voici le code CSS du PA :

Code:
.pa{
 width:1100px;
 height:800px;
 background-color:#a89362;
 background-attachement:fixed;
 background-image:url(http://img195.imageshack.us/img195/5715/pastnewlogo.png);
 background-repeat:no-repeat;
 border-top:solid 5px #8a7441;
 border-bottom:solid 5px #8a7441;
 border-right:solid 2px #8a7441;
 border-left:solid 2px #8a7441;
  }
 
.link{
 background-color:#a89362;
 border-top:solid 3px #8a7441;
 border-bottom:solid 3px #8a7441;
 border-right:solid 1px #8a7441;
 border-left:solid 1px #8a7441;
 -moz-border-radius:10px 0px 10px 0px;
 -webkit-border-radius:10px 0px 10px 0px;
 text-align:center;
 position:relative;
 text-decoration:none;
 left:0px;
 padding-left:5px;
 padding-right:5px;
 padding-top:1px;
 padding-bottom:3px;
 color:#947e2e;
 top:110px;
 font-size:14px;

 }
 
.link:hover{
 border-top:double #a89362;
 border-bottom:double #a89362;
 border-right:double #a89362;
 border-left:double #a89362;
 background-color:#8a7441;
 position:relative;
 text-decoration: none;
 text-shadow:2px 2px 5px white;
 color:white;
 }

 .news{
 background-color:#a89362;
 border-top:solid 3px #8a7441;
 border-bottom:solid 3px #8a7441;
 border-right:solid 1px #8a7441;
 border-left:solid 1px #8a7441;
 -moz-border-radius:10px 0px 10px 0px;
 -webkit-border-radius:10px 0px 10px 0px;
 text-align:center;
 position:relative;
 text-decoration:none;
 left:0px;
 padding-left:5px;
 padding-right:5px;
 padding-top:1px;
 padding-bottom:3px;
 color:#947e2e;
 top:110px;
 font-size:14px;
 color:#6e5d1d;
 }
 
.news:hover{
 border-top:double #a89362;
 border-bottom:double #a89362;
 border-right:double #a89362;
 border-left:double #a89362;
 background-color:#8a7441;
 position:relative;
 text-decoration: none;
 text-shadow:2px 2px 5px white;
 color:red;
 }
 
.staff{
 width:890px;
 height:125px;
 background-color:#a89362;
 border-top:solid 3px #8a7441;
 border-bottom:solid 3px #8a7441;
 border-right:solid 1px #8a7441;
 border-left:solid 1px #8a7441;
 -moz-border-radius:0px 0px 10px 10px;
 -webkit-border-radius:0px 0px 10px 10px;
 position:relative;
 top:140px;
 left:0px;
 }

.well{
 text-shadow:2px 2px 5px white;
 font-family:Georgia;
 font-size:14px;
 background-color:#a89362;
 border-top:solid 3px #8a7441;
 border-bottom:solid 3px #8a7441;
 border-right:solid 1px #8a7441;
 border-left:solid 1px #8a7441;
 -moz-border-radius:0px 0px 10px 10px;
 -webkit-border-radius:0px 0px 10px 10px;
 padding-top:3px;
 padding-bottom:3px;
 }

.well:hover {
 border-top:double #a89362;
 border-bottom:double #a89362;
 border-right:double #a89362;
 border-left:double #a89362;
 background-color:#8a7441;
 position:relative;
 text-decoration: none;
 text-shadow:2px 2px 5px white;
 color:white;
 }
 
a.vio
{
 position:relative;
 filter:alpha(opacity=50);
 -moz-opacity:0.5;
 opacity: 0.5;
   }
   
a.vio  span
{
 display:none;
 filter:alpha(opacity=50);
 -moz-opacity:0.5;
 opacity: 0.5;
   }
   
a.vio:hover
{
 background: none;
 z-index: 500;
 filter:alpha(opacity=100);
 -moz-opacity:1;
 opacity: 1;
   }
   
a.vio:hover  span
{
 width: 100px;
 height: 125px;
 display: inline;
 position: absolute;
 top: -50px;
 left: -40px;
 border-top:double #a89362;
 border-bottom:double #a89362;
 border-right:double #a89362;
 border-left:double #a89362;
 background-color:#8a7441;
 -moz-border-radius:10px 0px 10px 0px;
 -webkit-border-radius:10px 0px 10px 0px;
 filter:alpha(opacity=100);
 -moz-opacity:1;
 opacity: 1;
 color:white;
 text-shadow:2px 2px 5px white;
 }
.story{
 position:relative;
 width:400px;
 height:280px;
 border-right: dotted #8a7441;
 border-left:dotted #8a7441;
 border-top:dotted #8a7441;
 border-bottom:dotted #8a7441;
 top:150px;
 left:-250px;
 text-align:justify;
 padding-right:5px;
 padding-left:5px;
 text-shadow:1px 1px 5px white;
 }
 
.story2{
 width:300px;
 height:25px;
 border-top:double #a89362;
 border-bottom:double #a89362;
 border-right:double #a89362;
 border-left:double #a89362;
 background-color:#8a7441;
 text-align:center;
 padding-top:3px;
 color:white;
 font-size:14px;
 position:relative;
 -moz-border-radius:10px 10px 10px 10px;
 -webkit-border-radius:10px 10px 10px 10px;
 margin-left:50px;
 margin-top:5px;
 margin-bottom:5px;
 text-shadow:2px 2px 5px white;
 }

.part{
 position:absolute;
 width:400px;
 height:280px;
 border-right: dotted #8a7441;
 border-left:dotted #8a7441;
 border-top:dotted #8a7441;
 border-bottom:dotted #8a7441;
 padding-right:5px;
 padding-left:5px;
 margin-top:-136px;
 margin-left:30px;
 }
.part2{
 width:300px;
 height:25px;
 border-top:double #a89362;
 border-bottom:double #a89362;
 border-right:double #a89362;
 border-left:double #a89362;
 background-color:#8a7441;
 text-align:center;
 padding-top:3px;
 color:white;
 font-size:14px;
 position:absolute;
 -moz-border-radius:10px 10px 10px 10px;
 -webkit-border-radius:10px 10px 10px 10px;
 margin-left:50px;
 margin-top:5px;
 margin-bottom:5px;
 text-shadow:2px 2px 5px white;
 }

.top{
 width:300px;
 height:25px;
 border-top:double #a89362;
 border-bottom:double #a89362;
 border-right:double #a89362;
 border-left:double #a89362;
 background-color:#8a7441;
 text-align:center;
 padding-top:3px;
 margin-left:50px;
 margin-top:5px;
 color:white;
 font-size:14px;
 position:absolute;
 -moz-border-radius:10px 10px 10px 10px;
 -webkit-border-radius:10px 10px 10px 10px;
 text-shadow:2px 2px 5px white;
  }
 
.forget{
 width:300px;
 height:25px;
 border-top:double #a89362;
 border-bottom:double #a89362;
 border-right:double #a89362;
 border-left:double #a89362;
 background-color:#8a7441;
 text-align:center;
 padding-top:3px;
 margin-left:50px;
 margin-top:5px;
 color:white;
 font-size:14px;
 position:absolute;
 -moz-border-radius:10px 10px 10px 10px;
 -webkit-border-radius:10px 10px 10px 10px;
 text-shadow:2px 2px 5px white;
  }
 
 a.saint
{
 position:absolute;
 filter:alpha(opacity=50);
 -moz-opacity:0.5;
 opacity: 0.5;
 width:150px;
 background-color:#a89362;
 border-top:solid 3px #8a7441;
 border-bottom:solid 3px #8a7441;
 border-right:solid 1px #8a7441;
 border-left:solid 1px #8a7441;
 -moz-border-radius:10px 10px 0px 0px;
 -webkit-border-radius:10px 10px 0px 0px;
 text-align:center;
 padding-left:5px;
 padding-right:5px;
 padding-top:1px;
 padding-bottom:3px;
 text-decoration:none;
 font-size:14px;
 margin-top:160px;
 margin-left:-490px;
   }
   
a.saint  span
{
 display:none;
 filter:alpha(opacity=50);
 -moz-opacity:0.5;
 opacity: 0.5;
   }
   
a.saint:hover
{
 background: none;
 z-index: 500;
 filter:alpha(opacity=100);
 -moz-opacity:1;
 opacity: 1;
 border-top:double #a89362;
 border-bottom:double #a89362;
 border-right:double #a89362;
 border-left:double #a89362;
 background-color:#8a7441;
 position:absolute;
 text-decoration: none;
 text-shadow:2px 2px 5px darkblue;
 color:white;
   }
   
a.saint:hover  span
{
 width: 200px;
 height: 140px;
 display: inline;
 position: absolute;
 border-top:double #a89362;
 border-bottom:double #a89362;
 border-right:double #a89362;
 border-left:double #a89362;
 background-color:#8a7441;
 -moz-border-radius:10px 10px 0px 0px;
 -webkit-border-radius:10px 10px 0px 0px;
 filter:alpha(opacity=100);
 -moz-opacity:1;
 opacity: 1;
 color:white;
 text-shadow:2px 2px 5px darkblue;
 top:21px;
 left:-25px;
 font-size:12px;
 }
 
 a.spectre
{
 position:absolute;
 filter:alpha(opacity=50);
 -moz-opacity:0.5;
 opacity: 0.5;
 width:150px;
 background-color:#a89362;
 border-top:solid 3px #8a7441;
 border-bottom:solid 3px #8a7441;
 border-right:solid 1px #8a7441;
 border-left:solid 1px #8a7441;
 -moz-border-radius:10px 10px 0px 0px;
 -webkit-border-radius:10px 10px 0px 0px;
 text-align:center;
 padding-left:5px;
 padding-right:5px;
 padding-top:1px;
 padding-bottom:3px;
 text-decoration:none;
 font-size:14px;
 margin-top:160px;
 margin-left:-290px;
   }
   
a.spectre  span
{
 display:none;
 filter:alpha(opacity=50);
 -moz-opacity:0.5;
 opacity: 0.5;
   }
   
a.spectre:hover
{
 background: none;
 z-index: 500;
 filter:alpha(opacity=100);
 -moz-opacity:1;
 opacity: 1;
 border-top:double #a89362;
 border-bottom:double #a89362;
 border-right:double #a89362;
 border-left:double #a89362;
 background-color:#8a7441;
 position:absolute;
 text-decoration: none;
 text-shadow:2px 2px 5px indigo;
 color:white;
   }
   
a.spectre:hover  span
{
 width: 200px;
 height: 140px;
 display: inline;
 position: absolute;
 border-top:double #a89362;
 border-bottom:double #a89362;
 border-right:double #a89362;
 border-left:double #a89362;
 background-color:#8a7441;
 -moz-border-radius:10px 10px 0px 0px;
 -webkit-border-radius:10px 10px 0px 0px;
 filter:alpha(opacity=100);
 -moz-opacity:1;
 opacity: 1;
 color:white;
 text-shadow:2px 2px 5px indigo;
 top:21px;
 left:-25px;
 font-size:12px;
 }
 
 a.marina
{
 position:absolute;
 filter:alpha(opacity=50);
 -moz-opacity:0.5;
 opacity: 0.5;
 width:150px;
 background-color:#a89362;
 border-top:solid 3px #8a7441;
 border-bottom:solid 3px #8a7441;
 border-right:solid 1px #8a7441;
 border-left:solid 1px #8a7441;
 -moz-border-radius:10px 10px 0px 0px;
 -webkit-border-radius:10px 10px 0px 0px;
 text-align:center;
 padding-left:5px;
 padding-right:5px;
 padding-top:1px;
 padding-bottom:3px;
 text-decoration:none;
 font-size:14px;
 margin-top:160px;
 margin-left:-90px;
   }
   
a.marina  span
{
 display:none;
 filter:alpha(opacity=50);
 -moz-opacity:0.5;
 opacity: 0.5;
   }
   
a.marina:hover
{
 background: none;
 z-index: 500;
 filter:alpha(opacity=100);
 -moz-opacity:1;
 opacity: 1;
 border-top:double #a89362;
 border-bottom:double #a89362;
 border-right:double #a89362;
 border-left:double #a89362;
 background-color:#8a7441;
 position:absolute;
 text-decoration: none;
 text-shadow:2px 2px 5px deepskyblue;
 color:white;
   }
   
a.marina:hover  span
{
 width: 200px;
 height: 140px;
 display: inline;
 position: absolute;
 border-top:double #a89362;
 border-bottom:double #a89362;
 border-right:double #a89362;
 border-left:double #a89362;
 background-color:#8a7441;
 -moz-border-radius:10px 10px 0px 0px;
 -webkit-border-radius:10px 10px 0px 0px;
 filter:alpha(opacity=100);
 -moz-opacity:1;
 opacity: 1;
 color:white;
 text-shadow:2px 2px 5px deepskyblue;
 top:21px;
 left:-25px;
 font-size:12px;
 }
 
 a.ase
{
 position:absolute;
 filter:alpha(opacity=50);
 -moz-opacity:0.5;
 opacity: 0.5;
 width:150px;
 background-color:#a89362;
 border-top:solid 3px #8a7441;
 border-bottom:solid 3px #8a7441;
 border-right:solid 1px #8a7441;
 border-left:solid 1px #8a7441;
 -moz-border-radius:10px 10px 0px 0px;
 -webkit-border-radius:10px 10px 0px 0px;
 text-align:center;
 padding-left:5px;
 padding-right:5px;
 padding-top:1px;
 padding-bottom:3px;
 text-decoration:none;
 font-size:14px;
 margin-top:160px;
 margin-left:110px;
   }
   
a.ase  span
{
 display:none;
 filter:alpha(opacity=50);
 -moz-opacity:0.5;
 opacity: 0.5;
   }
   
a.ase:hover
{
 background: none;
 z-index: 500;
 filter:alpha(opacity=100);
 -moz-opacity:1;
 opacity: 1;
 border-top:double #a89362;
 border-bottom:double #a89362;
 border-right:double #a89362;
 border-left:double #a89362;
 background-color:#8a7441;
 position:absolute;
 text-decoration: none;
 text-shadow:2px 2px 5px white;
 color:white;
   }
   
a.ase:hover  span
{
 width: 200px;
 height: 140px;
 display: inline;
 position: absolute;
 border-top:double #a89362;
 border-bottom:double #a89362;
 border-right:double #a89362;
 border-left:double #a89362;
 background-color:#8a7441;
 -moz-border-radius:10px 10px 0px 0px;
 -webkit-border-radius:10px 10px 0px 0px;
 filter:alpha(opacity=100);
 -moz-opacity:1;
 opacity: 1;
 color:white;
 text-shadow:2px 2px 5px white;
 top:21px;
 left:-25px;
 font-size:12px;
 }
 
 a.astre
{
 position:absolute;
 filter:alpha(opacity=50);
 -moz-opacity:0.5;
 opacity: 0.5;
 width:150px;
 background-color:#a89362;
 border-top:solid 3px #8a7441;
 border-bottom:solid 3px #8a7441;
 border-right:solid 1px #8a7441;
 border-left:solid 1px #8a7441;
 -moz-border-radius:10px 10px 0px 0px;
 -webkit-border-radius:10px 10px 0px 0px;
 text-align:center;
 padding-left:5px;
 padding-right:5px;
 padding-top:1px;
 padding-bottom:3px;
 text-decoration:none;
 font-size:14px;
 margin-top:160px;
 margin-left:310px;
   }
   
a.astre  span
{
 display:none;
 filter:alpha(opacity=50);
 -moz-opacity:0.5;
 opacity: 0.5;
   }
   
a.astre:hover
{
 background: none;
 z-index: 500;
 filter:alpha(opacity=100);
 -moz-opacity:1;
 opacity: 1;
 border-top:double #a89362;
 border-bottom:double #a89362;
 border-right:double #a89362;
 border-left:double #a89362;
 background-color:#8a7441;
 position:absolute;
 text-decoration: none;
 text-shadow:2px 2px 5px darkred;
 color:white;
   }
   
a.astre:hover  span
{
 width: 200px;
 height: 140px;
 display: inline;
 position: absolute;
 border-top:double #a89362;
 border-bottom:double #a89362;
 border-right:double #a89362;
 border-left:double #a89362;
 background-color:#8a7441;
 -moz-border-radius:10px 10px 0px 0px;
 -webkit-border-radius:10px 10px 0px 0px;
 filter:alpha(opacity=100);
 -moz-opacity:1;
 opacity: 1;
 color:white;
 text-shadow:2px 2px 5px darkred;
 top:21px;
 left:-25px;
 font-size:12px;
 }

Et voici le code HTML ( conscient qu'il y a certainement des erreurs.. )

Code:
</style></head>
<body>
   <div class="pa">
   <a href="http://www.saints-of-thepast.com/f1-regles" target="_blank" class="link"><color=#6e5d1d><b>R</b>èglement</color></a>
   <a href="http://www.saints-of-thepast.com/f3-presentation" target="_blank" class="link"><color=#6e5d1d><b>P</b>résentation</color></a>
   <a href="http://www.saints-of-thepast.com/f170-liste-des-personnages" target="_blank" class="link"><color=#6e5d1d><b>P</b>ersonnages</color></a>
   <a href="http://www.saints-of-thepast.com/f2-news" target="_blank" class="news"><color=#6e5d1d><b>N</b>ews</color></a>   
   <a href="http://www.saints-of-thepast.com/f4-questions-reponses" target="_blank" class="link"><color=#6e5d1d><b>Q</b>uestions ?</color></a>
   <a href="http://www.saints-of-thepast.com/f114-partenaires-de-saints-of-the-past" target="_blank" class="link"><color=#6e5d1d><b>P</b>artenaires</color></a>
   

   <div class="staff">
   <div class="well">LE STAFF DE <b>S</b>AINT <b>O</b>F <b>T</b>HE <b>P</b>AST VOUS SOUHAITENT LA BIENVENUE !</div>
   

   <a class="vio"><img src="http://img89.imageshack.us/img89/1290/violate2.png">
   <span>
   <div style="font-size:12px;font-family:"Georgia;">~<b>V</b>iolate~</b></div>
   <div><a href="http://www.saints-of-thepast.com/u1"><img src="http://img89.imageshack.us/img89/1290/violate2.png"></a>
                  <a href="http://www.saints-of-thepast.com/msg.forum?mode=post&u=1" target="_blank" style="text-decoration:none;color:red;text-shadow:2px 2px 5px white;"><b>Contacter !</b>
                  </a>
               </div>
               <div style="font-size:12px;font-family:"Georgia;">|<b>W</b>ebMaster|
               </div>
            </span>
         </a>
      <a class="vio"><img src="http://img3.imageshack.us/img3/1017/urioadm.png">
   <span>
   <div style="font-size:12px;font-family:"Georgia;">~<b>U</b>rio~</b></div>
   <div><a href="http://www.saints-of-thepast.com/u360"><img src="http://img3.imageshack.us/img3/1017/urioadm.png"></a>
                  <a href="http://www.saints-of-thepast.com/msg.forum?mode=post&u=360" target="_blank" style="text-decoration:none;color:red;text-shadow:2px 2px 5px white;"><b>Contacter !</b>
                  </a>
               </div>
               <div style="font-size:12px;font-family:"Georgia;">|<b>C</b>ancer|
               </div>
            </span>
         </a>
      <a class="vio"><img src="http://img90.imageshack.us/img90/5468/freiya.png">
   <span>
   <div style="font-size:12px;font-family:"Georgia;">~<b>F</b>reyja~</b></div>
   <div><a href="http://www.saints-of-thepast.com/u487"><img src="http://img90.imageshack.us/img90/5468/freiya.png"></a>
                  <a href="http://www.saints-of-thepast.com/msg.forum?mode=post&u=487" target="_blank" style="text-decoration:none;color:red;text-shadow:2px 2px 5px white;"><b>Contacter !</b>
                  </a>
               </div>
               <div style="font-size:12px;font-family:"Georgia;">|<b>A</b>mour|
               </div>
            </span>
         </a>
      <a class="vio"><img src="http://img829.imageshack.us/img829/5126/hadesadm.png">
   <span>
   <div style="font-size:12px;font-family:"Georgia;">~<b>H</b>adès~</b></div>
   <div><a href="http://www.saints-of-thepast.com/u517"><img src="http://img829.imageshack.us/img829/5126/hadesadm.png"></a>
                  <a href="http://www.saints-of-thepast.com/msg.forum?mode=post&u=517" target="_blank" style="text-decoration:none;color:red;text-shadow:2px 2px 5px white;"><b>Contacter !</b>
                  </a>
               </div>
               <div style="font-size:12px;font-family:"Georgia;">|<b>M</b>onarque|
               </div>
            </span>
         </a>
      <a class="vio"><img src="http://img405.imageshack.us/img405/192/henriques.png">
   <span>
   <div style="font-size:12px;font-family:"Georgia;">~<b>H</b>enriques~</b></div>
   <div><a href="http://www.saints-of-thepast.com/u574"><img src="http://img405.imageshack.us/img405/192/henriques.png"></a>
                  <a href="http://www.saints-of-thepast.com/msg.forum?mode=post&u=574" target="_blank" style="text-decoration:none;color:red;text-shadow:2px 2px 5px white;"><b>Contacter !</b>
                  </a>
               </div>
               <div style="font-size:12px;font-family:"Georgia;">|<b>H</b>ydra|
               </div>
            </span>
         </a>
      <a class="vio"><img src="http://img401.imageshack.us/img401/2065/loki.png">
   <span>
   <div style="font-size:12px;font-family:"Georgia;">~<b>L</b>oki~</b></div>
   <div><img src="http://img401.imageshack.us/img401/2065/loki.png">
                  <a href="http://www.saints-of-thepast.com/privmsg?mode=post&u=638" target="_blank" style="text-decoration:none;color:green;text-shadow:2px 2px 5px white;"><b>Contacter !</b>
                  </a>
               </div>
               <div style="font-size:12px;font-family:"Georgia;">|<b>M</b>ensonge|
               </div>
            </span>
         </a>
      <a class="vio"><img src="http://img220.imageshack.us/img220/4360/kyro.png">
   <span>
   <div style="font-size:12px;font-family:"Georgia;">~<b>K</b>yro~</b></div>
   <div><img src="http://img220.imageshack.us/img220/4360/kyro.png">
                  <a href="http://www.saints-of-thepast.com/privmsg?mode=post&u=595" target="_blank" style="text-decoration:none;color:green;text-shadow:2px 2px 5px white;"><b>Contacter !</b>
                  </a>
               </div>
               <div style="font-size:12px;font-family:"Georgia;">|<b>S</b>quale|
               </div>
            </span>
         </a>
      <a class="vio"><img src="http://img217.imageshack.us/img217/4691/athenau.png">
   <span>
   <div style="font-size:12px;font-family:"Georgia;">~<b>A</b>rianna~</b></div>
   <div><img src="http://img217.imageshack.us/img217/4691/athenau.png">
                  <a href="http://www.saints-of-thepast.com/privmsg?mode=post&u=417" target="_blank" style="text-decoration:none;color:green;text-shadow:2px 2px 5px white;"><b>Contacter !</b>
                  </a>
               </div>
               <div style="font-size:12px;font-family:"Georgia;">|<b>S</b>agesse|
               </div>
            </span>
         </a>
      <a class="vio"><img src="http://img339.imageshack.us/img339/4249/chronost.png">
   <span>
   <div style="font-size:12px;font-family:"Georgia;">~<b>C</b>hronos~</b></div>
   <div><img src="http://img339.imageshack.us/img339/4249/chronost.png">
                  <a href="http://www.saints-of-thepast.com/privmsg?mode=post&u=552" target="_blank" style="text-decoration:none;color:green;text-shadow:2px 2px 5px white;"><b>Contacter !</b>
                  </a>
               </div>
               <div style="font-size:12px;font-family:"Georgia;">|<b>G</b>emini|
               </div>
            </span>
         </a>
      <a class="vio"><img src="http://img407.imageshack.us/img407/6917/pers.jpg">
   <span>
   <div style="font-size:12px;font-family:"Georgia;">~<b>P</b>erséphone~</b></div>
   <div><img src="http://img407.imageshack.us/img407/6917/pers.jpg">
                  <a href="http://www.saints-of-thepast.com/privmsg?mode=post&u=641" target="_blank" style="text-decoration:none;color:green;text-shadow:2px 2px 5px white;"><b>Contacter !</b>
                  </a>
               </div>
               <div style="font-size:12px;font-family:"Georgia;">|<b>R</b>eine|
               </div>
            </span>
         </a>         
      <a class="vio"><img src="http://img8.imageshack.us/img8/8193/thetis.png">
   <span>
   <div style="font-size:12px;font-family:"Georgia;">~<b>T</b>hétis~</b></div>
   <div><img src="http://img8.imageshack.us/img8/8193/thetis.png">
                  <a href="http://www.saints-of-thepast.com/privmsg?mode=post&u=650" target="_blank" style="text-decoration:none;color:green;text-shadow:2px 2px 5px white;"><b>Contacter !</b>
                  </a>
               </div>
               <div style="font-size:12px;font-family:"Georgia;">|<b>S</b>irène|
               </div>
            </span>
         </a>      
</div>
      <div class="story"><div class="story2"><b>S</b>tory</div><b>O</b>n raconte que, dans la Mythologie Antique Grecque, lorsque les forces du Mal menaçaient la Terre, des jeunes guerriers protégeaient la Déesse Athéna et faisaient régner l'Ordre et la Justice. On les appelle les Chevaliers Sacrés d'Athéna.On raconte aussi que leur force était si phénoménale que de leur poing ils pouvaient fendre le Ciel, et d'un coup de pied ils pouvaient entrouvrir la terre. Athéna se réincarne sur Terre tous les 200 ans pour combattre les forces du Mal, qui ne sont d'autres que la folie des autres Dieux voulant conquérir la planète et instaurer leur utopie.


<b>E</b>n 1990, les Chevaliers de Bronze, menés par Seiya de Pégase, et au service de Saori Kido, la Réincarnation d'Athéna, ont réussi à sauver la Terre ainsi que leur Déesse de nombreuses fois, contre les griffes de Saga des Gémeaux, de l'Empereur Poséidon et du Sombre Monarque Hadès.


<b>M</b>ais, savez vous ce qui s'est passé il y a 243 ans ? Cette Guerre dont ont survécu les légendaires Shion du Bélier et Dôko de la Balance ? Voici leur histoire...</div>

<span class="part"><div class="part2"><b>P</b>artenaires</div>
                  <div style="margin-top:45px;"><marquee style="width:350px;" direction="right" onmouseover=this.stop(); onmouseout=this.start();>
                     <a href="">
                     <img src="http://img408.imageshack.us/img408/9171/partenaire.jpg"></a>
                     <a href="">
                     <img src="http://img408.imageshack.us/img408/9171/partenaire.jpg"></a>
                     <a href="">
                     <img src="http://img408.imageshack.us/img408/9171/partenaire.jpg"></a>
                  </marquee>
                  <marquee style="width:350px;" direction="left" onmouseover=this.stop(); onmouseout=this.start();>
                     <a href="">
                     <img src="http://img408.imageshack.us/img408/9171/partenaire.jpg"></a>
                     <a href="">
                     <img src="http://img408.imageshack.us/img408/9171/partenaire.jpg"></a>
                     <a href="">
                     <img src="http://img408.imageshack.us/img408/9171/partenaire.jpg"></a>
                  </marquee></div>
                  <div class="top"><b>T</b>op <b>S</b>ites</div>
                  <div style="margin-top:45px;margin-left:-185px;"><a href="http://www.root-top.com/topsite/galaad/in.php?ID=5">
                  <img src="http://i67.servimg.com/u/f67/13/47/09/85/bpubss10.jpg"></a></div>
                  <div style="margin-top:-31px;"><a href="http://www.root-top.com/topsite/ssanthologie/in.php?ID=8">
                  <img src="http://i47.tinypic.com/rcqbrl.jpg"></a></div>
                  <div style="margin-top:-31px;margin-left:185px;"><a href="http://www.root-top.com/topsite/korben/in.php?ID=618">
                  <img src="http://img.root-top.com/topsite/korben/banner.gif"></a></div>
                  <div style="color:darkred">Un clic ne coute rien et peut apporter beaucoup :)</div>
                  <div class="forget"><b>D</b>on't <b>F</b>orget !</div>
                  <div style="margin-top:40px;"><a href="http://www.copyrightfrance.com/php/certificat.php?reference=N246166">
                  <img src="http://img174.imageshack.us/img174/8513/n2461661uf0.gif"></a></div>
                  </span>
      <a class="saint"><b>S</b>aints d'<b>A</b>théna
   <span>
<u><b>E</b>ffectif</u> : <i>19</i>

<u><b>D</b>ivinité</u> : <i>1</i>

<u><b>O</b>r</u> : <i>9</i>

<u><b>S</b>ilver</u> : <i>2</i>

<u><b>B</b>ronze</u> : <i>7</i>


<u><b>A</b>lliance</u> : <i>Izanami</i>

<u><b>G</b>uerre</u> : <i>Hadès ; Poséidon</i>
            </span>
         </a>
      <a class="spectre"><b>S</b>pectres d'<b>H</b>adès
   <span>
<u><b>E</b>ffectif</u> : <i>18</i>

<u><b>D</b>ivinité</u> : <i>4</i>

<u><b>J</b>uge</u> : <i>2</i>

<u><b>C</b>éleste</u> : <i>8</i>

<u><b>T</b>errestre</u> : <i>3</i>

<u><b>R</b>enégat</u> : <i>1</i>


<u><b>A</b>lliance</u> : <i>PNA- Poséidon</i>

<u><b>G</b>uerre</u> : <i>Athéna</i>
            </span>
         </a>
      <a class="marina"><b>M</b>arinas de <b>P</b>oséidon
   <span>
<u><b>E</b>ffectif</u> : <i>9</i>

<u><b>D</b>ivinité</u> : <i>1</i>

<u><b>G</b>énéral</u> : <i>2</i>

<u><b>C</b>apitaine</u> : <i>4</i>

<u><b>L</b>ieutenant</u> : <i>2</i>


<u><b>A</b>lliance</u> : <i>PNA - Hadès ; Odin</i>

<u><b>G</b>uerre</u> : <i>Athéna</i>
            </span>
         </a>
      <a class="ase"><b>A</b>ses d'<b>O</b>din
   <span>
<u><b>E</b>ffectif</u> : <i>10</i>

<u><b>D</b>ivinité</u> : <i>2</i>

<u><b>A</b>se</u> : <i>3</i>

<u><b>W</b>alkyrie</u> : <i>4</i>

<u><b>H</b>eimdall</u> : <i>1</i>


<u><b>A</b>lliance</u> : <i>PNA - Poséidon ; Athéna</i>

<u><b>G</b>uerre</u> : <i>Hadès</i>
            </span>
         </a>
      <a class="astre"><b>A</b>stres d'<b>I</b>zanami
   <span>
<u><b>E</b>ffectif</u> : <i>7</i>

<u><b>D</b>ivinité</u> : <i>0</i>

<u><b>P</b>lanète</u> : <i>5</i>

<u><b>P</b>rimaire</u> : <i>0</i>

<u><b>S</b>econdaire</u> : <i>2</i>


<u><b>A</b>lliance</u> : <i>Athéna</i>

<u><b>G</b>uerre</u> : <i>Hadès ; Poséidon</i>
            </span>
         </a>

</div>
   
   
</body>
</html>

Le lien du forum est ici et sert de passerelle pour l'original.
Celui-ci est en PHBB2.

Voici deux captures d'écran vous permettant peut-être de voir un peu plus le noeud du souci :

Code OK sous Firefox :

Ici

Code NOK sous Google Chrome :

Ici

Merci par avance pour vos réponses,

Amicalement, Oyo


Dernière édition par Oyoken le Mar 11 Jan 2011, 09:56, édité 1 fois
MessageSujet: Souci d'affichage Chrome et Firefox   Lun 27 Déc 2010, 11:31
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.creativejuiz.fr/
{ Membre }
{ Membre }

Masculin Messages : 69



Bonjour,

Dans un premier temps :
- connais-tu la différence entre un élément inline et un élément block ?
- que représente l'élément span et l'élément div
- connais-tu la différence entre un positionnement absolute, relative, et fixed ?

Simples questions pour pouvoir te répondre efficacement.

Je pense déjà que le problème vient de tes nombreuses div qui se trouvent dans des span.
Le navigateur qui a raison et Chrome pour le coup, Firefox a des bogues Razz

Bonne soirée


La taille maximale des avatars est dorénavant de 100 x 100px. Merci de mettre le vôtre à jour avant le 10 janvier 2011.
En savoir plus
MessageSujet: Re: Souci d'affichage Chrome et Firefox   Lun 27 Déc 2010, 18:54
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://oyoken.forumactif.org/
avatar
{ Membre }
{ Membre }

Masculin Messages : 34



Bonjour,

Ayant appris en autodidacte effectivement je réponds par la négative à tes trois questions.

-Pour la première je ne sais pas mais je vais regarder sur le forum.
-Pour la deuxième je n'arrive pas à m'apercevoir de la différence. Travaillant à la pratique j'ai juste remarqué qu'en utilisant la balise span celle-ci me permettait de placer mes éléments côte à côte alors que la balise div me fait sauter une ligne à chaque fois >.<
-Pour la dernière question j'ai beau avoir eut les explications qui expliquent la différence je n'arrive vraiment pas à discerner lequel sert à quoi.

Mince moi qui suis un peu pro-FF je viens de prendre un coup derrière la tête xD
Ce qui peut paraitre bizarre c'est que le seul endroit où j'ai "improviser" le code sans passer par des éléments connus c'est sur l'affichage de l'endroit où se trouve les partenaires et les top-sites... Et effectivement à cet endroit je dispose d'une balise span avec des div à l'intérieur.

Les autres endroits où des span sont utilisés, le sont dans la mesure où j'ai suivi ce tutoriel qui inclut des div dans des span... Arghhh je m'y perds...

Mais bon le commencent déjà peut-être et les trois premières questions ^.^

Merci pour ton implication, Oyo.

Edit : Donc si j'ai bien regardé quelques infos sur la toile je me rends compte que la balise div appartient à l'élément block et que la balise span appartient à l'élement inline... Mouais... Donc c'est quoi concrètement leurs différences, l'une fait apparaitre des petits oiseaux dans le ciel pendant que l'autre fait tomber des éclairs..? xD
Je pense que tous mes problèmes se regroupent mais...
MessageSujet: Re: Souci d'affichage Chrome et Firefox   Mar 28 Déc 2010, 03:46
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.creativejuiz.fr/
{ Membre }
{ Membre }

Masculin Messages : 69



Bonsoir,

C'est globalement ça ^^
Div est un élément sémantiquement neutre de type block (h1 par exemple est aussi de type block, mais il n'est pas neutre, il représente un titre de niveau 1).
Dans le même goût, span est un élément sémantiquement neutre de type inline (là où strong est un élément inline de sémantique "texte important").

Un inline permet aux éléments de même type de se placer les uns à côté des autres.
Un block passe à la ligne et prend par défaut toute la largeur disponible. Cet élément peut être redimensionné.

Un block dans un inline n'est pas admis par le W3C et les navigateurs ont des interprétations différentes.

Déjà quand tu fais un truc admis par le W3C tu peux avoir des comportements différents, alors si en plus tu fais des choses non admises, je te laisse imaginer le désastre.

Je te conseille donc d'inverser l'utilisation des div et span.

Après, rien ne t'empêche d'utiliser en CSS un display: inline; sur un élément de type block, et un display: block; sur un élément de type inline.

La solution miracle est le display placé en "inline-block".
Cela te permet de manipuler des éléments les uns à côté des autres tout en offrant la possibilité de les dimensionner.



Concernant le positionnement.
Par défaut tu as du relative.
Le positionnement absolute te permet de sortir du flux un élément (il n'interagit donc plus avec les autres éléments du flux), cet élément se place par rapport au dernier élément positionné. (soit le viewport par défaut).
Le positionnement fixed a un peu le même comportement que l'absolute, sauf qu'il permet de ne pas faire interagir l'élément avec l'action scroll de la page.

C'est pour résumer... on pourrait avoir des kilomètres d'explications comme ça.
Le meilleur c'est l'expérience et l'expérimentation.

La plupart des intégrateurs sont autodidactes, on apprend difficilement ces choses en école.

Bonne continuation Wink



La taille maximale des avatars est dorénavant de 100 x 100px. Merci de mettre le vôtre à jour avant le 10 janvier 2011.
En savoir plus
MessageSujet: Re: Souci d'affichage Chrome et Firefox   Mar 28 Déc 2010, 13:44
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Psychopathe
Psychopathe

Féminin Messages : 3407



Bonjour (:
Votre problème est-il toujours d'actualité ? S'il est maintenant résolu, merci de cocher l'icône en éditant votre premier message (:




Dernière édition par Psycho le Ven 07 Jan 2011, 16:56, édité 1 fois
MessageSujet: Re: Souci d'affichage Chrome et Firefox   Mar 04 Jan 2011, 13:15
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://oyoken.forumactif.org/
avatar
{ Membre }
{ Membre }

Masculin Messages : 34



Bonjour,

Le problème n'est pas solutionné pour autant mais je vais tenter de suivre les conseils de Riku Asakura.
Merci pour son implication.

Cordialement, Oyo.


MessageSujet: Re: Souci d'affichage Chrome et Firefox   Ven 07 Jan 2011, 03:57
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Psychopathe
Psychopathe

Féminin Messages : 3407



L'icône résolu est cochée, je déplace donc le sujet (:


MessageSujet: Re: Souci d'affichage Chrome et Firefox   Mar 11 Jan 2011, 15:15
Revenir en haut Aller en bas
khawla89
Invité




j'ai une Problème au niveau d affichage du ma page web code en php css dont la suivante:avec Firefox le schadow s'affiche bien contrairement au chrome et Torch et IE SVP pouvez vous m'aider?
Merci
MessageSujet: Affichage de Page web avec différents navigateurs   Jeu 30 Avr 2015, 09:29
Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: Souci d'affichage Chrome et Firefox   
Revenir en haut Aller en bas
 

Souci d'affichage Chrome et Firefox

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Souci d'affichage du tchat
» Affichage onglets sous Firefox & IE
» portail trop grand sur le portail sous google chrome et firefox
» Souci d'affichage des sous forums avec CSS modifié
» Gros problème d'affichage avec Mozilla Firefox !

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forumactif.com