Sujets similaires

Dernière édition par Zadig le Mar 13 Nov 2012, 16:39, édité 2 fois

Bonjour/Bonsoir !

Alors, je viens à vous pour quelques problèmes de codes sous Firefox (et ailleurs en fait, mais je signale au passage le navigateur). Il est à noter que les codes suivants fonctionnent plus ou moins bien mais que quelques détails s'avèrent légèrement... gênants.
Le tout est à voir en action ici

Bref, code n°1; Un menu glissant (ou peu importe son nom). La case "staff" de la PA.
Le CSS

Code:: /*Boîte STAFF Wilou*/
#persos img{
z-index:100;
/* set the transition */
opacity: 0.45;
transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
box-shadow: #28252e 0 0 2px;
border-radius:5px;
}

#persos img:hover{
color:transparent;
box-shadow: #28252e 0 0 5px;
cursor: pointer;
opacity: 1;
transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}

#persos ul:before{content:"";
position:absolute;
z-index:100;
height:345px;
width:180px;
border-radius:10px;
-moz-box-shadow: -2px 0px 2px rgba(0,0,0,0.8);}

#persos ul{position:absolute;
list-style:none;
width:134px;
height:345px
padding:40px 0px;
margin-left:-15px;
margin-top:-150px;
}

#persos ul li{height:35px;
width:170px;}

#persos img{margin-left:-10px;}

#persos ul li a.menuLien{position:absolute;
z-index:110;
padding-left:15px;
display:block;
width:160px;
height:40px;
letter-spacing:-1px;
text-align:center;
}

/*la boite qui slide*/
#persos ul li div{
width:250px;
height:353px;
padding:10px;
margin-top:-30px;
padding-top:0px;
margin-left:-2px;
position:absolute;
left:0px;
top:0px;
z-index:50;
opacity:0;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
background-image:url(http://img15.hostingpics.net/pics/425063Sanstitre1.png);
background-repeat: no-repeat;
}

#persos ul li:hover div{left:220px;
opacity:1;
width:230px;
border-radius:0px 10px 10px 0px;}

#persos ul li div p{
width:200px;
overflow:auto;
font-size:0.8em;
font-weight:normal;
text-align:center;
}

#persos ul li a{color: #B89CB0;
-webkit-transition: color 1s ease-in; /*safari and chrome */
-o-transition: color 1s ease-in; /* opera */
-moz-transition: color 1s ease-in; /* mozilla */
border-bottom:none !important;
text-shadow:0px 0px 1px;
border:none;
text-align:center;
font-family:georgia;
font-size:11px;}

#persos ul li a:hover{color:#91A7B5;
text-shadow:0px 0px 1px;
border:none;
text-align:center;
font-family:georgia;}

#persos ul li div a{color:#B89CB0;
text-shadow:0px 0px 1px;
border:none;
text-align:center;
font-family:georgia;}

#persos ul li div a:hover{color:#91A7B5;
text-shadow:0px 0px 1px;
border:none;
text-align:center;
font-family:georgia;}

#persos ul li div titre{color:#5C708A;
text-shadow:0px 0px 1px;
font-size: 25px;
text-align: center;
font-family:Garamond;
margin:5px;
}

.pseudo{color:#6a7985;
text-shadow:0px 0px 5px;
font-size: 25px;
text-align: center;
font-family:Garamond;
margin-top:10px;
line-height:10px;
letter-spacing:-1px;
}

.infos{color:#8d9196;
text-shadow:0px 0px 5px;
font-size: 17px;
text-align: center;
font-family:Garamond;
padding-top:-5px;
margin-bottom:5px;
}

#persos ul li div p.infosdc{color:#545454;
text-shadow:0px 0px 5px;
font-size: 10px;
text-align: center;
padding:5px;
height: 80px;
width:200px;
background-color: #DDDDCC;
box-shadow: 0px 0px 10px #adadad, 0px 0px 10px #adadad inset;
background: linear-gradient(center bottom, #d6dfe2 11%, #bbaa99 56%);
border-radius:5px;}

.staff {height: 100px;
border-radius: 15 px;
width:200px;
}
a{text-decoration:none !important;}

HTML

Code:: <section id="persos" style="margin-left:-40px;">
<ul title="STAFF">
<li><a class="menuLien" href=""><img src="http://i46.tinypic.com/fz0mwy.png" alt="alternative en texte" title="Susi"></a>

