Bonjour à tous,

Je cherche à faire une sorte de barre défilante composé de balise div. Je pensais les mettre l'une derrière l'autre et jouer avec les valeurs de la marge en javascript pour faire l'effet défilant.

Mais je rencontre plusieurs problèmes
padding n'accepte pas les valeurs négatives
mettre les balises en float fait qu'elle vont à la ligne à la fin de la div globale.

Je me tourne alors vers vous pour trouver le moyen de réaliser ceci. Si vous avez des idées ou des pistes à explorer. Merci d'avance

J'ai trouvé en partie a solution, je dois avoir un conteneur supplémentaire qui doit avoir une longueur supérieure ou égale au contenu.

J'aimerais me dispenser de trouver et de connaitre cette longueur (dépendant du CSS et des images utilisés) avez vous une idée ?

je vous laisse le code créer (je laisse le résultat, car il est générer dynamiquement par php)

<div id='marques'><ul id='container' style='width:2762px'>
<li class='marque'><a href='lien.php'><img src='image.gif'
alt='Mitsubishi' /></a></li>
<li class='marque'><a href='lien.php'><img src='image.gif'
alt='Bonfiglioli' /></a></li>
<li class='marque'><a href='lien.php'><img src='image.gif' alt='Exor'
/></a></li>
<li class='marque'><a href='lien.php'><img src='image.gif'
alt='Jetter' /></a></li>
<li class='marque'><a href='lien.php'><img src='image.gif' alt='ASEM'
/></a></li>
<li class='marque'><a href='lien.php'><img src='image.gif'
alt='Twiflex' /></a></li>
<li class='marque'><a href='lien.php'><img src='image.gif' alt='Esco
Couplings' /></a></li>
<li class='marque'><a href='lien.php'><img src='image.gif'
alt='Solcon' /></a></li>
<li class='marque'><a href='lien.php'><img src='image.gif' alt='LTi' /></a></li>

<li class='marque'><a href='lien.php'><img src='image.gif'
alt='Compomac' /></a></li>
<li class='marque'><a href='lien.php'><img src='image.gif'
alt='Elmore' /></a></li>
<li class='marque'><a href='lien.php'><img src='image.gif' alt='Niasa'
/></a></li>
<li class='marque'><a href='lien.php'><img src='image.gif'
alt='Perske' /></a></li>
<li class='marque'><a href='lien.php'><img src='image.gif'
alt='Transfluid' /></a></li>
<li class='marque'><a href='lien.php'><img src='image.gif' alt='Eltra'
/></a></li>
<li class='marque'><a href='lien.php'><img src='image.gif' alt='Weg' /></a></li>
<li class='marque'><a href='lien.php'><img src='image.gif'
alt='Mitsubishi' /></a></li>
<li class='marque'><a href='lien.php'><img src='image.gif'
alt='Bonfiglioli' /></a></li>
<li class='marque'><a href='lien.php'><img src='image.gif' alt='Exor'
/></a></li>
<li class='marque'><a href='lien.php'><img src='image.gif'
alt='Jetter' /></a></li>
<li class='marque'><a href='lien.php'><img src='image.gif' alt='ASEM'
/></a></li>
<li class='marque'><a href='lien.php'><img src='image.gif'
alt='Twiflex' /></a></li>
<li class='marque'><a href='lien.php'><img src='image.gif' alt='Esco
Couplings' /></a></li>
<li class='marque'><a href='lien.php'><img src='image.gif'
alt='Solcon' /></a></li>
<li class='marque'><a href='lien.php'><img src='image.gif' alt='LTi' /></a></li>
<li class='marque'><a href='lien.php'><img src='image.gif'
alt='Compomac' /></a></li>

<li class='marque'><a href='lien.php'><img src='image.gif'
alt='Elmore' /></a></li>
<li class='marque'><a href='lien.php'><img src='image.gif' alt='Niasa'
/></a></li>
<li class='marque'><a href='lien.php'><img src='image.gif'
alt='Perske' /></a></li>
<li class='marque'><a href='lien.php'><img src='image.gif'
alt='Transfluid' /></a></li>
<li class='marque'><a href='lien.php'><img src='image.gif' alt='Eltra'
/></a></li>
<li class='marque'><a href='lien.php'><img src='image.gif' alt='Weg' /></a></li>
</ul></div>
<script language="JavaScript" type="text/javascript">
<!--
position = -10;//ne pas modifier
increment = 0.4;//Déplacement en pixel à chaque intervalle de temps
valeur_limite = -2762;
document.getElementById('marques').style.overflow = 'hidden';
document.getElementById('marques').style.height = '50px';
document.getElementById('container').style.width = 5524+'px';
setTimeout(deplace_marques,5000);//Temps (en millisecondes) avant le
premier mpouvement
function deplace_marques() {
       position = position - increment;
       if (position <= valeur_limite) {position = position - valeur_limite;}
       document.getElementById('container').style.marginLeft = position+'px';
       setTimeout(deplace_marques,10);//temps en millisecondes de chaque
intervalle de temps
}
//-->
</script>