Problème avec le codage de la PA

[Charmed Eternity]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Installation de la PA le 20/12/2014
Lien du forum : http://charmed-eternity.forumactif.com/

Description du problème

Bonjour à vous, c'est encore moi!

Si je viens aujourd'hui c'est que sur notre PA il y a quelques choses qui nous agace. Lorsque nous sommes sur la première page de la PA et que nous passons notre souris sur l'image de '' Nos fidèles'', celles-ci font une rotation et nou préférions qu'elle fasse comme les autres sur la seconde page.

Voici mes codes celui de mon CSS (Partie PA) et Mon HTML:

CSS:

Code:

*********************************** PA ***********************************/

/*** PARTENAIRES ET TOPS ***/
.img_partenaires {
  opacity: 0.5;
}

.img_partenaires:hover {
  opacity: 1;
}



/*** IMAGES DU STAFF ***/

.imgPA {
  border-radius: 50%;
  width: 100px;
  height: 100px;
}

.info {
  position: relative;
  z-index: 24;
  text-decoration: none;
}
 
c.info:hover {
  z-index: 25;
}
 
c.info span {
  display: none;
}
 
c.info:hover span {
  display: block;
  position: absolute;
  top: -9.3em;
 left: -0.3em;
  border-radius: 50%;
  width: 105px;
  height: 105px;
  background-color: #0D0D0D;
  color: #F3F3F3;
  text-align: center;
  font-weight: none;
}



/*** IMAGES DES PREDEFINIS ***/
.imgwidget {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  -moz-transition-duration: 1s;
  -moz-transition-timing-function: linear;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: linear;
  transition-duration: 1s;
  transition-timing-function: linear;
}

.imgwidget:hover {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}

.info {
  position: relative;
  z-index: 24;
  text-decoration: none;
}

d.info:hover {
  z-index: 25;
}
 
d.info span {
  display: none;
}
 
d.info:hover span {
  display: block;
  position: absolute;
  top: -2em;
 left: -2em;
  width: 140px;
  height: 50px;
  overflow: auto;
  background-color: #0D0D0D;
  color: #F3F3F3;
  text-align: center;
  font-weight: none;
}



/*** EFFET DU CONTEXTE ***/

.contexte {
  width: 400px;
  height: 200px;
  overflow: hidden;
  background-color: #333333;
  border-radius: 25px;
  position: relative;
  top: -2.2em;
}
   
.contexte_img {
  position: relative;
  z-index: 2;
  width: 400px;
  height: 200px;
  margin-left: 0px;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  -transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}