<div>
<center><span class="pseudo"><br>Susi Diamentino</span><br><span class="infos">Alias Tekila</span>

<img src="http://i50.tinypic.com/10hkksm.png" alt="Susi aka Tekila" title="" class="staff">

<br><span class="pseudo">FONDATRICE</span>

<br><a href="http://www.nameless-rpg.com/u19" target="_blank">profil</a> . <a href="http://www.nameless-rpg.com/privmsg?mode=post&u=19" target="_blank">MP</a>

<p class="infosdc"><titre>ALTEREGOS</titre><br>
Luis A. Martin ; Arizona R. Taylor & Lovleen M. Williamson </p></center>

</div>
</li>

<li><a class="menuLien" href=""><img src="http://i46.tinypic.com/wk067t.png" alt="alternative en texte"></a><div>
<center><span class="pseudo"><br>Archibald L. Wilson</span><br><span class="infos">Alias Little Suzy</span>

<img src="http://i48.tinypic.com/1h2dkn.png" alt="Archi aka Elow" title="" class="staff">

<br><span class="pseudo">ADMINISTRATRICE</span>

<br><a href="http://www.nameless-rpg.com/u127" target="_blank">profil</a> . <a href="http://www.nameless-rpg.com/privmsg?mode=post&u=127" target="_blank">MP</a>

<p class="infosdc"><titre>ALTEREGOS</titre><br>
Declan R. Swightberry ; Wilhemina V. Stamford ; Ariel P. Greffins ; Iordan I. Nevdokiev ; Nathaniel U. Cavanaugh ; Adrian Chrysler ; Jay Baskarah ; A. Jonas Receswind & Arsène J. Vonderberg </p></center>
</div></li>

<li><a class="menuLien" href=""><img src="http://i47.tinypic.com/2mo3ts7.png" alt="alternative en texte"></a><div>

<center><span class="pseudo"><br>Eden C. Heylel</span><br><span class="infos">Alias Amly</span>

<img src="http://i50.tinypic.com/5oy4ci.png" alt="Eden aka Amly" title="" class="staff">

<br><span class="pseudo">ADMINISTRATRICE</span>

<br><a href="http://www.nameless-rpg.com/u64" target="_blank">profil</a> . <a href="http://www.nameless-rpg.com/privmsg?mode=post&u=64" target="_blank">MP</a>

<p class="infosdc"><titre>ALTEREGOS</titre><br>
Prudence S. DeLavoie; Neva I. Leonidova ; Zephir Hullington ; Fedor A. Lvivnyr ; Nirvana M. Di Stefano ; Indiana A. Stark ; Sienna B. O'Greenel & Wyatt B. Pritchards</p></center>

</div></li>

<li><a class="menuLien" href=""><img src="http://i45.tinypic.com/x0wbjc.png" alt="alternative en texte"></a>
<div>

<center><span class="pseudo"><br>Gwendolyn A. Hughes</span><br><span class="infos">Alias Lux Aeterna</span>

<img src="http://i47.tinypic.com/2wohim9.png" alt="Gwen aka Lux" title="" class="staff">

<br><span class="pseudo">ADMINISTRATRICE</span>

<br><a href="http://www.nameless-rpg.com/u54" target="_blank">profil</a> . <a href="http://www.nameless-rpg.com/privmsg?mode=post&u=54" target="_blank">MP</a>

<p class="infosdc"><titre>ALTEREGOS</titre><br>
Savannah Dawkins ; Nephtys E. Castel & Sara Constantini</p></center>

</div></li>

<li><a class="menuLien" href=""><img src="http://i48.tinypic.com/2hqc8zp.png " alt="alternative en texte"></a><div>

<center><span class="pseudo"><br>Marwin Baskerville</span><br><span class="infos">Alias Bluefeathers</span>

<img src="http://i46.tinypic.com/2ihwk7l.png" alt="Marwin aka Bluefeathers" title="" class="staff">

<br><span class="pseudo">MODERATRICE</span>

<br><a href="http://www.nameless-rpg.com/u365" target="_blank">profil</a> . <a href="http://www.nameless-rpg.com/privmsg?mode=post&u=365" target="_blank">MP</a>

<p class="infosdc"><titre>ALTEREGOS</titre><br>
Arrogance S. O'Ryan ; Eterna G. Baskerville ; Oz K. Kether ; Joyce H. Fetherston ; Alejandro E. Bottero ; Jessalyn R. Stamford ; Aramis de la Roche-Guyon ; Louka S. Annenkova & C.-H. B. O'Connor</p></center>

