Problème défilement tabeau à onglets

[valoche2003]

Bonjour,
Je suis arrivée a faire un tableau à onglets, grâce aux explications et tutos trouvés ici (un grand merci)...

Mon problème est que dans mon onglet 'Sorties du mois" normalement les images doivent défiler horizontalement, et là elles sont figées???

Voici le code Css

Code:

    #tab-bloc .tab img {
          horizontal-align: -3px;
        }
        /* .tab = onglets */
        #tab-bloc .contents {
        border: 3px double #aaa;
        background: none;
        border-radius: 50px;
        padding: 25px;
        }
        /* .tab.selected = onglet sélectionné*/
        #tab-bloc .tab.selected {
          background: none;
          box-shadow: 0 0 5px #333;
          color: none;
          font-weight: bold;
        }
        /* .tab img = image dans les onglets */
        #tab-bloc .tab img {
          vertical-align: -3px;
        }
        /* .contents = conteneur des contenu */
        #tab-bloc .contents {
          border: 3px double none;
          background: none;
          border-radius: 50px;
          padding: 25px;
        }
        /* #tab-staff = contenu associé à l'onglet staff */
        #tab-staff {
          background: none;
        border: 1px dotted none;
        }
        #tab-staff table {
          color: none;
          background: none;
        }
        /* #tab-bienvenue = contenu associé à l'onglet bienvenue */
        #tab-bienvenue {
          border-radius: 50px;
          border: 2px dashed none;
          background: none;
          text-align: center;
          font-size: 20px;
          color: none;
          text-shadow: 0 0 5px none;
        }
        /* #tab-regles = contenu associé à l'onglet règles */
        #tab-regles ul  {
          font-family: georgia, arial, serif;
          font-size: 17px;
          list-style: url(http://i.imgur.com/DMC6G.gif);
        }
        #tab-regles li {
          margin-bottom: 10px;
          color: red;
        }

Et voici le code html

Code:

<br/><div class="systab" id="marquee">
  <div id="tab-Sorties">
    <span><img src="http://i49.servimg.com/u/f49/11/59/07/18/sortie11.png" />  </span>
    <ul>

<marquee direction="left" scrollamount="1" scrolldelay="05" onmouseover="this.stop();" onmouseout="this.start();">

<img src="http://i49.servimg.com/u/f49/11/59/07/18/97822810.png" />  

<img src="http://i49.servimg.com/u/f49/11/59/07/18/blood-10.png"  />  

<img src="http://i49.servimg.com/u/f49/11/59/07/18/chroni14.png" />  

<img src="http://i49.servimg.com/u/f49/11/59/07/18/dark-e10.png" />  

<img src="http://i49.servimg.com/u/f49/11/59/07/18/devil-10.png" />  

<img src="http://i49.servimg.com/u/f49/11/59/07/18/envo-t10.png" />  

<img src="http://i49.servimg.com/u/f49/11/59/07/18/eterne10.png" />   

<img src="http://i49.servimg.com/u/f49/11/59/07/18/everni10.png" />   

<img src="http://i49.servimg.com/u/f49/11/59/07/18/ghostw10.png" />  

<img src="http://i49.servimg.com/u/f49/11/59/07/18/indian10.png" />  

<img src="http://i49.servimg.com/u/f49/11/59/07/18/instin10.png" />  

<img src="http://i49.servimg.com/u/f49/11/59/07/18/kara-g10.png" />  

<img src="http://i49.servimg.com/u/f49/11/59/07/18/la-fil11.png" />  

<img src="http://i49.servimg.com/u/f49/11/59/07/18/la-vam10.png" />  

<img src="http://i49.servimg.com/u/f49/11/59/07/18/le-cer10.png" />  

<img src="http://i49.servimg.com/u/f49/11/59/07/18/le-cha10.png" />  

<img src="http://i49.servimg.com/u/f49/11/59/07/18/le-liv10.png" />  

<img src="http://i49.servimg.com/u/f49/11/59/07/18/le-mur10.png" />  

<img src="http://i49.servimg.com/u/f49/11/59/07/18/les-fa10.png" />  

<img src="http://i49.servimg.com/u/f49/11/59/07/18/les-hi10.png" />  

<img src="http://i49.servimg.com/u/f49/11/59/07/18/les-ro10.png" />  

<img src="http://i49.servimg.com/u/f49/11/59/07/18/les-va10.png" />  

<img src="http://i49.servimg.com/u/f49/11/59/07/18/minuit10.png" />  

<img src="http://i49.servimg.com/u/f49/11/59/07/18/n-s--m10.png" />  

<img src="http://i49.servimg.com/u/f49/11/59/07/18/nuit-n10.png" />  

<img src="http://i49.servimg.com/u/f49/11/59/07/18/psi-ch10.png" />  

