Bonjour,

Je suis entrain de développer un site internet qui servira d'application de présentation de menu en HTML/CSS et Jquery (je suis encore débutante). J'utilise des miniatures d'images cliquables pour agrandir l'image et voir la description sur une "fausse fenêtre" qui s'ouvre par dessus ma page web , j'ai disposé ces miniatures à l'aide d'une flexbox, sauf que quand je clique sur une des miniatures et que ma fenêtre s'ouvre, les miniatures de ma flexbox bougent et rendent le tous pas très propre. Je ne sais pas si je suis claire, mais voici des captures d'écran :

et le code :

		<div class="produits">
		
			<div id="fraise" class="choix4">
				<img src="images/milkshake/fraise.jpg">
				<h3> Shake Up Fraise </h3>
				<p class="desc">
				Asdflkjaertvlkjasntvkjn (sits on keyboard) eat the fat cats food so chew on cable i cry and cry and cry unless you pet me, and then maybe i cry just for fun. Rub whiskers on bare skin act innocent
				</p>
				
				<p class="prix">
				4€
				</p>
			</div>
			
			<div id="chocolat" class="choix4">
				<img src="images/milkshake/chocolat.jpg">
				<h3> Shake Up Chocolat </h3>
				<p class="desc">
				Love to play with owner's hair tie ask to go outside and ask to come inside and ask to go outside and ask to come inside, so kitty scratches couch bad kitty destroy couch as revenge so lick butt hunt anything that moves
				</p>
				
				<p class="prix">
				5€
				</p>
				
			</div>
			
			<div id="vanille" class="choix4">
				<img src="images/milkshake/vanille.jpg">
				<h3> Shake Up Vanille </h3>
			</div>
			
			<div id="banane" class="choix4">
				<img src="images/milkshake/banane.jpg">
				<h3> Shake Up Banane </h3>
			</div>
			
			<div id="rainbow" class="choix4">
				<img src="images/milkshake/rainbow.jpg">
				<h3> Route arc-en-ciel </h3>
			</div>
			
		</div>
		
		<div class="hidden">
			<div class="window">
				<img src="images/croix.png" class="croix">
				<h5 id="title">  </h5>
				

				<img src="" id="pic">

				
				<p id="description">
				<br />
				<br />
				<div id="price"> </div>
				
				</p>

			</div>
		</div>

.choix2 {
	margin-top:2%;
	margin-left:2%;
	display:flex;
	flex-direction: column;
	z-index:2;
}

.choix3 h2 {
	font-family:titre;
	font-size:25px;
	letter-spacing:2px;	
}


.choix2 a {
	border:3px solid black;
	width:10%;
	text-align:center;	
	margin-bottom:30px;
	display:block;
	height:100%;
}

#bubbletea {
	background-image:url('images/bubbletea.jpg');
}

#milkshake {
	background-image:url('images/milkshake.jpg');
}

#cocktail {
	background-image:url('images/cocktail.jpg');
}

#soda {
	background-image:url('images/soda.jpg');
	z-index:2;
}

.produits {
	z-index:1;
	width:50%;
	margin-top:-400px;
	margin-left:28%;
	display:flex;
	flex-wrap:wrap;
    justify-content: space-around;
}

.choix4 {
	margin-right:50px;
	margin-bottom:50px;
}

.choix4 img {
	width:140px;
	height:140px;
}

h3 {
	font-family:description;
	font-size:16px;
}

.desc {
	display:none;
	color:rgba(0,0,0,0.0);
}

.prix {
	margin-left:60px;
	margin-top:-10px;
	font-size:18px;
	font-family:description;
}

/*////////////////////
IMG OPEN
////////////////////*/

.choix4
{ 
  -webkit-transition: .4s ease-in-out;
     -moz-transition: .4s ease-in-out;
      -ms-transition: .4s ease-in-out;
       -o-transition: .4s ease-in-out;
          transition: .4s ease-in-out;
}

.hidden {
	z-index:3;
	position:absolute;
	top:0;
	background-color:rgba(0,0,0,0.6);
	width:100%;
	height:1000px;
	display:none;
}

.window {
	z-index:3;
	position:absolute;
	width:50%;
	height:50%;
	background-color:white;
	top:115px;
	left:25%;
	padding:15px;
}

.croix {
	position:absolute;
	margin-left:89%;
	margin-top:1%;
	
}

h5 {
	font-family:titre;
	font-size:45px;
	letter-spacing:2px;
}

#title {
	margin-top:0px;
}

#pic {
	margin-top:-50px;
}

#description {
	width:50%;
	margin-left:50%;
	margin-top:-300px;
	font-family:description;
	color:black;
}

#price {
	font-size: 35px;
	margin-left:70%;	
}

J'ai déjà cherché sur google, j'ai essayé en changeant les valeurs des propriétés "position" mais je n'ai pas trouvé de solution qui fonctionne avec mon cas, où je m'y suis mal prise. Des idées ?

Merci par avance !

As-tu essayer de donner à la classe choix4 la propriété display inline-block. Sinon comme l'a dit vicompte, penses à nous donner ton code en entier qu'on puisse le tester car le problème vient peut-etre de ton code js

Cordialement

Bonsoir ! D'abord merci pour vos réponses ! La propriété display inline-block ne change rien, et effectivement j'ai oublié le javascript, le voici :

 $(function() {
	 

	 $(".choix4").click(function() {
		 
		 var $titre = $('h3',this).text();
		 var $image = $('img',this).attr('src');
		 var $description = $('.desc', this).text();
		 var $price = $('.prix', this).text();
		 
		$('.hidden').css('display','inline');	
		$('#title').html($titre);
		$('#title').css('margin-top','0px');
		$('#title').css('font-family','titre');
		$('#title').css('font-size','45px');
		$('#title').css('letter-spacing','2px');
	
		$('#pic').attr('src',$image);
		
		$('#description').html($description);
		$('.desc').css('display','inline');
		
		$('#price').html($price);
		
	 });
	 
	 $(".croix").click(function() {
		 $('.hidden').css('display','none');
		 $('#title').empty();
		 $('#pic').empty();
		 $('#descrption').empty();
		 $('.desc').css('display','none');
		 $('#price').empty();
		 
	 });
	 
	 

}); 

Bonne soirée !

Euh je m'avance peut-être mais essaye de définir display sur block pour ta classe .hidden après le clique sur l'image

-
Edité par Gaspard98 21 août 2017 à 22:19:42