Hey ! Tu nous as donné un lien pour la prévisualisation d'une page HTML, pas vers une page HTML publiée. On peut pas la voir, du coup :s

Oh maince, voilà, j'ai modifiée, désolée :x

Si tu retires la balise center après chacun de tes balises body, ça devrait être bon! Comprends bien que l'iframe va prendre depuis le BORD de la page, pas le milieu! Pas besoin de centrer donc!

Désolée que tu fasses une demande, je pense que ça serait plus de l'ordre du problème

Je vais essayer merci ! (:

[EDIT] Alors, il n'y a plus le problème du centrage, donc merci, mais après, quand tu appuies sur Next et prev, toutes les images ne défilent pas :/

Le problème vient apparemment du target de tes boutons! En effet, pour le premier slide ça marche à merveille, mais au second, il faut appuyer sur prev pour aller au next et le next mène au prev, et pour la troisième slide, le prev ne fait rien et le next te mène au début!
Il doit donc y avoir un problème par-là! Par contre j'ai pas le temps de regarder ça ce soir, donc regarde un peu en regardant le code par toi-même, sinon, je regarde ça correctement demain, ouki? ^^

Edit: Trouvé! Chacun de tes prev et tes next devraient avoir un nombre différent et être visible à différents moments. Ici donc, tu as 3 next2 et 3 prev2! Il faudrait donc les numéroter next1, prev2 et next2, prev3 et next3 et enfin prev4 et next4, et les faire apparaitre chacun lors du slide désiré! Ça devrait régler ton problème

Je vais essayer ça, merci Je te tiens au courant

[EDIT] Alors, ça marche mieux sauf que je ne vois toujours pas apparaître la 4e PA et quand j'arrive a la 3e quand je fais prev je retourne directement à la première :/
Je vais voir vite fait si je trouve le problème, je te dis (:

[EDIT2] Alors, voilà, j'ai trouver le problème, j'ai "rêgler" on peut dire, mais ensuite j'aimerais qu'on puisse voir le next et le prev' entièrement, sauf qu'on les vois pas entièrement o/ Et je ne vois pas comment faire pour que ça marche. http://forum-test3test.forumactif.org/h6-slideshow-pa

Alors je pense que si tu agrandis ton slideshow pour qu'il soit à 780px de large, et que tu mets tous tes li en display: inline-block plutôt que inline et une margin-left: de 22px; (tu ne peux pas garder inline, car sinon la marge n'agirait pas), tes prev et next devraient apparaitre complètement! ^^

D'accord, merci, je vais essayer Je te tiens au courant !

[EDIT]Alors, ça marche mais seulement pour la 1ere PA, les trois autres n’apparaissent pas du tout, c'est entièrement blanc même s'il y a les Next et Prev. Je regarde si je trouve mais je ne pense pas :/
http://forum-test3test.forumactif.org/h6-slideshow-pa#s1

[EDIT2] Alors j'ai trouvé pourquoi ça ne marchait pas (j'avais oubliée je fermer le display) sauf que maintenant quand je continue d'avancer dans mes PA, plus le prev' disparaît sous la PA. Je me demandais si avec une image ça ferais le même effet, donc j'essaye de mettre une image et je te dit.

[EDIT3] Alors, j'ai mis mes images mais ça fait la même chose qu'avec un texte :/
http://forum-test3test.forumactif.org/h6-slideshow-pa

Chez moi tout marche! O__O Et ce, sur mes quatre navigateurs! (Opera, Safari, Chrome et Mozilla Firefox)
Sous quel navigateur es-tu?

Chrome... C'est bizarre :o

Je peux avoir une capture d'écran? Car pour moi, sur Chrome, tout marche!

Edit: Ah autant pour moi, j'ai compris ce que tu voulais dire!
En fait, ça tient à tes déplacements en pourcent!
Remplace tes -100%, -200% et-300% par -780px, -1560px et -2340px respectivement pour s2, s3 et s4 au target! Si tu changes encore la marge, tu ne devrais plus avoir de soucis de bouton preview qui rentre dans l'iframe sans raison ^^

Coucou, ça ne marche toujours pas :/ Il les PA bougent en vont plus vers la gauche au fur et a mesure que je change de PA... :/

