[Question] [HTML] Balise marquee pour faire défiler du texte

Toutes les questions concernant ce tutos se poseront ici.

Date d'inscription: 26/10/2011

Coucou !

M'étant lancée dans la création d'une signature codée pour une de mes membres, je me suis heurtée à un souci avec les balises marquee : Je veux faire défiler des images, et à priori ça marche... Enfin sous IE ! Par contre, sous firefox, pas moyen, le défilement ne prend qu'une seule image...

J'ai cru comprendre que marquee n'est pas une balise "vraiment" répertoriée, mais du coup je ne sais pas comment contourner le problème, je viens donc à la pèche aux infos ^^

Merci d'avanceuh ^^

Coucou

On peut voir ton code ? Very Happy

(parfois firefox n'aime pas certains attributs liés à cette balise)

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 26/10/2011

Voir mon code tout foutoir mélangé et tout? rha ^^

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.pvereecken.fr/Tuto_SoP/tuto_entete_onglet/js_onglet.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Signature hanako</title>

<style>
/**** Structure de l'en-tête ****/

#body{
background-image:url('http://img843.imageshack.us/img843/1903/basefond.jpg');
width:550px;
height:250px;
}

#en_tete{
background-image:url('http://img843.imageshack.us/img843/1903/basefond.jpg');
width:550px;
height:250px;
color:#5C4F32;
font-size:12 px;
font-family: Verdana;
font-variant: small-caps;
-moz-border-radius: 10px; /* Réglage des arrondis des coins pour mozilla */
-webkit-border-radius: 10px; /* Réglage des arrondis des coins pour chrome et

safari */
border-radius:10px; /* réglage des arrondis des coins */
border:1px solid #5c4f32;
}
margin:auto;
}

#en_tete tr{
vertical-align:top;
}

#en_tete img{
border:0;
}

span.onglet{
float:left;
}

span.onglet:hover{
cursor:pointer;
text-shadow: #423118 1px 1px 1px;
}

#en_tete .bloc_texte{
position:absolute;
background-color:none; !important;
margin-top:5px;
width:520px;
margin-left:10px;
left:10px;
}

/** Onglet 1 **/

#en_tete #onglet1{
background-color:none;
background-repeat:no-repeat;
background-position:top;
height:200px;
}

#en_tete #onglet1 .contenu{
width:520px;
height:auto;
background-color:#CCB68A;
border:1px solid #5c4f32;
text-align:center;
font-size:12px;
-moz-border-radius: 10px; /* Réglage des arrondis des coins pour mozilla */
-webkit-border-radius: 10px; /* Réglage des arrondis des coins pour chrome et

safari */
border-radius:10px; /* réglage des arrondis des coins */
border:1px solid #5c4f32;
}

/** Onglet 2 **/

#en_tete #onglet2{
background-color:none;
background-repeat:no-repeat;
background-position:top;
height:200px;
}

#en_tete #onglet2 .contenu{
width:520px;
height:auto;
background-color:#CCB68A;
border:1px solid #5c4f32;
text-align:center;
font-size:12px;
-moz-border-radius: 10px; /* Réglage des arrondis des coins pour mozilla */
-webkit-border-radius: 10px; /* Réglage des arrondis des coins pour chrome et

safari */
border-radius:10px; /* réglage des arrondis des coins */
border:1px solid #5c4f32;
}

/** Onglet 3 **/

#en_tete #onglet3{
background-color:none;
background-repeat:no-repeat;
background-position:top;
height:200px;
}

#en_tete #onglet3 .contenu{
width:520px;
height:auto;
background-color:#CCB68A;
border:1px solid #5c4f32;
text-align:center;
font-size:12px;
-moz-border-radius: 10px; /* Réglage des arrondis des coins pour mozilla */
-webkit-border-radius: 10px; /* Réglage des arrondis des coins pour chrome et

safari */
border-radius:10px; /* réglage des arrondis des coins */
border:1px solid #5c4f32;
}

/** Onglet 4 **/

#en_tete #onglet4{
background-color:none;
background-repeat:no-repeat;
background-position:top;
height:200px;
}

#en_tete #onglet4 .contenu{
width:520px;
height:auto;
background-color:#CCB68A;
border:1px solid #5c4f32;
text-align:center;
font-size:12px;
-moz-border-radius: 10px; /* Réglage des arrondis des coins pour mozilla */
-webkit-border-radius: 10px; /* Réglage des arrondis des coins pour chrome et

safari */
border-radius:10px; /* réglage des arrondis des coins */
border:1px solid #5c4f32;
}

/** Onglet 5 **/

#en_tete #onglet5{
background-color:none;
background-repeat:no-repeat;
background-position:top;
height:200px;
}

#en_tete #onglet5 .contenu{
width:520px;
height:auto;
background-color:#CCB68A;
border:1px solid #5c4f32;
text-align:center;
font-size:12px;
-moz-border-radius: 10px; /* Réglage des arrondis des coins pour mozilla */
-webkit-border-radius: 10px; /* Réglage des arrondis des coins pour chrome et

safari */
border-radius:10px; /* réglage des arrondis des coins */
border:1px solid #5c4f32;
}

table#sign{
width:550px;
margin:auto;
}

table#sign td#case_haut{
height:10px;
padding:4px;
text-align:center;
color:#5C4F32;
}

table#sign td#case_milieu{
height:190px;
width:500px;
background-position:top center;
}

