Discussion :

[kate59]

bonjour,
je voudrais créer un site qui affiche mes categorie de serie comme ce site:
http://www.sky-animes.com/index.php?...ategorie&cat=8
dans des cadre avec des images sur 3 colonnes et 2 lignes mais sans tableau comment pourrais je m y prendre pour obtenir ce résultat.
merci.

[ThomasR]

Tout simplement en agrémentant légèrement ton fichier CSS.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
.SelfClear:after {content:".";display:block;clear:both;height:0;visibility:hidden;} /* SelfClearing Elements */
.Categorie {float:left;width:230px;margin:10px;}

Au passage :
SelfClearing IE7

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
.SelfClear {display:inline-block;} /*IE7*/
.SelfClear {display:block;} /*IE7*/

SelfClearing IE6

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
* html .SelfClear {display:inline-block;} /*IE6*/
* html .SelfClear {display:block;} /*IE6*/
/*\*/* html .SelfClear {height: 1%;} /*IE6*/

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<div class="SelfClear">
     <div class="Categorie">
           <a href="" title="Amatsuki">Amatsuki</a>
           <img src="" alt="" /> 
     </div>
     <div class="Categorie">
           <a href="" title="Amatsuki">Amatsuki</a>
           <img src="" alt="" /> 
     </div>
     <div class="Categorie">
           <a href="" title="Amatsuki">Amatsuki</a>
           <img src="" alt="" /> 
     </div>
     <div class="Categorie">
           <a href="" title="Amatsuki">Amatsuki</a>
           <img src="" alt="" /> 
     </div>
     <div class="Categorie">
           <a href="" title="Amatsuki">Amatsuki</a>
           <img src="" alt="" /> 
     </div>
</div>

Il suffit de faire des <div> qui font un peu moins de 1/3 (car "margin") de l'espace alloué à leur affichage. Etant donné qu'une 4eme catégorie n'aura pas la place de s'afficher a la gauche de sa précédente, elle ira à la ligne.

nb : la classe SelfClear sert à palier au problème des éléments flottants n'ont pas de hauteurs. À cause de çà leur conteneur n'a pas de hauteur non plus. Pour palier à ce problème il suffit, pour les navigateurs récents, d'utiliser la pseudo classe :after qui ajoute un point invisible à la fin du contenu du conteneur. Pour IE6 et IE7 c'es de la bidouille.

[kate59]

merci de votre reponse j ai essayer votre code mais les liens vont a la ligne comme convenu il affiche amatsuki sur 1 colonne sans s'etaler sur 2 colonnes.
merci voici le resultat en image. je souhaiterai qu il s'affiche sur 3 colones et 2 lignes. a tu un conseil.

[kate59]

merci je m etais tromper je suis contente d 'avoir eu de l aide.

[kate59]

merci de ton aide j ai prit ton idée en mettant une base sql pour afficher les donnée mais maintenant il s 'affiche que sur une colonne aurai tu une idée voici le code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
		$liste_categorie = mysql_query('SELECT * FROM categorie_annonce');
 
		while( $categorie = mysql_fetch_assoc($liste_categorie) )
		{
 
		$contenu.='
 
 
		<div class="SelfClear">
     <div class="Categorie">
           <a href="index.php?categorie='.strtolower($categorie['libelle-categorie']).'">'.$categorie['libelle-categorie'].'</a>
 
     </div>
 
	</div>';
	}

[ThomasR]

Oui bien sur,
Pour comprendre il t'aurais suffit de regarder le HTML que j'ai écris, puis, le HTML que tu génères.

Moi je n'ai qu'un <div class="SelfClear"/>, ce <div/> contient les éléments flottants (<div class="Categorie"/>).

Autrement dit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
echo '<div class="SelfClear">';
while($categorie = mysql_fetch_assoc($liste_categorie))
     {
     echo ' <div class="Categorie">
                       <a href="index.php?categorie='.strtolower($categorie['libelle-categorie']).'">'.$categorie['libelle-categorie'].'</a>
                </div>';
     }
echo '</div>';