Problème avec la PA

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

Résolu Problème avec la PA

Message par Charmed Eternity le Sam 20 Déc 2014 - 17:30

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 : PA installé le 20/12/2014
Lien du forum : http://charmed-eternity.forumactif.com/

Description du problème

bonjour à vous. Voilà mon forum: http://charmed-eternity.forumactif.com/

Mon problème vient du faire que la PA se déplace lorsque on passe la souris sur cette dernière attendez je vais vous montrer:

Sans Passage de la souris:
Spoiler:

Avec le passage de la souris:
Spoiler:

Voici mon CSS partit PA:
Spoiler:
/*********************************** 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 ma section dans généralité:
Spoiler:
<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="https://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="https://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="https://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" />

Comme je ne sais pas si mon problème vient des codes, voilà ls codes que j'ai pour vous. Si vous avez besoin de plus vous n'avez qu'à me demander. Merci beaucoup à celui qui voudra bien m'aider. Very Happy


Dernière édition par Charmed Eternity le Sam 20 Déc 2014 - 18:56, édité 1 fois

Charmed Eternity
**

Messages : 80
Inscrit(e) le : 29/11/2010

http://charmeds-eternity.forumactif.com/index.htm
Charmed Eternity a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec la PA

Message par [Nihil] le Sam 20 Déc 2014 - 18:43

Hello hello,

Pense à mettre ton code dans une balise code la prochaine fois, elles sont là pour ça ♥

Code:
[code]TON CODE ICI[/code]




Quelque part dans ton CSS tu as quelque chose comme ceci :
Code:
.contenu_paonglet:hover {
  display: none;
  width: 250px;
  background-color: #141517;
  border-left: 2px solid #2F3C3E;
  border-right: 2px solid #2F3C3E;
}

Tu peux enlever ces 2 lignes :
Code:
display: none;
width: 250px;

Est ce que c'est mieux comme ça Smile ?

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec la PA

Message par Charmed Eternity le Sam 20 Déc 2014 - 18:56

Ça marche, merci beaucoup Very Happy

Charmed Eternity
**

Messages : 80
Inscrit(e) le : 29/11/2010

http://charmeds-eternity.forumactif.com/index.htm
Charmed Eternity a été remercié(e) par l'auteur de ce sujet.

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


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