Essaie de modifier les valeurs de left alors Expérimente un peu, regarde ce qui fait que ça ne se décale pas plus (par exemple, retire 5 pixels de left à l'une ou l'autre)! Je peux pas le faire moi, vu que je n'ai pas accès au code de ta page html ^^"

Je te donne le code parce que je ne comprend pas trop ce que tu veux dire :/

Code:

<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="generator" content="PSPad editor, www.pspad.com" /> <title></title><style type="text/css">
/*Liens Maj*/
A:link, A:visited, A:active {
font-variant: small-caps;
color: black;
text-shadow: 1px 1px 3px;}
/*Fin*/
/*Liens*/
a { text-decoration: none; }
A:hover{text-transform:fat;}
a:hover{    text-shadow: 1px 1px 2px grey; }
/*fin*/
/*Scrollbar*/
::-webkit-scrollbar {
  height: 10px;
  width: 10px;
  background-color: ; /* couleur de fond */}
::-moz-scrollbar {
  height: 10px;
  width: 10px;
  background-color: ; /* couleur de fond */}
::-o-scrollbar {
  height: 10px;
  width: 10px;
  background-color: ; /* couleur de fond */}
html > ::-webkit-scrollbar {
  width: 10px; /* largeur de la barre */}
::-webkit-scrollbar-thumb {
  background: black; /* couleur de la barre qui se déplace */
  border-radius: 50px;  /* Arrondis */}
::-moz-scrollbar {
  width: 10px; /* largeur de la barre */}
::-moz-scrollbar-thumb {
  background: black; /* couleur de la barre qui se déplace */
  border-radius: 50px;  /* Arrondis */}
::-o-scrollbar {
  width: 10px; /* largeur de la barre */}
::-o-scrollbar-thumb {
  background: black; /* couleur de la barre qui se déplace */
  border-radius: 50px;  /* Arrondis */}
::-webkit-scrollbar-track-piece {
  background-color: ; /* couleur de fond */}
::-moz-scrollbar-track-piece {
  background-color: ; /* couleur de fond */}
::-o-scrollbar-track-piece {
  background-color: ; /* couleur de fond */}
/*fin*/

#slideshow {
    position: relative;    /*le parent positionné*/
    width: 780px;          /*limite en largeur (1 élément du slideshow)*/
    height: 535px;        /*limite en hauteur*/
    margin: 30px;
    overflow: hidden;      /*on cache ce qui déborde*/
}
#sContent {
    position: absolute;  /*on sort l'élément du flux*/
    top: 0;              /*on le positionne précisément dans ...*/
    left: 0;              /*l'angle haut gauche de son parent positionné*/
    width: 500%;        /*ou 300% car 3 éléments*/
    margin: 0;           
    padding: 0;
    z-index: 10;
   
    /*CSS3 transition*/
        -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
#sContent li {
    display: inline-block;    /*on aligne les éléments du slideshow*/
    margin-left: 22px;
 
   
}

#slideshow .next, #slideshow .prev {
    position: absolute;
    top: 65px;
    z-index: 20;
}
#slideshow .prev { left: 0; }
#slideshow .next { right: 0; }

/* initialisation */
#slideshow .next, #slideshow .prev { display: none; }
#slideshow .next1 { display: block; }

/* Vers 1ère étape */
#s1:target #sContent { left: 0px; }
#s1:target .next, #s1:target .prev { display: none; }
#s1:target .next1, #s1:target .prev1 { display: block; }

/* Vers 2ème étape */
#s2:target #sContent { left: -780px; } /*ou -100%*/
#s2:target .next, #s2:target .prev { display: none; }
#s2:target .next2, #s2:target .prev2 { display: block; }

/* Vers 3ème étape */
#s3:target #sContent { left: -1560px; } /*ou -200%*/
#s3:target .next, #s3:target .prev { display: none; }
#s3:target .next3, #s3:target .prev3 { display: block; }

/* Vers 4ème étape */
#s4:target #sContent { left: -2340px; } /*ou -300%*/
#s4:target .next, #s4:target .prev { display: none; }
#s4:target .next4, #s4:target .prev4 { display: block; }