</div></li>

<li><a class="menuLien" href=""><img src="http://i47.tinypic.com/o9mzaf.png" alt="alternative en texte"></a><div>

<center><span class="pseudo"><br>Istvan A. Bernhardt</span><br><span class="infos">Alias Zadig</span>

<img src="http://i50.tinypic.com/2nk27nd.png" alt="Istvan aka Zadig" title="" class="staff">

<br><span class="pseudo">MODERATRICE</span>

<br><a href="http://www.nameless-rpg.com/u82" target="_blank">profil</a> . <a href="http://www.nameless-rpg.com/privmsg?mode=post&u=82" target="_blank">MP</a>

<p class="infosdc"><titre>ALTEREGOS</titre><br>
Andrea N. Braxton ; Lust S. Dashwood ; Oksana A. Dostoïevski & Marie-C De Buffeyrettes </p></center>

</div></li>

<li><a class="menuLien" href=""><img src="http://i45.tinypic.com/2nbg7jt.png" title="Keona" alt="alternative en texte"></a>
<div>
<center><span class="pseudo"><br>Keona-Loe Hanamoa</span><br><span class="infos">Alias Wilou</span>

<img src="http://i49.tinypic.com/2rfsnm9.png" alt="Keona aka Wilou" title="" class="staff">

<br><span class="pseudo">MODERATRICE</span>

<br><a href="http://www.nameless-rpg.com/u405" target="_blank">profil</a> . <a href="http://www.nameless-rpg.com/privmsg?mode=post&u=405" target="_blank">MP</a>

<p class="infosdc"><titre>ALTEREGOS</titre><br>
Natalia C.Jacobs ; Billie Romanès-Bouglionne ; Meleager P. Baskerville & Kirsten J. Preston </p></center>

</div></li>
<li><center><a class="menuLien" href="http://www.nameless-rpg.com/t1705-le-staff-pour-vous-servir" style="margin-top:-5px; height:10px;" target="_blank">Voir tout le staff</a> </center></li>
</div></ul>
</section>

Le problème de ce code étant que selon la vitesse de la souris pour aller vers les liens ou l'endroit où elle est placée, c'est la dernière vignette (Keona) qui s'affiche à la place de celle choisie.
Bref, ça me laisse à penser que le code n'est pas fermé ou que quelque chose cloche mais j'ai beau cherché, impossible de trouver.

Le second code concerne notre fiche de PVs visible ici
CSS

Code:: /* PV's */

.vacbody {
border-radius: 45px 0px;
background-image:url('http://i.imgur.com/LXtYa.png');
opacity: 0.89;
width:500px;
height:850px;
padding-bottom:35px;
margin-top:20px;
box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
margin-top:-140px;}

/* ribbon style */

.ribbon-wrapper {
position: relative;
}
.ribbon-front {
background-color: #8ea4b0; height: 20px;
width: 520px;
position: relative;
left:-9px;
top:-20px;
z-index: 2;
border:dashed 1px #4f6471;
}

.ribbon-front,
.ribbon-back-left,
.ribbon-back-right
{
box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
}

.ribbon-edge-topleft,
.ribbon-edge-topright,
.ribbon-edge-bottomleft,
.ribbon-edge-bottomright {
position: absolute;
z-index: 1;
border-style:solid;
height:0px;
width:0px;
}

.ribbon-edge-bottomleft,
.ribbon-edge-bottomright {
top: 10px;
}

.ribbon-edge-topleft,
.ribbon-edge-bottomleft {
left: -9.5px;
border-color: transparent #6a8696 transparent transparent;
}

.ribbon-edge-topleft {
top: -25px;
border-width: 5px 10px 0 0;
}
.ribbon-edge-bottomleft {
border-width: 0 10px 0px 0;
}

.ribbon-edge-topright,
.ribbon-edge-bottomright {
top: 3px;
left: 500px;
border-color: transparent transparent transparent #6a8696;
}

.ribbon-edge-topright {
border-width: 0px 0px 0px 10px;
}
.ribbon-edge-bottomright {
border-width: 0px 0px 5px 10px;
}

.ribbon-back-left {
position: absolute;
top: -25px;
left: -50px;
width: 50px;
height: 20px;
background-color: #8ea4b0; z-index: 0;
border:dashed 1px #4f6471;
}

.ribbon-back-right {
position: absolute;
top: -15px;
right: -50px;
width: 50px;
height: 20px;
background-color: #8ea4b0; z-index: 0;
border:dashed 1px #4f6471;
}

