28172 sujets

CSS et mise en forme, CSS3

Svp , aide pour arranger des images dans Grid 960

Bonjour à tous ,

voilà je travaille sur projet de vente de chaussure en ligne et je souhaiterai arranger les images que je récupère dans une base des données , entre des grilles comme celui du site de Zalando http://www.zalando.fr/boots-bottines-femme/ sauf que quand j'essai un code plus simple pour comprendre les grilles sur Grid 960 cela ne semble pas être comme prévu :
je suis confronter à 2 problèmes que je tente de résoudre :

1) comment arranger les images dans grid 960 à ce que chaque ligne on pourra insérer 4 images dans pour 1 grid_12 on fait grid_3 pour chaque image
2) le second souci c'est qu'on récupère les images (nom_path) dans la base donc il se peut qu'on ne connait pas le nombre d'image en fonction du résultat

pour comprendre Grid960 je me suis mis à coder un simple code ou je dois afficher des tableaux car sans doute les résultats de ma base c sous forme de tableau !



<body>


     <?php 
      $tableau = array(1,2,3,4,5,6,7,8,9,10);
     
     ?>
    
    <div class="container_12">
    <table border="1">
       
        <tbody>
            <tr>
                
                <?php  for($i=0;$i<10;$i++){?>
                    
                 
                <td class="grid_3" id="ligne"><?php echo $tableau[$i]; ?></td>
                 
                <?php    
                }
                ?>
                
               
            </tr>
        </tbody>
    </table>

</div>



</body>


en fait pour parcourir le tableau j'ai mis dans une boucle for sauf que le problème lors de l'affichage il n'y a que 3 cadres pour chaque ligne alors qu'ici j'ai mis grid_3 donc (3*4)
voici l'image :

http://img11.hostingpics.net/pics/367985grid.jpg

c'est à dire que les la dernière grille reste incomplète
j'iamgine qu'il faut faire div.clear mais je ne sais pas comment étant donné que c'est une boucle

2) mon deuxième problème revient au résultat de la base :

j'imagine que pour afficher les images dans la base je dois faire :



foreach($rresult as $r =>$value)
{
    //ici je mets les images 
    <td> echo $r->image ; </td>
}


voilà , mon souci c'est que comment arranger ce code pour qu'il soit bien conforme à Grid 960

merci pour votre aide Smiley sweatdrop
960gs + tableaux = catastrophe assurée.

Essaie plutôt de partir sur des div, comme expliqué sur le site http://960.gs.
Modifié par Kaelig (28 Feb 2012 - 14:07)
Bonjour ;

j'ai voulu faire comme çà mais après : impossible à afficher et en plus j'ai quelque souci ou je ne sais pas comment faire pour les div class="clear "



 <?php 
    
   //  var_dump($rows);
     
    // echo $rows['id'][0]; //12
      $result = count($rows['id']);//5
      
      //echo $result ; exit; 5
	  
	 //$identifiant = 96 ;
    
    
    // exit ; ?>
    
    <div class="container_12">
	
				<?php 
				  // ici on avance de 4
				for($i=0;$i<$result;$i+4)?>
	
					  <?php 
					  
						// 4 colonnes 
						for($j=0;$j<4;$j++)
						{
					  ?>
						
						  <div class="grid_3"><?php echo $rows['id'][$j];?></div>
					  <?php
						}
						?>
						
	

</div>


et même sans passer par une table :


 <?php 
    
   //  var_dump($rows);
     
    // echo $rows['id'][0]; //12
      $result = count($rows['id']);//5
      
      //echo $result ; exit; 5
	  
	 //$identifiant = 96 ;
    
    
    // exit ; ?>
    
    <div class="container_12">
	
				
	   <ul>
					  <?php 
					  
						// 4 colonnes 
						for($j=0;$j<$result;$j++)
						{
					  ?>
						
						  <li class="grid_3" id="ligne"><?php echo $rows['id'][$j];?></li>
					  <?php
						}
						?>
		
      </ul>		
	

	</div>


mais je crois que c le fait qu'on n'a pas mis div clear . mais avec la boucle je ne sais pas trop comment faire j'ai tenté à faire ceci 



<ul>
					  <?php 
					  
						// 4 colonnes 
						//for($j=0;$j<$result;$j++)
						
							$i = 0 ; 
							$j=0;
						
						while($j<$result)
						{
								if($i==4)
								{
								   $i =0;
								   
						 ?>
								     <li class="grid_3" id="ligne"><?php echo $rows['id'][$j];?></li>
									 <div class="clear"></div>
									 
						<?php 
								
								}
								else
								{
						  ?>
									<li class="grid_3" id="ligne"><?php echo $rows['id'][$j];?></li>
						  <?php 
								
								
								}
					  ?>
						
						  
					  <?php
							$i++;
							$j++;
						}
						?>
		
      </ul>

Modifié par ludo31 (28 Feb 2012 - 19:33)
Ton code PHP ne nous aidera pas, tu peux par contre disposer ton code HTML et CSS sur jsfiddle ou dabblet.

En règle générale, on dispose le clear après les flottants, de cette manière :


<div class="container_12">
  <div class="grid_3"></div>
  <div class="grid_3"></div>
  <div class="grid_3"></div>
  <div class="grid_3"></div>
  <div class="clear"></div>
</div>

Modifié par Kaelig (28 Feb 2012 - 19:51)
çà marche , j'ai trouvé la solution en s'insiprant de que vous m'avez dit 


$i = 0 ; 
	$j=0;
						
	while($j<$result)
	{
            // tester 3 choses 

if($i==0) // debut alpha 
<li class="grid_3 alpha"
$i ++;

else 
{

  if ($i==3){

$i =0;
<li class="grid_3 omega"
<div class="clear"></div>
}
else {
// ligne simple 
<li class="grid_3"
$i ++;

}


}
$j++
       }
Sujet clos
Aller à