Partage

Slide avec css

10 février 2019 à 14:03:26

Bonjours j'ai un code css que voici

#img1{
	width: 300px;
	height: 300px;
}
#img2{
	width: 300px;
	height: 300px;
}
#img3{
	width: 300px;          /* limite en largeur (1 élément du slideshow) */
	height: 300px;
}
#slideshow {
	position: relative;    /*le parent positionné*/
	width: 850px;          /*limite en largeur (1 élément du slideshow)*/
	height: 300px;         /*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: 300px;         /*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;      /*on aligne les éléments du slideshow*/
}

#slideshow .next, #slideshow .prev {
	position: absolute;
	top: 65px;
	z-index: -40;
}
#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 { display: block; }

/* Vers 2ème étape */
#s2:target #sContent { left: -750px; } /*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: -300px; } /*ou -200%*/
#s3:target .next, #s3:target .prev { display: none; }
#s3:target .prev3 { display: block; }

Le code html est le suivant

#img1{
	width: 300px;
	height: 300px;
}
#img2{
	width: 300px;
	height: 300px;
}
#img3{
	width: 300px;          /* limite en largeur (1 élément du slideshow) */
	height: 300px;
}
#slideshow {
	position: relative;    /*le parent positionné*/
	width: 850px;          /*limite en largeur (1 élément du slideshow)*/
	height: 300px;         /*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: 300px;         /*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;      /*on aligne les éléments du slideshow*/
}

#slideshow .next, #slideshow .prev {
	position: absolute;
	top: 65px;
	z-index: -40;
}
#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 { display: block; }

/* Vers 2ème étape */
#s2:target #sContent { left: -750px; } /*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: -300px; } /*ou -200%*/
#s3:target .next, #s3:target .prev { display: none; }
#s3:target .prev3 { display: block; }

Je ne comprend pas pourquoi quand j'appuie sur le bouton il ne se passe rien sachant que les images sont remise à la bonne taille par css

help svp

-
Edité par Titoune80 10 février 2019 à 14:04:43

Sassouquet54

11 février 2019 à 9:49:15

Bonjour, tu nous as mis 2 fois le code CSS

Titoune80

12 février 2019 à 16:02:25

oula je viens juste de voir ça je modifie

<html>
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <link rel="testsheet" href="test.css">
        </head>
    <body>


      <p><a href="Programmation_Objet.html"</a>Acceuil</p></a>
      <div id="slideshow">
      	<ul id="sContent">
          <li><img src="test1.JPG" alt="123456789" /></li>
          <li><img src="test2.JPG" alt="" /></li>
          <li><img src="test3.JPG" alt="" /></li>
      	</ul>
      </div>
</body>
</html>

ox223252

14 février 2019 à 7:55:22

slt,

ton code n'est pas bon :

<p><a href="Programmation_Objet.html"</a>Acceuil</p></a>

la première balise a que tu créé est mal foutue

la connaissance est une chose qui ne nous appauvrit pas quand on la partage.

Mon GitHub

Titoune80

6 mars 2019 à 16:49:03

alors la je me suis planté de code html aussi

le voici ps désolé du temps de réponse

Donc voici le css

#img1{

	width: 300px;
	height: 300px;
}
#img2{
	width: 300px;
	height: 300px;
}
#img3{
	width: 300px;          /* limite en largeur (1 élément du slideshow) */
	height: 300px;
}
#slideshow {
	position: relative; 	   /*le parent positionné*/
	left: 100px;
	width: 450px;          /*limite en largeur (1 élément du slideshow)*/
	height: 300px;         /*limite en hauteur*/
	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: 300px;         /*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;      /*on aligne les éléments du slideshow*/
}

#slideshow .next, #slideshow .prev {
	position: absolute;
	top: 65px;
	left:75px
	z-index: -40;
}
#slideshow .prev { left: 50; }
#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 { display: block; }