.vacdispo {-webkit-transform: rotate(20deg); /* Safari 3.1+, Chrome */
-moz-transform: rotate(20deg); /* Firefox 3.5-15 */
-ms-transform: rotate(20deg); /* IE9+ */
-o-transform: rotate(20deg); /* Opera 10.5-12.00 */
transform: rotate(20deg);
position:relative;
z-index:100;
top:-65px;
right:-230px;
background-image:url('http://i.imgur.com/fdbtE.png');
width:125px;
height:125px;
line-height: 0.5;
}

.vactextedispo {-webkit-transform: rotate(-45deg); /* Safari 3.1+, Chrome */
-moz-transform: rotate(-45deg); /* Firefox 3.5-15 */
-ms-transform: rotate(-45deg); /* IE9+ */
-o-transform: rotate(-45deg); /* Opera 10.5-12.00 */
transform: rotate(-45deg);
text-align:center;
font-family:Droid Serif;
font-size:14px;
color:#32444e;
padding-top:40px;
position:relative;
top:40px;
}

.vactitre {font-family: Droid Serif;
font-size: 24px;
color: #32444e;
text-shadow: 2px 2px 2px #dcdcdc;
position:relative;
top:-90px;
z-index:100;}

.vacbandeau {font-family: Droid Serif;
color:#32444e;
font-size:12px;}

.vacname {margin-bottom:-45px;
position:relative;
z-index:100;
right:70px;
top:-165px;
color:#688696;
font-family: homemade apple;
font-size: 30px;
text-shadow: 0px 0px 0px #200a16; opacity: 0.8;}

.vachistoire {text-align: justify;
width: 450px;
font-size: 13px;
font-family: Times New Roman;
height: 175px;
overflow: auto;
padding: 10px;
background: -moz-radial-gradient(center, #d0d1cd, #c0c1bd, #d0d1cd);
border-radius: 15px;
border: 2px solid #577789;
box-shadow: 0 0 20px #f5f5f5 inset, 0 0 20px #f5f5f5;
line-height: 0.8;
position:relative;
top:-108px;
}

.vacminititre {text-transform:uppercase;
text-align:center;
padding-top:8px;
padding-bottom:-12px;
font-family: 'Arbutus Slab', serif;
font-size:16px;
text-shadow: 0px 0px 0px #200a16; opacity: 0.8;
line-height:0.5;}

.vactitres{font-family: "times new roman",times,serif;
color: #c7a99f;
font-size:11px;
font-weight:bold;
color: #32444e}

#article12{height:50px;
font-size:0.5em;}

#article12 .menu_div{position:relative;
width:400px;
}

#article12 .menu_ul{
border-radius: 0px 0px 200px 200px;
font-color:#32444e;
margin-left:-20px;}

#article12 .menu_div ul{width:100%;
height:30px;
position:relative;
top:-167px;
background:-moz-linear-gradient(top,#c0c1bd,#d0d1cd);
box-shadow:0px 1px 2px black;}

#article12 .menu_div ul li ul{display:none;}

#article12 .menu_div ul li{display:block;
float:left;
position:relative;
list-style:none;
height:30px;}

#article12 .menu_div ul li a{display:block;
height:23px;
padding:7px 20px 0px 20px;
text-decoration:none;
color:#32444e;
font-family: Droid Serif;
font-size:12px;}

#article12 .menu_div ul li:hover a{
text-transform:uppercase;
height:23px;
}

#article12 .menu_div ul li:hover ul{display:block;
position:absolute;
z-index:100;
top:30px;
left:30px;
margin-left:-22px;
box-shadow:0px 0px 2px black;}

#article12 .menu_div ul li ul:before
{content:"";
position:relative;
top:-28px;
left:-75px;
width:0px;
height:0px;
border-bottom:10px solid #99aeb9;
border-left:10px solid transparent;
border-right:10px solid transparent;}

#article12 .menu_div ul li ul{width:auto;
height:auto;
border-radius:5px;
padding:5px 0;
text-align:center;}

#article12 .menu_div ul li ul li{float:left;
height:150px;
width:220px;
overflow:auto;
text-align:justify;
padding:5px;
font-size: 13px;
font-family: Times New Roman;
line-height:1.1;
}

#article12 .menu_div ul li:hover ul li a{
border-radius:0px;
background:none;
font-size:0.9em;
height:15px;
padding:2px 20px 2px 10px;
border:none;}

