Centrer un diaporama

[Shagooo]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://www.fsx-france.com/

Description du problème

Bonjour à tous,

J'ai un souci avec le code pour créer un diaporama (images défilantes) proposé sur le site par Vivi en mars dernier.
https://forum.forumactif.com/t377148-creer-un-diaporama-images-defilantes


Le code fonctionne bien, mais je n'arrive pas à "centrer l'image" dans un Widgets.

Le code:

Spoiler:

Merci de votre aide.

Cordialement.

Shag


PS: Oups ::betise:: J'ai posté au mauvaise endroit .. Désolé

[FANCH 56]

Bonsoir

Essaie de changer la première partie de ton code par :

Code:


<style type="text/css">#rotator1427475840820 {height:130px;} #rotator1427475840820 a{position:absolute;margin-left: 5%;background:#FFFFFF;border:1px solid #CCCCCC;padding:4px;} #rotator1427475840820 img { height:110px;width:150px; }</style>             
<div id="rotator1427475840820">

[Shagooo]

Bonsoir

Merci, mais toujours pas centré.

Je vois que tu as inséré une marge dans ton script, le hic c'est que suivant l'écran que tu utilises, l'image sera placé différemment.

Merci tout de même.

Cordialement.

Shag

[FANCH 56]

Le script fonctionne tel quel, je l'ai mis sur mon portail. Voir mon forum dans mon profil.

[Shagooo]

Le script fonctionne tel quel, je l'ai mis sur mon portail. Voir mon forum dans mon profil.

Bonjour,

Merci pour ton aide, seulement l'image n'est pas centré (ni chez moi, ni chez toi).

Je vais chercher encore et encore.

Grand merci d'avoir essayé de m'aider.

Cordialement.

Shag

[FANCH 56]

J'ai trouvé !

Il faut que tu définisse la largeur de tes photos en fonction de la largeur de ton widget.

Chez moi, j'ai diminué de 10 px la largeur du widget, et c'est bon. Donc le prochain, je ferais en sorte de mettre une largeur correcte à mes photos dans le générateur.

[Shagooo]

Encore merci à toi pour ces précisions.

Après des heures à me gratter la tête, je dirais que ce code ne me convient pas car il n'est pas très confortable.

Je m'explique, l'image passe au dessus des autres scripts et cela pose problème au niveau affichage. J'ai vu des différences suivants les tailles d'écrans utilisés.

Vraiment dommage, car le rendu est vraiment propre.

Excellente journée à toi.

Cordialement.

Shag

[FANCH 56]

l'image passe au dessus des autres scripts

Je ne comprends pas cette phrase.

Je n' ai eu aucun retour concernant des chevauchements.

[Shagooo]

l'image passe au dessus des autres scripts

Je ne comprends pas cette phrase.

Je n' ai eu aucun retour concernant des chevauchements.

Bonsoir,

Je suis très pris ce soir et demain boulot ...

Je me ferais un plaisir d'en rediscuter avec toi rapidement sur le forum ou skype.

A très vite

[MlleAlys]

Bonjour,
remplacez votre code par celui là :

Code:

<style type="text/css">#rotator1430396454288 {height:275px;position:relative;} #rotator1430396454288 a{position:absolute;top:0;left:100px;background:#FFFFFF;border:1px solid #CCCCCC;padding:4px;} #rotator1430396454288 img { height:265px;width:500px; }</style>
<div id="rotator1430396454288">
     <a target="_blank" title="" href="http://www.fsx-france.com/" style="z-index:999" id="itemActif1430396454288"><img alt="" src="http://img11.hostingpics.net/pics/147702127.jpg" /></a><a target="_blank" title="" href="http://www.fsx-france.com/"><img alt="" src="http://img11.hostingpics.net/pics/858065439.jpg" /></a><a target="_blank" title="" href="http://www.fsx-france.com/"><img alt="" src="http://img11.hostingpics.net/pics/2822774612.jpg" /></a><a target="_blank" title="" href="http://www.fsx-france.com/"><img alt="" src="http://img11.hostingpics.net/pics/135326carte10.jpg" /></a><a target="_blank" title="" href="http://www.fsx-france.com/"><img alt="" src="http://img11.hostingpics.net/pics/7408737811.jpg" /></a><a target="_blank" title="" href="http://www.fsx-france.com/"><img alt="" src="http://img11.hostingpics.net/pics/601461crash10.jpg" /></a><a target="_blank" title="" href="http://www.fsx-france.com/"><img alt="" src="http://img11.hostingpics.net/pics/480524310432201429175411938.jpg" /></a>
</div><script type="text/javascript">(function(){var r = document.getElementById("rotator1430396454288"), l = r.getElementsByTagName("A"), rotate = window.setInterval(function() {var a = document.getElementById("itemActif1430396454288"), n = jQuery(a).next()[0] || l[0]; if (!a) return window.clearInterval(rotate); n.style.opacity = 1;n.style.zIndex = 998;jQuery(a).animate({"opacity":0},800,"linear",function() {a.id = "";a.style.zIndex = "";n.id = "itemActif1430396454288";n.style.zIndex = 999})},3500)})();</script>

C'est le même, sauf que j'ai ajouté quelques styles au début, localisez left:100px; et modifiez cette valeur pour décaler votre image vers la gauche ou vers la droite jusqu'à centrer l'élément. ^^

[Shagooo]

Bonjour,

Merci beaucoup pour le complément.

Excellente journée à tous les deux.

Cordialement.

Shag