Mise en forme de div avec css

Bonjour à tous,

j'ai un problème de structure de div et je voudrais votre aide n'étant pas du tout dans mon domaine de compétence je galère...

Pour résume , j'ai un container de 960 px qui contient un ensemble de div "image" de 159 px que j'ai positionné en float left et j'ai pour chaque div "image" un div "content" de 960 px que je cache .

Je veux faire apparaitre le div "content" au clic de l'image correspondante et le positionner en dessous de la ligne du div "image". Les processus jquery sont en places , le seul soucis c'est que lorsque je fais apparaitre mon div "content" cela déplace tous les autres div "images" d'en haut en bas du div "content" alors que je voudrais avoir la ligne des div "image" toujours en place en haut.


Voilà ma tentative de css :

.container{

width:960px;

}


.image{

float:left;
position: relative;

}


.content{

position:relative;
width:960px;
float:left;

}

Et pour bien comprendre ce que je souhaite faire, c'est exactement le même effet que sur ce site :

http://www.eatsushi.fr/shop cliquer sur une image et vous voyez un div de contenu apparaitre en dessous.

Merci pour votre aide .

Salut,

Difficile de t'éclairer sans un peu plus de code ou un lien...
Mais si ça peut aider, dans l'exemple que tu donnes, il y a un "content" (comme tu l'appelles) en dessous de chaque ligne (dont le contenu est mis à jour via JS) et non à l'intérieur de chaque "image"...

tm

Un truc comme ça ferait l'affaire :

<ul>
	<li><img src="chemin/image.jpg" alt="mon image"></li>
	<li><img src="chemin/image.jpg" alt="mon image"></li>
	<li><img src="chemin/image.jpg" alt="mon image"></li>
	<li><img src="chemin/image.jpg" alt="mon image"></li>
</ul>

<div class="content" style="display:none;">
	Ici le contenu caché de mon div
</div>

ul:after{display:block;content:"";clear:both;}
ul li{float:left;width:159px;display:block}

Modifié par SuperMerguez (09 Aug 2012 - 16:14)

Voilà mon code qui génère l'ensemble des div :

<div class="container">
 
 
		  <?
		 $tab=array("test-vignette1.jpg","test-vignette2.jpg","test-vignette3.jpg","test-vignette4.jpg","test-vignette5.jpg","test-vignette6.jpg");

		 for($i=0;$i<30;$i++){
		 $vignette=rand(0,5);
		 
		 ?>
		 
		 
		 <div class="image"><img src="img/spacer.gif"  data-original="img/<?=$tab[$vignette]?>" width="<?=$size?>" height="<?=$size?>" /></div>
		 
		 <div class="content" style="display:none;">
		
	  
	
  <img src="img/test-middle.jpg" width="320" height="320" />
  
 
		 
		 
		 </div>
		 
		 
		 <?}?>
		 
 
 </div>
 

et le jquery qui va bien pour faire apparaitre les div "content"

$(function() {
	
		
		$('.image').each(function() {

		

			$(this).click(function() {

			

			$(this).next('div').slideToggle();


			});


			

		});

Modifié par worm1 (09 Aug 2012 - 17:23)

SuperMerguez a écrit :
Un truc comme ça ferait l'affaire :

<ul>
	<li><img src="chemin/image.jpg" alt="mon image"></li>
	<li><img src="chemin/image.jpg" alt="mon image"></li>
	<li><img src="chemin/image.jpg" alt="mon image"></li>
	<li><img src="chemin/image.jpg" alt="mon image"></li>
</ul>

<div class="content" style="display:none;">
	Ici le contenu caché de mon div
</div>

ul:after{display:block;content:"";clear:both;}
ul li{float:left;width:159px;display:block}

Merci pour cette solution mais ca ne marchera pas , j'ai besoin d'avoir un div "content" pour chaque div "image" .