table#sign td#case_bas{
height:25px;
padding:4px;
text-align:center;
color:#5C4F32;
}

table#sign td#case_haut a, table#sign td#case_bas a{
text-decoration:none;
color:#5C4F32;
font-size:14px;
font-family: Verdana;
font-variant:small-caps;
font-weight:bold;
}

table#sign td#case_haut a:hover, table#sign td#case_bas a:hover{
cursor:pointer;
text-shadow: #423118 1px 1px 1px;
}

</style>
</head>

<body>
<div id="en_tete">

<span class="onglet"></span>

<span class="onglet">
<div class="navigation"><div style="font-size:10px; font-weight:bold; font-size: 14px; margin-top:3px; margin-left: 50px;">Signature</div></div>
<div class="bloc_texte" id="onglet1">
<div class="contenu">
<p><img src="http://i40.servimg.com/u/f40/16/20/07/39/light310.png"></p>
</div>
</div>
</span>

<span class="onglet">
<div class="navigation"><div style="font-size:10px; font-weight:bold; font-size: 14px; margin-top:3px; margin-left: 30px;">Cadeaux</div></div>
<div class="bloc_texte" id="onglet2">
<div class="contenu">
   <p><marquee direction="up" scrollamount="2" loop="infinite" style="text-align:center; height:150px; padding: 5px;" behavior="scroll"><img src="http://img4.hostingpics.net/pics/530384hanako10.jpg"><br> <img src="http://img205.imageshack.us/img205/2060/cadeauanako.png"><br> <img src="http://img4.hostingpics.net/pics/401233hanako11.png"><br> <img src="http://img4.hostingpics.net/pics/343457754128BanYesJoyeuxNoel.jpg"><br></marquee></p>
   </div>
</div>
</span>

<span class="onglet">
<div class="navigation"><div style="font-size:10px; font-weight:bold; font-size: 14px; margin-top:3px; margin-left: 30px;">Favorite</div></div>
<div class="bloc_texte" id="onglet3">
<div class="contenu">
<p><img src="http://img4.hostingpics.net/pics/348401dont10.png"></p>
</div>
</div>
</span>

<span class="onglet">
<div class="navigation"><div style="font-size:10px; font-weight:bold; font-size: 14px; margin-top:3px; margin-left: 30px;">Dernière</div></div>
<div class="bloc_texte" id="onglet4">
<div class="contenu">
<p><img src="http://i40.servimg.com/u/f40/16/20/07/39/light310.png"></p>
</div>
</div>
</span>

<span class="onglet">
<div class="navigation"><div style="font-size:10px; font-weight:bold; font-size: 14px; margin-top:3px; margin-left: 30px;">Autre</div></div>
<div class="bloc_texte" id="onglet5">
<div class="contenu">
<img src="http://img15.hostingpics.net/pics/271621hanako.png">
   <p><img src="http://i44.servimg.com/u/f44/16/14/35/37/userba11.jpg">
   <img src="http://img11.hostingpics.net/pics/221548userbarguidetoshop.jpg"></p>
</div>
</div>
</span>

<table id="sign" cellpadding="0" cellspacing="0">
<tr>
<td id="case_haut"></td>
</tr>
<tr>
<td id="case_milieu"></td>
</tr>
<tr>
<td id="case_bas"><a href="http://graph-labyrinthe.forumgratuit.org/f51-les-ateliers-de-l-initiation" target="_blank">Prendre des Cours</a>
</td>
</tr>
</table>

</div>

</body>

</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.pvereecken.fr/Tuto_SoP/tuto_entete_onglet/js_onglet.js"></script>
</head>
</html>

(nan j'ai pas utilisé tes tutos !^^)

Bref, la partie qui nous interesse est là :

Code:

<span class="onglet">
<div class="navigation"><div style="font-size:10px; font-weight:bold; font-size: 14px; margin-top:3px; margin-left: 30px;">Cadeaux</div></div>
<div class="bloc_texte" id="onglet2">
<div class="contenu">
<p><marquee direction="up" scrollamount="2" loop="infinite" style="text-align:center; height:150px; padding: 5px;" behavior="scroll"><img src="http://img4.hostingpics.net/pics/530384hanako10.jpg"><br> <img src="http://img205.imageshack.us/img205/2060/cadeauanako.png"><br> <img src="http://img4.hostingpics.net/pics/401233hanako11.png"><br> <img src="http://img4.hostingpics.net/pics/343457754128BanYesJoyeuxNoel.jpg"><br></marquee></p>
</div>
</div>
</span>

Le pire étant qu'une fois la page hébergée et mise en place avec iframe, le défilement à marché, même sous firefox... Non j'avoue, je ne pige pas !

Bon alors moi j'le vois défiler mais juste pour la première image Smile

Je regarde ça plus en détail !

EDIT : en fait, j'ai juste ajouté ça au style du marquee

Code:

position:relative;

et ça fonctionne!

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 26/10/2011

Trop fort

Merci Miettes ! (je comprend pas ce qui ne marchait pas et qui marche, mais l'essentiel, c'est que ça le fasse!)

j't'avoue que j'sais pas trop pourquoi :/ (peut etre à cause du fait que les onglets aient des positions fixes

)

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 26/10/2011

Bah pas grave ^^ les miracles du bidouillage me laisseront toujours perplexe ^^ m'en fiche, suis fière de moi quand même, na!)

Merci de t'être penchée sur mon souci ! Smile