#article12 .menu_div ul li ul li a:hover{background:rgba(255,255,255,0.2);}

#article12 .menu_div ul li ul{background:#0c9;background:-moz-linear-gradient(top,#99aeb9 40%,#cbccc9);}

/* IMAGE (icône) */
.Xplo2 img{
width: 50px;
height: 50px;
-moz-transition: all 1.5s ease; /* pour navigateur mozilla */
transition: all 1.5s ease; /* pour les navigateurs récents */
border-radius:100px;
position:relative;
top:-190px;
margin-left:-15px;
}
/* IMAGE (icône) AU SURVOL */
.Xplo2:hover img {
width: 100px;
height: 100px;
border-radius:100px;
}

/* BLOC CONTENANT L'INFOBULLE - L’ICÔNE */
.transition-NU{
position: relative;
width: 50px;
float: left;
margin: 10px;
padding: 0;
}
/* INFOBULLE */
.NU_transition{
text-align: justify;
font-size: 13px;
font-family: Times New Roman;
background: #d0d1cd;
border: 0px solid #1c1706;
width: 0;
height: 0;
overflow: hidden;
position: absolute;
left:45px;
top: -200px;
padding: 0;
border-radius: 10px;
-moz-transition: width 0.8s ease-in 0.2s, height 0.8s ease-in 0.2s, padding 0.8s ease-in 0.2s; /* pour navigateur mozilla */
transition: width 0.8s ease-in 0.2s, height 0.8s ease-in 0.2s, padding 0.8s ease-in 0.2s; /* pour les navigateurs récents */
}
/* INFOBULLE AU SURVOL */
.transition-NU:hover .NU_transition{
height: 110px;
width: 300px;
padding: 5px;
padding-left:65px;
border-width: 1px;
opacity:0.7;
overflow:auto;
margin-left: -20px;
line-height:0.8;
}
/* IMAGE (icône) */
.transition-NU img {
position: relative;
z-index: 990;
left: 0;
bottom: 0;
-moz-transition: all 1s linear 0s; /* pour navigateur mozilla */
transition: all 1s linear 0s; /* pour les navigateurs récents */
}

.vactableau {text-align:left;
width:450px;}

/* fin PV's */

HTML

Code:: <link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Petit+Formal+Script' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Homemade+Apple' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Arbutus+Slab' rel='stylesheet' type='text/css'>
<center>
<div class="vacdispo"> <span class="vactextedispo">Free<br>
ft.<br>
Maggie Q<br>
(négociable) </span></div>
<div class="vacname">Blabla tralala</div>
<div class="vacbody"><img src="http://25.media.tumblr.com/tumblr_ma7583hQQ81qmmhtbo17_r1_500.gif" style="width: 500px; border-radius:45px 0px 0px 0px;"></img>

<div class="ribbon-wrapper"><div class="ribbon-front"><span class=vacbandeau>Infos - infos</span></div><div class="ribbon-edge-topleft"></div><div class="ribbon-edge-topright"></div><div class="ribbon-edge-bottomleft"></div><div class="ribbon-edge-bottomright"></div><div class="ribbon-back-left"></div><div class="ribbon-back-right"></div>

</div>

<div class="vactitre">“Une biographie pour les nuls”</div>
<div class="vachistoire">
<div class="vacminititre">— Histoire —</div>
///

<div class="vacminititre"><br>— Evolution nuit des loups —</div>
/////
</div>

<section id="article12" class="crayon article-css-12 demoTime">
<div class="menu_div"><ul class="menu_ul"><li><a href="">ID Card</a><ul><li><span class="vactitres">Date de naissance:</span>écrire ici
<span class="vactitres">Lieu de naissance:</span> écrire ici
<span class="vactitres">Surnom:</span> écrire ici
<span class="vactitres">Rang social:</span> écrire ici
<span class="vactitres">Situation des parents:</span> écrire ici
<span class="vactitres">Rôle/Profession/Future profession:</span> écrire ici
<span class="vactitres">Ecole/Ancienne école:</span>écrire ici </li></ul></li><li><a href="">Caractère</a><ul><li>adjectifs
<center>—</center>
écrire ici</li></ul></li><li><a href="">Informations Générales</a><ul><li><span class="vactitres">Patronus:</span>écrire ici
<span class="vactitres">Epouvantard:</span>écrire ici
<span class="vactitres">Baguette magique:</span>écrire ici
<span class="vactitres">Particularité/Don:</span>écrire ici
<span class="vactitres">Trivia:</span>écrire ici
<span class="vactitres">Pays visités:</span>écrire ici</li></ul></li></ul></div>
</section>

