Problème CSS adaptation à Chrome

2 participants

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

Résolu Problème CSS adaptation à Chrome

Message par ukulola Lun 20 Juil 2015 - 11:58

Détails techniques


Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Plusieurs utilisateurs
Lien du forum : http://age-of-heroes.forumactif.org/h1-pv-pa

Description du problème

Bonjour à tous,

Comme vous pouvez le voir dans le lien que j'ai mis en copie, j'ai fait un système d'onglets pour la présentation de mon staff. Toutefois, avec le reste du staff, nous avons remarqué que ça ne fonctionnait pas sur chrome et je n'arrive pas à savoir pourquoi et où. Auriez-vous une idée?

Cordialement,


Dernière édition par ukulola le Lun 27 Juil 2015 - 23:29, édité 2 fois
avatar

ukulola
Nouveau membre

Messages : 5
Inscrit(e) le : 20/07/2015

https://smokeandmirrors.forumactif.com/
ukulola a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème CSS adaptation à Chrome

Message par ukulola Dim 26 Juil 2015 - 22:28

UP s'il vous plaît! Like a Star @ heaven
avatar

ukulola
Nouveau membre

Messages : 5
Inscrit(e) le : 20/07/2015

https://smokeandmirrors.forumactif.com/
ukulola a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème CSS adaptation à Chrome

Message par FairyAiiro Lun 27 Juil 2015 - 17:47

Bonjour Smile

Le problème est tout bête.
En fait, tu inclus le script javascript indirectement grâce à :
Code:
<script language="javascript" src="http://beta-testeur.forumactif.com/h4-onglets">
</script>
Et dans ce src="", tu as mis le lien d'une page html.
c'est pas tip top ahah.

Il faut mieux que tu enregistres le script javascript dans une nouvelle page javascript que tu peux créer dans le pannel d'administration -> Modules -> Pages JS.
Tu mets dedans le script uniquement, et tu coches rien.
Puis, tu relèves le lien que ça te donnera une fois enregistrée et tu le mets à la place de "/h4-onglet" Wink.

