Déplacer boutons js dans un slide [Fermé]

Signaler
Messages postés
302
Date d'inscription
vendredi 27 juillet 2012
Statut
Membre
Dernière intervention
6 août 2020
-
Messages postés
302
Date d'inscription
vendredi 27 juillet 2012
Statut
Membre
Dernière intervention
6 août 2020
-
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).

<a href="https://www.casimages.com/i/140706013155178831.png.html" title="upload image">Cliquez ici pour voir mon image</a>

Seulement je vois pas trop où chercher, dans le javascript directement ou dans le css pour le positionnement ?

Merci !

5 réponses

Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
634
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
Messages postés
302
Date d'inscription
vendredi 27 juillet 2012
Statut
Membre
Dernière intervention
6 août 2020
20
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 !
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
634
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;
}
Messages postés
302
Date d'inscription
vendredi 27 juillet 2012
Statut
Membre
Dernière intervention
6 août 2020
20
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 :)
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
634
ok mais si tu as plus d'images ca fera de nouveau 2 lignes
width:100% plus un text-align center et un margin padding 0 tu es sur que ce sera cool
tu peux mettre le sujet en résolu
Messages postés
302
Date d'inscription
vendredi 27 juillet 2012
Statut
Membre
Dernière intervention
6 août 2020
20
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 !