<table><tr><td class="vactableau"><div class="transition-NU"> <span class="Xplo2"><img src="http://fc09.deviantart.net/fs71/f/2010/153/9/1/Harry_Shum_Jr_Icon_by_bradders1425.jpg" alt="" /></span> <div class="NU_transition"><div class="vacminititre">Keona-Loe Hanamoa - Taken</div>
<span>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? </span> </div></div></td></tr><tr><td class="vactableau"><div class="transition-NU"> <span class="Xplo2"><img src="http://fc09.deviantart.net/fs71/f/2010/153/9/1/Harry_Shum_Jr_Icon_by_bradders1425.jpg" alt="" /></span> <div class="NU_transition"> <div class="vacminititre">Keona-Loe Hanamoa - Taken</div>
<span>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? </span></div> </div></td></tr><tr><td class="vactableau"><div class="transition-NU"> <span class="Xplo2"><img src="http://fc09.deviantart.net/fs71/f/2010/153/9/1/Harry_Shum_Jr_Icon_by_bradders1425.jpg" alt="" /></span> <div class="NU_transition"><div class="vacminititre">Keona-Loe Hanamoa -Taken</div>
<span>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</span> </div> </div></td></tr><tr><td class="vactableau"><div class="transition-NU"> <span class="Xplo2"><img src="http://fc09.deviantart.net/fs71/f/2010/153/9/1/Harry_Shum_Jr_Icon_by_bradders1425.jpg" alt="" /></span> <div class="NU_transition"><div class="vacminititre">Keona-Loe Hanamoa - Taken</div>
<span>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</span> </div> </div></td></tr></table></center>

Ici le code empiète sur le bas du formu et même après (mais je suppose que c'est ainsi que le code est construit), ce qui fait que nous avons dû placer plusieurs <*br*/> pour tricher un peu et éviter qu'un message n'empiète sur l'autre et empêche toute édition.
Et deuxièmement, quand on place la souris sous la dernière icone, c'est la deuxième infobulle qui s'ouvre xD
Donc même chose, oublie quelque part ou le code est-il juste conçu ainsi ?

Voilà voilà ! Merci d'avance <33

Sujet: Re: [Résolu] Menu et autres codes à problème Mar 13 Nov 2012, 09:15

Bonjour Zadig !

Bon je n'ai pas beaucoup de temps mais en passant j'ai trouvé une erreur (fatale) dans ton premier CSS, il manque un ; à la ligne 35 :

Code:: ...
32 #persos ul{position:absolute;
33 list-style:none;
34 width:134px;
35 height:345px
36 padding:40px 0px;
37 margin-left:-15px;
38 margin-top:-150px;
39 }
...

Sinon il y aurait quelques optimisations à y apporter mais rien qui n'impacte vraiment le résultat (en tout cas rien qui n'ait de lien avec ton problème).

Pour le second CSS, pas d'erreur mais des optimisations également... Enfin pas le temps d'analyser plus longuement ton problème, mais corrige déjà ton premier CSS défois que ça jouerais dans la balance Wink

Bonne journée (à plus tard si un autre codeur ne passe pas auparavant prendre la relève) !

Sujet: Re: [Résolu] Menu et autres codes à problème Mar 13 Nov 2012, 09:52

Bonjour !
Merci de t'être penché sur le problème malgré le temps limité =)
En effet, j'avais loupé ça ! J'ai corrigé, ça n'impacte pas vraiment sur le problème concerné mais c'est déjà plus propre. Je continue à chercher de mon côté en attendant, merci Very Happy

Sujet: Re: [Résolu] Menu et autres codes à problème Mar 13 Nov 2012, 10:48

Hello

Je ne fais également que passer (ninja mode au boulot) mais je tiens à signaler que tu utilises du HTML5 alors que les forums de ForumActif sont en xHTML (ce qui est très différent et peut causer quelques problèmes). D'ailleurs, la balise HTML5 <section> ne doit PAS être utilisée comme une sorte de nouveau div XD

Sujet: Re: [Résolu] Menu et autres codes à problème Mar 13 Nov 2012, 13:11

Ninja o/
Haha oui, je ne savais pas/plus/bref pour le xHTML de ForumActif. Néanmoins, pour ce qui est de la balise

