Déplacer boutons js dans un slide Fermé

Question

Bonjour, Je suis en train de faire mon site web et je voudrais déplacer les boutons de mon slide. En fait dans mon image, je voudrais que les boutons 4,5 et 6 soient à la suite des 1,2 et 3 (et non en dessous). Cliquez ici pour voir mon image Seulement je vois pas trop où chercher, dans le javascript directement ou dans le css pour le positionnement ? Merci !

animostab · Answer

Bonjour

c'est un problème de width

affiche ton site dans firefox avec le addon webdeveloper
clic sur code / voir le code source généré
repère dans le code généré la ou se trouve les boutons (div , ul etc)

regarde ensuite dans le css les id ou class se rapportant aux boutons
applique le width dont tu as besoin

nistarok · Answer

Merci de ta réponse. J'ai repéré les boutons dans le code de l'index.php, et parce que l'image appelée pour le bouton est bg-slide.jpg.
Du coup je vais de le CSS pour modifier le width :

 .slideshowlite ul li a {
background: url(../images/bg-slide.jpg) 0 0 no-repeat;
 position: relative; 
display: block; 
width: 33px !important;
height: 36px !important;
float: left;
/*  line-height: 31px;  */
text-decoration: none;
text-align: center !important;
font-size: 13px;
 font-weight: bold; 
color: #fff !important;
border:none !important; 
padding-top:10px;

}

J'avoue que modifier la valeur de width ne change rien. Nota, l'image appelée est de dimension 33*35. 

Peut être que je me trompe, et que c'est là dedans que je dois faire ma modification ? :

.slideshowlite ul {
position: absolute;
margin-top: 420px;
left:350px !important;
 z-index: 9; 
list-style-type:none;
background: transparent;
width:123px;
height:50px;

}

.slideshowlite ul li,
.slideshowlite ol li {
float: left;
width: 33px;
padding: 0 2px 0 2px;
margin:0;
list-style-type:none;
border:none !important;


Merci !

animostab · Answer

essaie ca

.slideshowlite ul {position: absolute;margin-top: 420px;left:350px !important; z-index: 9; list-style-type:none;background: transparent;width:100%;height:50px;}

nistarok · Answer

hey animo t'était pas loin, il fallait augmenter la valeur en fait. J'ai mis 232px.

En fait de ce que j'ai compris du codage du slide en css, le deuxième code que j'ai posté délimite une zone pour les boutons dans le cadre blanc en dessous des images qui glissent (donc la largeur modifiée est celle du bandeau).

Et le troisième délimite le positionnement des images boutons dans le bandeau (deuxième code).

Le premier par contre je sais pas. Un très grand merci dude :)

nistarok · Answer

Hello animo, j'ai appliqué ce code selon tes conseils :

.slideshowlite ul {
position: absolute;
margin-top: 420px;
left:350px !important;
 z-index: 9; 
list-style-type:none;
background: transparent;
width:100%;
height:50px;
text-align: center;
padding:0;
margin:0;

Ca ne marche pas (sur chrome). Je me demande s'il ne faudrait pas passer en position relative.

Sur Firefox c'est la cata, sans raison il m'a chargé la page avec les boutons en haut du cadre. Je me demande aussi si ça vient pas d'une maj du navigateur.
Pénible ...

Merci !

Déplacer boutons js dans un slide

5 réponses

Discussions similaires