.contexte:hover .contexte_img {
  margin-top: -200px;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
   
.contexte_description {
  position: relative;
  z-index: 1;
  width: 350px;
  height: 140px;
  color: #F3F3F3;
  padding: 25px;
  text-align: justify !important;
  font-size: 11px;
  overflow: auto;
}

.contexte_description a {
  text-decoration: none !important;
}



/*** SYSTEME D'ONGLETS ***/

.paonglet {
  display: inline-block;
  margin-left: 20px;
  margin-right: 20px;
  padding: 10px;
  cursor: pointer;
  background-color: #333333;
  color: #FCE7AE;
}
           
.paonglet_0 {
  border-radius: 25px;
}

.paonglet_1 {
  border-radius: 25px;
  color: #70A0BA;
}

.contenu_paonglet {
  padding: 25px;
  display: none;
  width: 780px;
  height: 450px;
  border-radius: 25px;
  background-color: #0D0D0D;
}

.contenu_paonglet a{
  text-decoration: none !important;
}



/*** BLOC DE TEXTE DE LA PA ***/

.bloc_pa {
  background-color: #333333;
  border-radius: 25px;
  color: #F3F3F3;
  padding: 25px;
  text-align: justify !important;
  position: relative;
  top: -2.2em;
}

.bloc_pa a {
  text-decoration: none !important;
  color: #70A0BA !important;
}

/*** TITRES DES BLOCS ***/

.titre_pa {
  font-family: 'Pacifico', 'cursive';
  font-size: 30px;
  position: relative;
  top: -0.3em;
  color: #F3F3F3;
  z-index: 1;
}

.titre_pa:hover {
  color: #70A0BA;
}

/*********************************** FIN PA ***********************************/

Et le HTML:

Code:

<div style="padding: 25px;">
     <script type="text/javascript">
            //<!--
                    function change_paonglet(name)
                    {
                            document.getElementById('paonglet_'+anc_paonglet).className = 'paonglet_0 paonglet';
                            document.getElementById('paonglet_'+name).className = 'paonglet_1 paonglet';
                            document.getElementById('contenu_paonglet_'+anc_paonglet).style.display = 'none';
                            document.getElementById('contenu_paonglet_'+name).style.display = 'block';
                            anc_paonglet = name;
                    }
            //-->
            </script>
   <div class="paonglets">
        <span class="paonglet_0 paonglet" id="paonglet_informations" onclick="javascript:change_paonglet('informations');">Informations</span> <span class="paonglet_0 paonglet" id="paonglet_contact" onclick="javascript:change_paonglet('contact');">Contact & Liens pratiques</span> <span class="paonglet_0 paonglet" id="paonglet_liens" onclick="javascript:change_paonglet('liens');">Liens externes</span>
   </div><br />
   <div class="contenu_paonglets">
       
      <div class="contenu_paonglet" id="contenu_paonglet_informations">
            
         <table>
               
            <tbody>
                  
               <tr>
                     
                  <td>
                        
                     <center>
                         
                        <div class="titre_pa">
                             Nouveautés 
                        </div>
                           
                     </center>
                      
                     <div class="bloc_pa" style="width: 250px; height: 380px;">
                           
                        <center>
                            
                           <div style="width: 240px; height: 220px; overflow: auto; text-align: justify;">
                                <span style="color: #70A0BA;">✂</span> Nouveauté : ceci est un texte complètement inutile, oui oui u.u Et si tu es maso, tu peux consulter la suite. <a href="#">www</a><br /><br /><span style="color: #70A0BA;">✂</span> Nouveauté : ceci est un texte complètement inutile, oui oui u.u Et si tu es maso, tu peux consulter la suite. <a href="#">www</a><br /><br /><span style="color: #70A0BA;">✂</span> Nouveauté : ceci est un texte complètement inutile, oui oui u.u Et si tu es maso, tu peux consulter la suite. <a href="#">www</a><br /><br /><span style="color: #70A0BA;">✂</span> Nouveauté : ceci est un texte complètement inutile, oui oui u.u Et si tu es maso, tu peux consulter la suite. <a href="#">www</a><br /><br /><span style="color: #70A0BA;">✂</span> Nouveauté : ceci est un texte complètement inutile, oui oui u.u Et si tu es maso, tu peux consulter la suite. <a href="#">www</a><br /><br />
                           </div><br /><iframe style="width: 240px;" src="//www.youtube.com/embed/C-W40iW2MRs" allowfullscreen="" frameborder="0"></iframe>
                        </center>
                           
                     </div>
                        
                  </td>
                     
                  <td style="width: 30px;">
                        
                  </td>
                     
                  <td>
                        
                     <center>
                         
                        <div class="titre_pa">
                             Contexte 
                        </div>
                           
                     </center>
                      
                     <div class="contexte">
                         
                        <div class="contexte_img">
                             <img src="http://i57.servimg.com/u/f57/18/47/68/10/2610.png" />
                        </div>
                         
                        <div class="contexte_description">
                             Nec minus feminae quoque calamitatum participes fuere similium. nam ex hoc quoque sexu peremptae sunt originis altae conplures, adulteriorum flagitiis obnoxiae vel stuprorum. inter quas notiores fuere Claritas et Flaviana, quarum altera cum duceretur ad mortem, indumento, quo vestita erat, abrepto, ne velemen quidem secreto membrorum sufficiens retinere permissa est. ideoque carnifex nefas admisisse convictus inmane, vivus exustus est. Altera templo insulam et insignis viribus claram viribus Salamis supremos et ipso committat armamentis tamque claram crebra ad indigens externi instructam ut abundat omnibusque onerariam continenti templo rerum a tanta municipia autem discretam insignis portuosam municipia continenti duae inter ut Cyprus omnium omnium Salamis a indigens urbes portuosam et claram tanta nullius ad rerum discretam fundamento Veneris claram rerum mari itidem Cyprus Cyprus Salamis urbes Paphus Cyprus continenti et Cyprus templo altera et municipia altera externi carbasos claram altera aedificet templo eadem Cyprus tamque itidem delubris a tamque et Paphus procul Paphus Paphus nullius Veneris armamentis adminiculi continenti tanta carbasos. Altera templo insulam et insignis viribus claram viribus Salamis supremos et ipso committat armamentis tamque claram crebra ad indigens externi instructam ut abundat omnibusque onerariam continenti templo rerum a tanta municipia autem discretam insignis portuosam municipia continenti duae inter ut Cyprus omnium omnium Salamis a indigens urbes portuosam et claram tanta nullius ad rerum discretam fundamento Veneris claram rerum mari itidem Cyprus Cyprus Salamis urbes Paphus Cyprus continenti et Cyprus templo altera et municipia altera externi carbasos claram altera aedificet templo eadem Cyprus tamque itidem delubris a tamque et Paphus procul Paphus Paphus nullius Veneris armamentis adminiculi continenti tanta carbasos. <a href="#">La suite</a>
                        </div>
                           
                     </div>
                      
                     <div style="clear: both;">
                           
                     </div><br />
                     <center>
                         
                        <div class="titre_pa">
                             Nos fidèles 
                        </div>
                        
                        <div class="bloc_pa" style="width: 350px; height: 100px;">
                              
                           <center>
                                 
                              <table>
                                    
                                 <tbody>
                                       
                                    <tr>
                                          
                                       <td>
                                            <d class="info"><img src="http://i57.servimg.com/u/f57/18/47/68/10/8910.png" class="imgwidget" /><span><e style="COLOR: #f0f0f0 !important; FONT-SIZE: 18px !important" class="titrePA1">Pseudo</e> <br />Blabla description par ici, youpi ! <a href="#">Lien</a></span></d>
                                       </td>
                                          
                                       <td style="width: 40px;">
                                             
                                       </td>
                                          
                                       <td>
                                            <d class="info"><img src="http://i57.servimg.com/u/f57/18/47/68/10/8910.png" class="imgwidget" /><span><e style="COLOR: #f0f0f0 !important; FONT-SIZE: 18px !important" class="titrePA1">Pseudo</e> <br />Blabla description par ici, youpi ! <a href="#">Lien</a></span></d>
                                       </td>
                                          
                                    </tr>
                                       
                                 </tbody>
                                    
                              </table>
                                 
                           </center>
                              
                        </div>
                           
                     </center>
                        
                  </td>
                     
               </tr>
                  
            </tbody>
               
         </table>
            
      </div>
       
      <div class="contenu_paonglet" id="contenu_paonglet_contact">
            
         <table>
               
            <tbody>
                  
               <tr>
                     
                  <td>
                        
                     <center>
                         
                        <div class="titre_pa">
                             Prédéfinis 
                        </div>
                           
                     </center>
                      
                     <div class="bloc_pa" style="width: 350px; height: 200px;">
                           
                        <center>
                             <c class="info"><img src="http://img11.hostingpics.net/pics/686120esaaaaa3.jpg" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important" class="titrePA1">Emma Swan</d> <br /><a href="#">Sa fiche</a></span></c> <c class="info"><img src="http://img11.hostingpics.net/pics/686120esaaaaa3.jpg" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important" class="titrePA1">Emma Swan</d> <br /><a href="#">Sa fiche</a></span></c> <c class="info"><img src="http://img11.hostingpics.net/pics/686120esaaaaa3.jpg" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important" class="titrePA1">Emma Swan</d> <br /><a href="#">Sa fiche</a></span></c><br /><c class="info"><img src="http://img11.hostingpics.net/pics/686120esaaaaa3.jpg" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important" class="titrePA1">Emma Swan</d> <br /><a href="#">Sa fiche</a></span></c> <c class="info"><img src="http://img11.hostingpics.net/pics/686120esaaaaa3.jpg" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important" class="titrePA1">Emma Swan</d> <br /><a href="#">Sa fiche</a></span></c> <c class="info"><img src="http://img11.hostingpics.net/pics/686120esaaaaa3.jpg" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important" class="titrePA1">Emma Swan</d> <br /><a href="#">Sa fiche</a></span></c>
                        </center>
                           
                     </div>
                        
                  </td>
                     
                  <td>
                        
                     <center>
                         
                        <div class="titre_pa">
                             Liens pratiques 
                        </div>
                           
                     </center>
                      
                     <div class="bloc_pa" style="width: 300px; height: 200px;">
                          <a href="#">Lien </a> <a href="#">Lien </a> <a href="#">Lien </a> <a href="#">Lien </a> <a href="#">Lien </a> <a href="#">Lien </a> <a href="#">Lien </a> <a href="#">Lien </a> <a href="#">Lien </a> <a href="#">Lien </a> <a href="#">Lien </a> <a href="#">Lien </a> <a href="#">Lien </a> <a href="#">Lien </a>
                     </div>
                        
                  </td>
                     
               </tr>
                  
            </tbody>
               
         </table>
            
         <center>
             
            <div class="titre_pa">
                 Staff 
            </div>
               
         </center>
          
         <div class="bloc_pa" style="width: 600px; padding: 9px !important;">
               
            <center>
                 <c class="info"><img src="http://img11.hostingpics.net/pics/686120esaaaaa3.jpg" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important" class="titrePA1">Emma Swan</d> <br /><a href="#">Sa fiche</a></span></c> <c class="info"><img src="http://img11.hostingpics.net/pics/686120esaaaaa3.jpg" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important" class="titrePA1">Emma Swan</d> <br /><a href="#">Sa fiche</a></span></c> <c class="info"><img src="http://img11.hostingpics.net/pics/686120esaaaaa3.jpg" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important" class="titrePA1">Emma Swan</d> <br /><a href="#">Sa fiche</a></span></c>
            </center>
               
         </div>
            
      </div>
       
      <div class="contenu_paonglet" id="contenu_paonglet_liens">
            
         <center>
             
            <div class="titre_pa">
                 Partenaires 
            </div>
               
         </center>
          
         <div class="bloc_pa" style="width: 500px; height: 150px;">
               
            <center>
                 <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a><br /><a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a><br /><a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a><br /><a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a>
            </center>
               
         </div><br />
         <center>
             
            <div class="titre_pa">
                 Tops-sites 
            </div>
               
         </center>
          
         <div class="bloc_pa" style="width: 500px; height: 80px;">
               
            <center>
                 <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a><br /><a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a> <a href="#"><img src="http://img15.hostingpics.net/pics/253520bouton2.jpg" class="img_partenaires" /></a>
            </center>
               
         </div>
           <a href="http://www.never-utopia.com" style="color: #FCE7AE !important; position: relative; float: right;"> Halloween</a>
      </div>
         
   </div>
     <script type="text/javascript">
            //<!--
                    var anc_paonglet = 'informations';
                    change_paonglet(anc_paonglet);
            //-->
            </script>
</div><link href="http://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css" />

J'espère que vous pourrez m'aider et merci beaucoup

[Charmed Eternity]

Coucou les amis, je me permet de faire un petut UP et Merci Beaucoup. Sans oublier bien sur, JOYEUX NOËL.

[Cyn]

Si vous voulez que vos images de "Nos fidèles" fassent comme celles de "Prédéfinis" et "Staff", il vous suffit d'appliquer le même CSS pour les 2.

Donc, dans le template, tout ce qui est

Code:

<d class="info"><img src="http://i57.servimg.com/u/f57/18/47/68/10/8910.png" class="imgwidget" /><span><e style="COLOR: #f0f0f0 !important; FONT-SIZE: 18px !important" class="titrePA1">Pseudo</e> <br />Blabla description par ici, youpi ! <a href="#">Lien</a></span></d>

Vous le remplacez par

Code:

<d class="info"><img src="http://i57.servimg.com/u/f57/18/47/68/10/8910.png" class="imgPA" /><span><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important" class="titrePA1">Pseudo</d> <br />Blabla description par ici, youpi ! <a href="#">Lien</a></span></d>

Et ça devrait normalement fonctionner.

En même temps (et à moins que "imgwidget" ne soit utilisé ailleurs sur votre forum), vous pourrez supprimez dans le CSS ceci :

Code:

.imgwidget {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  -moz-transition-duration: 1s;
  -moz-transition-timing-function: linear;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: linear;
  transition-duration: 1s;
  transition-timing-function: linear;
}
 
.imgwidget:hover {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}

Par ailleurs, dans votre HTML, vous utilisez le code suivant :

Code:

<d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important" class="titrePA1">

Cependant, vous n'utilisez aucune des propriétés de la classe "titrePA1". Je pense donc que vous pourriez l'enlever sans problème ou retirer tout le reste et mettre une nouvelle classe à la place (avec les propriétés de style que vous avez définies juste avant).

Et vous avez ceci :

Code:

.info {
  position: relative;
  z-index: 24;
  text-decoration: none;
}

en double dans votre CSS. Vous pouvez supprimer l'un des deux.

Voilà. Dites nous si ça fonctionne. =) Et JOYEUX NOËL également !

P.S. L'adresse de votre forum, dans votre profil ici, n'est pas la bonne. Vous avez mis un "S" à "charmed".

[Chacha]

..

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 9 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 à faire un UP régulièrement ! Ce sujet est corbeillé (rappel de pourquoi), merci d'ouvrir un nouveau sujet si nécessaire, en respectant les Règles générales du forum. A bientôt sur ForumActif

[Chacha]

..	Bonjour, Le topic est replacé à la demande de l'auteur du sujet. A bientôt sur ForumActif

[Charmed Eternity]

Merci beaucoup Chacha et désolé de l'attente avant ma réponse. Étant donné que nous sommes dans le temps des fêtes je n'avais pas eu la chance de poster. J'essaierai d'installer le tout aujourd'hui ou demain et je vous tiens au courant. En tout cas, merci beaucoup.

[Charmed Eternity]

Ça fonctionne merci