Problème défilement tabeau à onglets

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

Résolu Problème défilement tabeau à onglets

Message par valoche2003 le Sam 10 Mar 2012 - 21:32

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


Dernière édition par valoche2003 le Dim 11 Mar 2012 - 13:18, édité 1 fois

valoche2003
**

Féminin
Messages : 64
Inscrit(e) le : 28/02/2009

valoche2003 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème défilement tabeau à onglets

Message par Ea le Dim 11 Mar 2012 - 3:10

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.

Ea
Aidactif
Aidactif

Messages : 23447
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème défilement tabeau à onglets

Message par valoche2003 le Dim 11 Mar 2012 - 10:07

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... scratch

Merci

valoche2003
**

Féminin
Messages : 64
Inscrit(e) le : 28/02/2009

valoche2003 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème défilement tabeau à onglets

Message par Ea le Dim 11 Mar 2012 - 13:11

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

( 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.

Ea
Aidactif
Aidactif

Messages : 23447
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème défilement tabeau à onglets

Message par valoche2003 le Dim 11 Mar 2012 - 13:18

Super merci beaucoup

valoche2003
**

Féminin
Messages : 64
Inscrit(e) le : 28/02/2009

valoche2003 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