</style>
<div id="slideshow">
   
   <div id="s1">
      
      <div id="s2">
         
         <div id="s3">
            
            <div id="s4">
                <a class="prev prev1" href="#s4"><img src="http://zupimages.net/up/14/25/4gek.png" /></a><a class="next next1" href="#s2"><img src="http://zupimages.net/up/14/25/uawo.png" /></a>
               <!--            Pour la 1ère étape            --> <a class="prev prev2" href="#s1"><img src="http://zupimages.net/up/14/25/4gek.png" /></a><a class="next next2" href="#s3"><img src="http://zupimages.net/up/14/25/uawo.png" /></a>
               <!--            Pour la 2ème étape            --> <a class="prev prev3" href="#s2"><img src="http://zupimages.net/up/14/25/4gek.png" /></a><a class="next next3" href="#s4"><img src="http://zupimages.net/up/14/25/uawo.png" /></a>
               <!--            Pour la 3ème étape            --> <a class="prev prev4" href="#s3"><img src="http://zupimages.net/up/14/25/4gek.png" /></a><a class="next next4" href="#s1"><img src="http://zupimages.net/up/14/25/uawo.png" /></a>
               <!--            Pour la 3ème étape            -->
               <ul id="sContent">
                  
                  <li>
                      <alt="page1"><iframe style="width:750px; height:535px;" frameborder="0" scrolling="auto" src="http://forum-test3test.forumactif.org/h2-page-1"> </iframe></alt="page1">
                  </li>
                  
                  <!--           
                                -->
                  <li>
                      <alt="page2"><iframe style="width:750px; height:535px;" frameborder="0" scrolling="auto" src="http://forum-test3test.forumactif.org/h3-page-2"> </iframe></alt="page2">
                  </li>
                  
                  <!--           
                                -->
                  <li>
                      <alt="page3"><iframe style="width:750px; height:535px;" frameborder="0" scrolling="auto" src="http://forum-test3test.forumactif.org/h4-page-3"> </iframe></alt="page3">
                  </li>
                  
                  <!--           
                                -->
                  <li>
                      <alt="page4"><iframe style="width:750px; height:535px;" frameborder="0" scrolling="auto" src="http://forum-test3test.forumactif.org/h5-page-4"></iframe></alt="page4">
                  </li>
                  
               </ul>
               
            </div>
            
         </div>
         
      </div>
      
   </div>
   
</div>

Je te parle de ça:

Code:

/* Vers 2ème étape */
#s2:target #sContent { left: -780px; } /*ou -100%*/

/* Vers 3ème étape */
#s3:target #sContent { left: -1560px; } /*ou -200%*/

/* Vers 4ème étape */
#s4:target #sContent { left: -2340px; } /*ou -300%*/


Joue un peu avec ces valeurs! Par exemple, au lieu de -780 px, met -781, ou -783, ou qu'importe tant que ça donne ce que tu veux. Fait pareil avec les autres! Sache simplement que la première valeur place le 2ième slide, la troisième le 3ième et le dernier le dernier. Comme ça, tu peux les placer comme tu veux

Coucou !
C'ets bon, j'ai reussie !
Mais est-ce que tu sais comment on fait pour mettre les flèches au milieu de la largeur ? :/

Alors tu as ce bout de code-ci:

Code:

#slideshow .next, #slideshow .prev {
    position: absolute;
    top: 65px;
    z-index: 20;
}

Qui te permet de placer les flèches. Le top est la distance depuis le haut. Je crois que la moitié est vers 180px? Donc tu remplaces top: 65px par top: 180px. Ou une autre valeur jusqu'à ce que tu sois contente! ^^

D'accord Merci beaucoup ^-^

Il y a un problème avec l'Iframe une fois que je le met sur la PA

http://forum-test3test.forumactif.org/

Je vois les scrollbarre de la hauteur et de la largeur, je ne sais pas pourquoi ça me fais ça :/

[EDIT] j'ai trouvé le problème et j'ai modifier, normalement il n'y a plus aucuns beugs

Moi je n'ai rien sur aucun de mes navigateurs O__O

Tyarra a écrit:

[EDIT] j'ai trouvé le problème et j'ai modifier, normalement il n'y a plus aucuns beugs

Voilà ^-^ Je pense que tout est rêglé

Ah j'ai posté un tout petit peu avant ton édit! ^^
C'est génial alors! Oublie pas de mettre le petit vue si tout est bon! ^^

Je vais attendre un peu au cas où il y ai de nouveaux beugs entres temps (:
Mais un énorme merci pour ton aide ^-^

C'est bon du coup ?