Ou alors, tu met directement dans les balises script. Avec ce code, je suis sous chrome et je n'ai pas de souci :
Code:
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>staff</title><style type="text/css">
/* LES ONGLETS */
.onglet{
display:inline-block;
margin-left:0px;
margin-right:0px;
padding-top:3px;
padding-bottom:3px;
cursor:pointer;}
.onglet_0{
color: #FFFFFF;
font-family: arial;
font-size: 24px;
letter-spacing: 5px;
text-shadow: 1px 1px 2px #F7D8CE;
}
.contenu_onglet{
width:160px;
height:100px;
height: auto;
display:none;
}
a:link {text-decoration: none !important;
  -moz-transition: all .6s ease-in-out;
font-size:10px;
  -o-transition: all .6s ease-in-out;
  transition: all .6s ease-in-out;
  -webkit-transition: all .6s ease-in-out;
color:#7794AE;}
a:visited {text-decoration: none !important;
  -moz-transition: all .6s ease-in-out;
  -o-transition: all .6s ease-in-out;
  transition: all .6s ease-in-out;
font-size:10px;
  -webkit-transition: all .6s ease-in-out;
color:#7794AE;}
a:active {text-decoration: none !important;
  -moz-transition: all .6s ease-in-out;
  -o-transition: all .6s ease-in-out;
  transition: all .6s ease-in-out;
font-size:10px;
  -webkit-transition: all .6s ease-in-out;
color:#7794AE;}
a:hover {text-decoration: none !important;
font-size:10px;
color:#D6D6C0;}

.cadre{
background-color: red;text-align: center; margin: 0px; padding: 0px;
}
.desc1 {
background-color: black;
border:0px solid#061524;
line-height:100%;
margin-top: 0px;
margin-bottom: 0px;
width: 160px;
height:100px;
letter-spacing: -1px;
word-spacing: 2px;
font-size:18px;
line-height: 100%;
font-family: 'Rajdhani', sans-serif;
color:#2A4D6E;
text-shadow: 0px 0px 1px ;
text-align: center;
text-transform: uppercase;}

x {color:#919191;font-family:arial;text-transform:uppercase;font-size:11px;}
x1 {color:#919191;font-family:arial;text-transform:uppercase;font-size:9px;}

y {color:#919191;
font-size:10px;
  font-family:verdana;
text-transform:uppercase;
font-size:13px;}
.connor {
background-color: #f9faf5;
border-right:4px solid #F2EDDA;
border-left:4px solid #F2EDDA;
-moz-border-radius:15px;-webkit-border-radius:15px;
-moz-border-radius: 15px 15px 15px 15px;
-moz-box-shadow: 0px 0px 1px #FFFFFF;
margin-top: 0px;
margin-bottom: 0px;
width: 330px;
height: 90px;
background-image : url(http://img11.hostingpics.net/pics/828965tif.png);
}
.ephy {
background-color: #f9faf5;
border-right:4px solid #F2EDDA;
border-left:4px solid #F2EDDA;
-moz-border-radius:15px;-webkit-border-radius:15px;
-moz-border-radius: 15px 15px 15px 15px;
-moz-box-shadow: 0px 0px 1px #FFFFFF;
margin-top: 0px;
margin-bottom: 0px;
width: 330px;
height: 90px;
}
.desc2 {
background-color: #f9faf5;
border-right:4px solid #F2EDDA;
border-left:4px solid #F2EDDA;
border-bottom:1px solid #F2EDDA;
-moz-border-radius: 15px 15px 15px 15px;
-moz-box-shadow: 0px 0px 1px #FFFFFF;
-moz-border-radius:15px;-webkit-border-radius:15px;
font-family: verdana;
color:#999789;
font-size: 11px;
text-align: justify;
line-height: 12px;
margin-bottom: 0px;
margin-top: 0px;
width:330px;
height: 50px;}

.staff {
  width:37px;
border:#061524 1px solid;
  -moz-transition: all .7s ease-in-out;
  -o-transition: all .7s ease-in-out;
  transition: all .7s ease-in-out;
  -webkit-transition: all .7s ease-in-out;
  opacity:0.5;
margin-right: 0px;
margin-left: 0px;
align:center;
}
.staff img {
margin-right: 0px;
margin-left: 0px;
align:center;
}
 .staff:hover {
  background-color:grey; 
margin-right: 0px;
margin-left: 0px;
align:center;
  opacity:1;
}

</style><script>              function change_onglet(name)
                {
                        document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
                        document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
                        document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
                        document.getElementById('contenu_onglet_'+name).style.display = 'block';
                        anc_onglet = name;
                }
        //--></script>
  <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Rajdhani:500">
</head><body><table>
                                                                          
   <tbody>
                                                                             
      <tr>
                                                                                
         <td>
                                                <span class="onglet_0 onglet" id="onglet_groupe1" onmouseover="javascript:change_onglet('groupe1');"><a target="blank" href="http://age-of-heroes.forumactif.org/u3?tt=1"><img src="http://i.imgur.com/ykAKLfb.jpg" class="staff"></a></span>                                   
         </td>
                                                                                
         <td>
                                                <span class="onglet_0 onglet" id="onglet_groupe2" onmouseover="javascript:change_onglet('groupe2');"><a target="blank" href="http://age-of-heroes.forumactif.org/u18?tt=1"><img src="http://rpg.frakkingcylon.com/gallery/albums/Robert%20Downey%20Jr/013.png" class="staff"></a></span>                                   
         </td>
                                                                              
         <td>
                                                <span class="onglet_0 onglet" id="onglet_groupe3" onmouseover="javascript:change_onglet('groupe3');"><a target="blank" href="http://age-of-heroes.forumactif.org/u36?tt=1"><img src="https://36.media.tumblr.com/1c8056516fa8407c03f70701ff2cb5eb/tumblr_nr70tppyQn1uax6eio9_250.png" class="staff"></a></span>                                   
         </td>
                                                                              
         <td>
                                                <span class="onglet_0 onglet" id="onglet_groupe4" onmouseover="javascript:change_onglet('groupe4');"><a target="blank" href="http://age-of-heroes.forumactif.org/u26?tt=1"><img src="http://illiweb.com/fa/pbucket.gif" class="staff"></a></span>                                   
         </td>
                                                                                
      </tr>
                                                                             
   </tbody>
</table>
                                   
<div class="contenu_onglets">
                                                                          
   <div class="contenu_onglets">
                                                                             
      <div class="contenu_onglet" id="contenu_onglet_groupe1">
                                                                                
         <div class="desc1">
                                                STEVE ROGERS<br><x>administratrice</x> <br><y><a target="blank" href="http://age-of-heroes.forumactif.org/u28">ava</a> Ҩ <a target="blank" href="http://age-of-heroes.forumactif.org/u11">harry</a> Ҩ <a target="blank" href="http://age-of-heroes.forumactif.org/u35">lewis</a></y>                               
         </div>
                                                                                
      </div>
                                                                               
      <div class="contenu_onglet" id="contenu_onglet_groupe2">
                                                                                
         <div class="desc1">
                                                TONY STARK<br><x>administratrice</x><br><y><a target="blank" href="http://age-of-heroes.forumactif.org/u19?tt=1">peter</a> Ҩ <a target="blank" href="http://age-of-heroes.forumactif.org/u29?tt=1">maxine</a></y>                                   
         </div>
                                                                                
      </div>
                                                                             
      <div class="contenu_onglet" id="contenu_onglet_groupe3">
                                                                                
         <div class="desc1">
                                                HAIKO ROSENBACH<br><x>administrateur</x>  <br><y><a target="blank" href="http://age-of-heroes.forumactif.org/u2">bruce</a> Ҩ <a target="blank" href="http://age-of-heroes.forumactif.org/u13">anna</a> Ҩ <a target="blank" href="http://age-of-heroes.forumactif.org/u10">pietro</a><br><a target="blank" href="http://age-of-heroes.forumactif.org/u15">eddie</a> Ҩ <a target="blank" href="http://age-of-heroes.forumactif.org/u17">jimmy</a> Ҩ <a target="blank" href="http://age-of-heroes.forumactif.org/u38">winter</a></y>                               
         </div>
                                                                                
      </div>
                                                                             
      <div class="contenu_onglet" id="contenu_onglet_groupe4">
                                                                                
         <div class="desc1">
                                                TAYLOR HANSEN-W.<br><x>administratrice</x><br><y><a href="http://age-of-heroes.forumactif.org/u6" target="blank">natasha</a> Ҩ <a href="http://age-of-heroes.forumactif.org/u7" target="blank">wanda</a><br><a href="http://age-of-heroes.forumactif.org/u12" target="blank">mary-jane</a> Ҩ <a href="http://age-of-heroes.forumactif.org/u14" target="blank">kitty</a> Ҩ <a href="http://age-of-heroes.forumactif.org/u16" target="blank">dylan</a><br><a href="http://age-of-heroes.forumactif.org/u32" target="blank">riley</a> Ҩ <a href="http://age-of-heroes.forumactif.org/u34" target="blank">sarah</a></y>                                   
         </div>
                                                                                
      </div>
                                                                                                 
      <div class="contenu_onglet" id="contenu_onglet_groupe5">
                                                                                
         <div class="desc1">
                                                ANEESH DOE<br><x>administratrice</x><br><y><a href="http://age-of-heroes.forumactif.org/u22" target="blank">victor</a> Ҩ <a href="http://age-of-heroes.forumactif.org/u23" target="blank">leopold</a><br><a href="http://age-of-heroes.forumactif.org/u33" target="blank">julian</a>  Ҩ <a href="http://age-of-heroes.forumactif.org/u39" target="blank">hannibal</a></y>                                 
         </div>
                                                                                
      </div>
                                                                                                   
      <div class="contenu_onglet" id="contenu_onglet_groupe6">
                                                                                
         <div class="desc1">
                                                WADE WILSON<br><x>administratrice</x><br><y><a href="http://age-of-heroes.forumactif.org/u4?tt=1" target="blank">loki</a> Ҩ <a href="http://age-of-heroes.forumactif.org/u20?tt=1" target="blank">danny</a> Ҩ <a href="http://age-of-heroes.forumactif.org/u25?tt=1" target="blank">anya</a><br><a href="http://age-of-heroes.forumactif.org/u24?tt=1" target="blank">andrew</a> Ҩ <a href="http://age-of-heroes.forumactif.org/u31?tt=1" target="blank">zachariah</a></y>                                   
         </div>
                                                                                
      </div>
                                                                                                   
      <div class="contenu_onglet" id="contenu_onglet_groupe7">
                                                                                
         <div class="desc1">
                                                PRUDENCE DELACROIX<br><x>administratrice</x><br><y></y>                                   
         </div>
                                                                                
      </div>
                                                                                                   
      <div class="contenu_onglet" id="contenu_onglet_groupe8">
                                                                                
         <div class="desc1">
                                                JAMES BARNES<br><x>administrateur</x><br><y><a href="http://age-of-heroes.forumactif.org/u5?tt=1" target="blank">clint</a> Ҩ <a href="http://age-of-heroes.forumactif.org/u30?tt=1" target="blank">adamska</a></y>                                   
         </div>
                                                                                
      </div>
                                                                             
   </div>
</div>
<table>
                                                                        
   <tbody>
                                                                           
      <tr>
                                                                              
         <td>
                                                <span class="onglet_0 onglet" id="onglet_groupe5" onmouseover="javascript:change_onglet('groupe5');"><a target="blank" href="http://age-of-heroes.forumactif.org/u27?tt=1"><img src="http://www.pellicolascaduta.it/img/people/Riz_Ahmed+1%20dic%201982+Londra,%20Gb+-+Gb.png" class="staff"></a></span>                                     
         </td>
                                                                                  
         <td>
                                                <span class="onglet_0 onglet" id="onglet_groupe6" onmouseover="javascript:change_onglet('groupe6');"><a target="blank" href="http://age-of-heroes.forumactif.org/u9?tt=1"><img src="http://www.cinemablend.com/timthumb.php?src=/images/news_img/67318/67318.jpg&amp;w=100&amp;h=100&amp;zc=1&amp;a=c&amp;q=100" class="staff"></a></span>                                     
         </td>
                                                                                  
         <td>
                                                <span class="onglet_0 onglet" id="onglet_groupe7" onmouseover="javascript:change_onglet('groupe7');"><a target="blank" href="http://age-of-heroes.forumactif.org/u21?tt=1"><img src="http://illiweb.com/fa/pbucket.gif" class="staff"></a></span>                                     
         </td>
                                                                                  
         <td>
                                                <span class="onglet_0 onglet" id="onglet_groupe8" onmouseover="change_onglet('groupe8');"><a target="blank" href="http://age-of-heroes.forumactif.org/u8?tt=1"><img src="https://40.media.tumblr.com/9e539f846af4bc3ab24bbd58e467bf25/tumblr_inline_nnw8m15FwH1ssj0ua_540.png" class="staff"></a></span>                                     
         </td>
                                                                              
      </tr>
                                                                           
   </tbody>
</table>
<table>
                                                                          
   <tbody>
                                                                             
      <tr>
                                                                                
      </tr>
                                            <script type="text/javascript">
//<!--
var anc_onglet = 'groupe1';
change_onglet(anc_onglet);
//-->
</script>
   </tbody>
</table></body></html>
FairyAiiro

FairyAiiro
Nouveau membre

Féminin
Messages : 10
Inscrit(e) le : 06/07/2013

http://glorigames.forumactif.org/
FairyAiiro a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème CSS adaptation à Chrome

Message par ukulola Lun 27 Juil 2015 - 23:29

Merci beaucoup pour la réponse rapide! J'y penserai pour la prochaine fois. Smile I love you
avatar

ukulola
Nouveau membre

Messages : 5
Inscrit(e) le : 20/07/2015

https://smokeandmirrors.forumactif.com/
ukulola a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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