Balise marquee et CSS

Version imprimable

Bonjour,

J'ai un petit soucis avec mon site internet. J'essaye de faire défiler des photos mais le défilement ne fait pas défiler toutes les photos et recommence au départ.

Une idée du problème?

Je fais comme ceci:

CODE HTML:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<tr>
      <td align="center" >
      <div class=marquee><font size="3"><i>REPORTAGES PHOTOGRAPHIQUES - GRAPHISME - ARTS PLASTIQUES - EXPOSITIONS PHOTOGRAPHIQUES - EDITION - FILMS D'ANIMATION - REPORTAGES PHOTOGRAPHIQUES - GRAPHISME - ARTS PLASTIQUES - EXPOSITIONS PHOTOGRAPHIQUES - EDITION - FILMS D'ANIMATION - REPORTAGES PHOTOGRAPHIQUES - GRAPHISME - ARTS PLASTIQUES - EXPOSITIONS PHOTOGRAPHIQUES - EDITION - FILMS D'ANIMATION</font>
      </div>
     </td>
     </tr>
 
     <tr>
     <td align="center">
     <div class=marquee><img src="images/DEFILEMENT/IMG1.jpg" /><img src="images/DEFILEMENT/IMG2.jpg" /><img src="images/DEFILEMENT/IMG3.jpg" /><img src="images/DEFILEMENT/IMG4.jpg" /><img src="images/DEFILEMENT/IMG5.jpg" /><img src="images/DEFILEMENT/IMG6.jpg" /><img src="images/DEFILEMENT/IMG7.jpg" /><img src="images/DEFILEMENT/IMG8.jpg" /><img src="images/DEFILEMENT/IMG9.jpg" /><img src="images/DEFILEMENT/IMG10.jpg" /><img src="images/DEFILEMENT/IMG11.jpg" /><img src="images/DEFILEMENT/IMG12.jpg" /><img src="images/DEFILEMENT/IMG13.jpg.jpg" /><img src="images/DEFILEMENT/IMG14.jpg" /><img src="images/DEFILEMENT/IMG15.jpg" /><img src="images/DEFILEMENT/IMG16.jpg" /><img src="images/DEFILEMENT/IMG17.jpg" /><img src="images/DEFILEMENT/IMG18.jpg" /></div>
     </td>
    </tr>

CODE CSS:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
.marquee {
width:600px;
/*height:40px;
padding:5px;
background-color: yellowgreen;
border: 20px solid rgba(0,0,0,0.3);*/
white-space: nowrap; 
overflow: hidden;
 
 
/* Safari and Chrome  */
overflow-x:-webkit-marquee;
-webkit-marquee-direction: backwards;
-webkit-marquee-style: scroll;
-webkit-marquee-speed: fast;
-webkit-marquee-increment: 1px;
-webkit-marquee-repetition: infinite;
 
/* W3C  */
overflow-x: marquee-line;
marquee-direction: forward;
marquee-style: scroll;
marquee-speed: fast;
marquee-play-count: infinite;
}

05/09/2013, 15h16
rodolphebrd
Bonjour,

il faudrait penser à utiliser la balise marquee.
Code:

1 2 3 4 <marquee direction="left"> <img src="images/DEFILEMENT/IMG1.jpg" /> ........... </marquee>
Cependant c'est une balise obsolète et on obtient des résultat mieux réalisés en JavaScript.
05/09/2013, 15h19
Torgar

Attention toutefois à la spécification HTML ou XHTML utilisée, sinon c'est pas valide.

Quel est ton doctype ?
05/09/2013, 16h36
soeursourire

J'utilisais la balise marquee au début et j'avais le meme soucis (je suis sous safari).

Mon doctype est le suivant:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Il ne faut pas utiliser ca?

Merci. a++
05/09/2013, 18h35
Invité

Bonjour,
ceci pourrait t'intéresser : ABCIWEB : Objets défilants
05/09/2013, 19h50
soeursourire

Merci c'est bon à savoir ce lien mais j'aimerais comprendre pourquoi cela ne marche pas mon code?
05/09/2013, 20h22
Invité

Re.
Après quelque recherche sur le web, et tentative pour voir des démos...
aucune démo n'a fonctionné pour moi, que ce soit sur Firefox, Chrome, IE ou Opera.

Il semble que ça fonctionne uniquement sur Safari (grâce au préfixe -webkit-)

Bref. Pas très portable, tout ça. Il va falloir attendre encore un peu.

Voir aussi : W3C - CSS Marquee Module Level 3