/* Vers 2ème étape */
#s2:target #sContent { left: -300px; } /*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: -300px; } /*ou -200%*/
#s3:target .next, #s3:target .prev { display: none; }
#s3:target .prev3 { display: block; }

voici le html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page media</title>
    <link rel="stylesheet" href="test.css">
  </head>
  <body>
    <div id="slideshow">
      <div id="s1">
          <div id="s2">
              <div id="s3">
                  <a class="next next1" href="#s2">Image suivante</a> <!-- Pour la 1ère étape -->
                  <a class="prev prev2" href="#s1">Image précédente</a> - <a class="next next2" href="#s3">Image précédente</a> <!-- Pour la 2ème étape -->
                  <a class="prev prev3" href="#s2">Image précédente</a> <!-- Pour la 3ème étape -->
                  <ul id="sContent">                    
                         <li><img id="img1" src="test1.JPG" alt="Texture bleue" /></li><!--
                      --><li><img id="img2" src="test2.JPG" alt="Texture verte" /></li><!--
                      --><li><img id="img3"src="test3.JPG" alt="Texture brune" /></li>
                    </div>
                  </ul>
              </div>
          </div>
      </div>
  </div>

ox223252

6 mars 2019 à 17:30:00

tu veux faire un carrousel complet en CSS ?

si oui tu va avoir du mal et ça pas être beau (code spaghetti en perspective).

ton problème ce voit très bien quand tu supprime le overflow:hidden de #slideshow, tes éléments li ne son pas sur la meme ligne, ils sont en colonne.

sinon je t'ai un peu modifier le truc pour que ça face ce que tu veux :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page media</title>
    <style type="text/css">

#slideshow {
  position: relative;      /*le parent positionné*/
  left: 100px;
  width: 300px;          /*limite en largeur (1 élément du slideshow)*/
  height: 400px;         /*limite en hauteur*/
  overflow: hidden;      /*on cache ce qui déborde*/
}
#sContent {
  position: absolute;   /*on sort l'élément du flux*/
  top: 100px;               /*on le positionne précisément dans ...*/
  left: 0;              /*l'angle haut gauche de son parent positionné*/
  width: 300px;         /*ou 300% car 3 éléments*/
  margin: auto;
  padding: 0;
  z-index: 10;

  /*CSS3 transition*/
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}
#sContent div {
  width:900px;
}
#sContent img {
  display: inline-block;      /*on aligne les éléments du slideshow*/
  width: 300px;
  height: 300px;
}

#slideshow .next, #slideshow .prev {
  position: absolute;
  top: 65px;
  left:75px
  z-index: -40;
}
#slideshow .prev { left: 50; }
#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 { display: block; }

/* Vers 2ème étape */
#s2:target #sContent { left: -300px; } /*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: -600px; } /*ou -200%*/
#s3:target .next, #s3:target .prev { display: none; }
#s3:target .prev3 { display: block; }
    </style>
  </head>
  <body>
    <div id="slideshow">
      <div id="s1">
          <div id="s2">
              <div id="s3">
    <a class="next next1" href="#s2">Image suivante</a> <!-- Pour la 1ère étape -->
    <a class="prev prev2" href="#s1">Image précédente</a>

    <a class="next next2" href="#s3">Image précédente</a> <!-- Pour la 2ème étape -->
    <a class="prev prev3" href="#s2">Image précédente</a> <!-- Pour la 3ème étape -->
                  <div id="sContent"> 
                    <div>                   
                      <img id="img1" src="fleche.svg" alt="Texture bleue" /><img id="img2" src="fleche_r.svg" alt="Texture verte" /><img id="img3" src="fleche.svg" alt="Texture brune" />
                     </div>
                  </div>
              </div>
          </div>
      </div>
  </div>

la connaissance est une chose qui ne nous appauvrit pas quand on la partage.

Mon GitHub

Titoune80

9 mars 2019 à 17:55:21

merci beaucoup de l'aide après j'ai toujours un problème. déjà les deux première images marchent s'affichent bien avec le carrousel mais la 3 ème non. Je sais pas trop comment faire.

