Déplacer boutons js dans un slide

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

  1. 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
    0
    1. 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 !
      0
      1. 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;
        }
        0
        1. 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 :)
          0
          1. 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
            0
        2. 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 !
          0