Sujets similaires

Dernière édition par Oyoken le Mar 11 Jan 2011, 09:56, édité 1 fois

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

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

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...

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

Sujet: Re: Souci d'affichage Chrome et Firefox Mar 04 Jan 2011, 13:15

Bonjour (:
Votre problème est-il toujours d'actualité ? S'il est maintenant résolu, merci de cocher l'icône Souci d'affichage Chrome et Firefox Resolu3

Souci d'affichage Chrome et Firefox Resolu3

en éditant votre premier message (:

Sujet: Re: Souci d'affichage Chrome et Firefox Ven 07 Jan 2011, 03:57

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.

Sujet: Re: Souci d'affichage Chrome et Firefox Mar 11 Jan 2011, 15:15

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

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

Souci d'affichage Chrome et Firefox

Souci d'affichage Chrome et Firefox

Sujets similaires

Sujets similaires

Partenaires Or