Et comment faire pour en rajouter une 4 ème une 5 ème ainsi de suite

ox223252

11 mars 2019 à 8:44:11

si tu veux tous savoir je pense que ce n'est pas le meilleur moyen de le faire, utilise plutôt js, car à chaque fois que tu vas vouloir ajouter une image ça va être galère.

si tu veux truc truc simple et fonctionnel en js regarde ici

et pour la troisième image, je n'ai pas le problème quand je test, tout s'affiche bien chez moi

pour rajouter une image en suivant ton système (qui est vachement bien pensé en passant), il va falloir : ajouter un niveau dans le DOM ( s4 / s5 / … ), ajouter une image dans le sContent, rajouter des liens image suivante/précédente et enfin dans le CSS changer la taille de la div slidehow (pour rajouter un el) et ajouter le control d'affiche pour la div que tu viens de rejouter #s4:target bref pour une quatrième image ça donne :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page media</title>
    <style type="text/css">

#slideshow {
  position: relative;      /*le parent positionné*/
  left: 100px;
  width: 300px;          /*limite en largeur (1 élément du slideshow)*/
  height: 400px;         /*limite en hauteur*/
  /* overflow: hidden;      /*on cache ce qui déborde*/
}
#sContent {
  position: absolute;   /*on sort l'élément du flux*/
  top: 100px;               /*on le positionne précisément dans ...*/
  left: 0;              /*l'angle haut gauche de son parent positionné*/
  width: 300px;         /*ou 300% car 3 éléments*/
  margin: auto;
  padding: 0;
  z-index: 10;

  /*CSS3 transition*/
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}
#sContent div {
  width:1200px;
}
#sContent img {
  display: inline-block;      /*on aligne les éléments du slideshow*/
  width: 300px;
  height: 300px;
}

#slideshow .next, #slideshow .prev {
  position: absolute;
  top: 65px;
  left:75px
  z-index: -40;
}
#slideshow .prev { left: 50; }
#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 { display: block; }

/* Vers 2ème étape */
#s2:target #sContent { left: -300px; } /*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: -600px; } /*ou -200%*/
#s3:target .next, #s3:target .prev { display: none; }
#s3:target .next3, #s3:target .prev3 { display: block; }

/* Vers 3ème étape */
#s4:target #sContent { left: -900px; } /*ou -200%*/
#s4:target .next, #s4:target .prev { display: none; }
#s4:target .prev4 { display: block; }
    </style>
  </head>
  <body>
    <div id="slideshow">
      <div id="s1">
        <div id="s2">
          <div id="s3">
            <div id="s4">
              <a class="prev prev2" href="#s1">Image précédente 1</a>
              <a class="next next1" href="#s2">Image suivante 2</a> <!-- Pour la 1ère étape -->

              <a class="prev prev3" href="#s2">Image précédente 2</a> <!-- Pour la 3ème étape -->
              <a class="next next2" href="#s3">Image suivante 3</a> <!-- Pour la 2ème étape -->

              <a class="prev prev4" href="#s3">Image précédente 3</a> <!-- Pour la 3ème étape -->
              <a class="next next3" href="#s4">Image suivante 4</a> <!-- Pour la 2ème étape -->

              <div id="sContent"> 
                <div>                   
                  <img id="img1" src="fleche.svg" alt="Texture bleue" /><img id="img2" src="fleche_r.svg" alt="Texture verte" /><img id="img3" src="fleche.svg" alt="Texture brune" /><img id="img4" src="fleche.svg" alt="Texture brune" />
                 </div>
              </div>
            </div>
          </div>
        </div>
      </div>
  </div>

PS : ici j'ai bloqué le hidden du slidehow pour voir toutes les images durant la transition ( juste pour voir que le mouvement ce fait bien )

la connaissance est une chose qui ne nous appauvrit pas quand on la partage.

Mon GitHub

Slide avec css

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

Slide avec css

Slide avec css

Supprimer

Modérer

Signaler le message aux modérateurs