, il ne s'agit pas du tout d'une div et si elle a gardé une class c'est uniquement parce qu'on ne l'a pas virée mais elle ne sert strictement à rien, sinon de repère *pan*
Cela dit, si ça peut causer un conflit ou un souci, et si le HTML 5 est la source de ces quelques problèmes, je me pencherai dessus. Jusque là nous n'avons eu aucun souci réel si ce n'est ce genre de détails.
Merci à vous Very Happy

EDIT; J'ai remercié un message, c'était pas franchement intentionnel, pardon xD

Sujet: Re: [Résolu] Menu et autres codes à problème Mar 13 Nov 2012, 14:08

Ben dans le contexte là la balise <section> est tout sauf pertinente en fait. Et les balises HTML ont un sens, on ne les pose pas au hasard juste pour décorer u_u'

Bref.

Pour ton problème, ton code est malheureusement extrêmement difficile à lire, pourrais-tu nous faciliter la tâche en le nettoyant de manière à respecter les quelques conventions d'écriture du HTML ?
- Indenter le code pour représenter les encapsulations (qu'est-ce qui est dans quoi)
- Retirer toute trace de CSS du code HTML (on privilégie les classes maintenant)
- Retirer les balises obsolètes (font, center...) au profit des propriétés CSS judicieusement placées.

Pour le reste, je vois grosso modo où est le problème, mais je serais bien en mal de t'expliquer, et encore moins comment le corriger sans refaire l'intégralité du code.

Pour l'explication technique, comme les div contenant les pseudo-infobulles sont en opacity 0, ça veut dire qu'ils sont toujours là même s'ils sont invisibles. De plus, ils sont inclus dans les éléments de liste, or "au survol d'un élément de liste, on fait apparaitre son infobulle associée". De ce fait, quand on survole "une zone vide" autour du menu, en fait on survole la dernière infobulle (celle associée au dernier élément de liste, si tu considères qu'on les a mises les unes par dessus les autres dans l'ordre d'apparition), et ça sous entend qu'on survole le dernier élément de liste.

Et du coup, elle essaie d'apparaitre, mais comme le div se déplace, le survol s'arrête aussitôt et l'infobulle repart en arrière/redisparait, et du coup elle est de nouveau survolée, donc elle repart, etc, etc, etc.

Comment le résoudre ? Je ne sais pas x) Je ne suis même pas sure de ce que j'avance vu que mes tâtonnements ne cessent de se contredire. Je pense juste que ça doit être une raison de ce genre là.

Pour ton autre code, on aurait besoin d'une démonstration, je ne vois pas ce que tu veux dire par "empiète sur le bas du formu" (même en supposant que tu voulais dire forum)

Dernière édition par Zadig le Mar 13 Nov 2012, 16:30, édité 1 fois

Hum pour ce qui est du code < section > certes il ne s'agit pas d'une déco ni d'un hasard total, si ce n'est qu'on l'a effectivement laissé sans class à laquelle se référer dans le doute qu'elle soit utile (vu que la code n'a effectivement pas été fait à la base pour FA)
Bref, je me pencherais sur la question et je nettoierai le code.
Je comprends ce que tu veux dire, ce n'est pas terriblement gênant et le ciel ne nous tombera pas sur la tête, maintenant que je connais et comprends plus ou moins ce qui ne va pas (ou quelque chose du style), je vais essayer de fouiller de mon côté pour régler le souci.

Pour ce qui est du second code, je viens d'ajouter un lien en-dessous de la fiche et tu constateras qu'en essayant dessus au niveau du Youtube c'est impossible et comme si ça ne suffisait pas, ça ouvre également une infobulle au passage xD
Mais je suppose que le problème n'en est peut-être pas vraiment un vu les effets du codes et ce que j'ai cru comprendre (surtout arrête-moi si je fais genre j'ai tout compris et je suis intelligente alors qu'en fait, pas du tout xD)
Bref², déjà merci pour la première partie =D

Sujet: Re: [Résolu] Menu et autres codes à problème Mar 13 Nov 2012, 15:54

Ah, oui, j'ai compris où était le souci. Je vais dire un truc pas du tout gentil pour le coup, mais c'est codé avec les pieds. Et là encore, pour pouvoir corriger le problème, il y aurait pas mal à faire u_u' (un peu comme rajouter moult poutres à une maison à moitié écroulée dans l'espoir de l'empêcher de s'effondrer totalement)