<img src="http://i49.servimg.com/u/f49/11/59/07/18/rebecc10.png" />  

<img src="http://i49.servimg.com/u/f49/11/59/07/18/siana-10.png" />  

<img src="http://i49.servimg.com/u/f49/11/59/07/18/sianim11.png" />  

<img src="http://i49.servimg.com/u/f49/11/59/07/18/silenc10.png" />  

<img src="http://i49.servimg.com/u/f49/11/59/07/18/vert-m10.png" />  


</marquee>
    </ul>
  </div>
<br/>
  <div class="selected" id="tab-Tchat">
    <span><img src="http://i49.servimg.com/u/f49/11/59/07/18/tchat11.png" />  </span>
<!-- BEGIN CBOX - www.cbox.ws - v001 --><div id="cboxdiv" style="text-align: center; line-height: 0"><div><iframe frameborder="0" width="600" height="225" src="http://www3.cbox.ws/box/?boxid=3326782&amp;boxtag=d2dmw0&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain3-3326782" style="border:#000000 1px solid;" id="cboxmain3-3326782"></iframe></div><div><iframe frameborder="0" width="600" height="75" src="http://www3.cbox.ws/box/?boxid=3326782&amp;boxtag=d2dmw0&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform3-3326782" style="border:#000000 1px solid;border-top:0px" id="cboxform3-3326782"></iframe></div>
</div>
<!-- END CBOX -->

  </div>
  <div id="tab-staff">
    <span><img src="http://i49.servimg.com/u/f49/11/59/07/18/prasen11.png" />  </span>
    <table>
<img src="http://i49.servimg.com/u/f49/11/59/07/18/lestaf10.jpg" />
    </table>
  </div>
</div>

Voici l'adresse de mon forum :
http://bit-lit-cie.forum-actif.net/

Comment puis-je les faire défiler ??? où est mon erreur (en sachant que je n'y connais rien en code)

Je souhaiterai aussi enlever le cadre rouge du tableau, comment faire ??

Merci pour votre aide

[Ea]

Bonjour,


Si je mets le marquee comme ça sur une page html ça ne fonctionne pas sur firefox :
http://pastehtml.com/view/bqxr6ci54.html

Cela doit être une des options qui ne sont pas bonne, vu que si je laisse juste le direction ça fonctionne :
http://pastehtml.com/view/bqxriue4o.html

Cordialement.

[valoche2003]

Bonjour,

les 2 que tu me donnes en test fonctionne sous firefox (c'est mon naviguateur par défaut)...
et quand je recopie le code, c'est toujours statique...

Merci

[Ea]

Ah oui, ça ne marchait pas pour moi hier le premier ( sur firefox )

( mais maintenant ça marche )

C'est bizarre, marquee n'est pas toujours bien implémenté dans les navigateurs ( c'est juste un " bonus " donné parce que c'est utilisé, mais il n'y a pas de standard qui dit que " il faut faire fonctionner la balise marquee " ). Enfin ici j'imagine que firefox n'aime pas que le marquee soit un moment caché.

J'ai essayé en mettant un script à la place du marquee et ça va :
http://www.maonyn.com/h20-test-marquee

Pour utiliser ce script il faut ajouter sur les pages où vous voulez que ça fonctionne, ce script :

Code:

$(function(){$(".marquee").each(function(){var b=!1,c=!0,a=$(this).mouseenter(function(){b=!0}).mouseleave(function(){b=!1}),d=function(){a.animate(b?{scrollLeft:a.scrollLeft()}:{scrollLeft:(c?"+":"-")+"=50"},500,"linear",function(){if(!a.scrollLeft()||a.scrollLeft()>=a.prop("scrollWidth")-a.width())c=!c;d()})};d()})});

Et pour l'utiliser sur une page vous pouvez mettre ce code html :

Code:

<div class="marquee" style="overflow-x: hidden; max-width: 800px; white-space: nowrap;">Le contenu qui doit défiler</div>

Dans tout ça vous pouvez changer dans le html le 800px pour la largeur que vous souhaitez.

Et dans le script vous pouvez changez les paramètres suivants :

• 50 : c'est le nombre de pixel changé en " une période " de mouvement ( à chaque période soit s'arrête ( si la souris survole le défilement ), soit on continue, soit on change de sens si on est à un bout )
  
  
• 500 : c'est le temps en milliseconde pour faire la période de mouvement ( donc avec 500 et 50 ça prend 0,5 seconde pour faire 50 pixels )
  
  
• "linear" : c'est le type de déplacement, "linear" c'est un déplacement tout le temps à la même vitesse, on pourrait remplacer par "swing" qui accélère / décélère en partant / arrivant

Cordialement.

[valoche2003]

Super merci beaucoup