Je problème vient essentiellement que quiconque a fait la fiche a voulu "compenser" les sauts de ligne automatique dans un message en forçant les blocs à remonter grâce à un positionnement relatif à la truelle (pour rester dans la métaphore de la maçonnerie XD). Le problème du positionnement relatif, c'est qu'il décale un bloc de sa position initiale, mais que cette position initiale en question est toujours occupée. Du coup, quoi qu'on fasse, les blocs suivants sont toujours contraints d'être placés après cette position "fantôme", et il faut les remonter également.

Pour corriger le souci, il va falloir complètement revoir le CSS. Côté HTML, la solution est plutôt simple : dans un message, les sauts de lignes sont pris en compte. La première méthode serait donc de supprimer tous les sauts de ligne "inutiles" (pour ne garder que ceux inhérents au texte proprement dit), mais ça rendra le code illisible. La seconde méthode consiste à utiliser les commentaires HTML pour "cacher" ces sauts de ligne.

Prenons l'exemple d'une table en HTML par exemple :

Code:: <table>
<tr>
<td>Contenu d'une cellule</td>
<td>Contenu d'une cellule</td>
<td>Contenu d'une cellule</td>
<td>Contenu d'une cellule</td>
</tr>
<tr>
<td>Contenu d'une cellule</td>
<td>Contenu d'une cellule</td>
<td>Contenu d'une cellule</td>
<td>Contenu d'une cellule</td>
</tr>
<tr>
<td>Contenu d'une cellule</td>
<td>Contenu d'une cellule</td>
<td>Contenu d'une cellule</td>
<td>Contenu d'une cellule</td>
</tr>
</table>

Chaque saut de ligne sera interprété par forumactif et, comme on ne peut pas avoir de contenu en dehors des cellules, tu constateras que dans un message ce tableau est précédé d'un tas de sauts de ligne.

Avec la méthode barbare numéro 1, tu compresses tout :

Code:: <table><tr><td>Contenu d'une cellule</td><td>Contenu d'une cellule</td><td>Contenu d'une cellule</td><td>Contenu d'une cellule</td></tr><tr><td>Contenu d'une cellule</td><td>Contenu d'une cellule</td><td>Contenu d'une cellule</td><td>Contenu d'une cellule</td></tr><tr><td>Contenu d'une cellule</td><td>Contenu d'une cellule</td><td>Contenu d'une cellule</td><td>Contenu d'une cellule</td></tr></table>

C'est pas lisible du tout.

Avec les commentaires, tu commentes les sauts de lignes pour qu'ils soient ignorés :

Code:: <table><tr><td>Contenu d'une</td><td>Contenu d'une</td><td>Contenu d'une</td><td>Contenu d'une</td></tr><tr><td>Contenu d'une</td><td>Contenu d'une</td><td>Contenu d'une</td><td>Contenu d'une</td></tr><tr><td>Contenu d'une</td><td>Contenu d'une</td><td>Contenu d'une</td><td>Contenu d'une</td></tr></table>

Cela a le mérite de conserver les sauts de ligne, et donc de pouvoir mieux relire le code. Et ce tableau là ne sera pas précédé de plein de sauts de ligne.

Pour en revenir à ton problème, une fois que les sauts de ligne auront été "escamotés", il faudra intégralement supprimer tous ces positionnements inutiles des différents blocs de ta fiche PV, et tout de suite ça marchera mieux o/

Cependant, je ne te cache pas que ça risque de prendre du temps u_u

Sujet: Re: [Résolu] Menu et autres codes à problème Mar 13 Nov 2012, 16:37

Haha, c'est méchant pour les pieds !

Bon, ça prendra du temps, certes mais ce sera effectivement plus correct, reste à savoir si on aura ou non le courage de s'en occuper. Pour ce qui est de commenter les sauts de lignes, je t'avoue que je n'y avait pas pensé du tout mais que c'est une excellente solution !

Allez, je m'équipe en truelle et en murs porteurs et je vais corriger tout ça avec les finitions et la plomberie. Merci beaucoup à toi pour ces explications éclairées [Résolu] Menu et autres codes à problème 577704309

[Résolu] Menu et autres codes à problème 577704309

Sujet: Re: [Résolu] Menu et autres codes à problème Mar 13 Nov 2012, 20:29

Bonsoir,

Le problème semblant résolu, je déplace. Very Happy

Merci !

[Résolu] Menu et autres codes à problème

[Résolu] Menu et autres codes à problème

Sujets similaires

Sujets similaires

Partenaires Or