Mosaique, liste, vignette

[smookyone]

Bonjour,

Il est bien à la mode aujourd'hui de voir sur les sites de ventes des possibilitées d'affichage des articles en mosaique, liste, et vignette à l'aide de boutons.

J'ai creer un site mais je n'ai que l'affichage classic en liste avec la fonction répéter, je fait appel à mes articles dans ma base de données et je les répètes en nombre voulu et ils s'affichent en dessous des uns des autres.

Quelqu'un aurait-il un exemple d'affichage en Mosaique ou Liste ou carément une page avec ses 3 choix ?

Je penses que ça se passe au niveau des CSS tout ça mais j'en suis pas sur..

Merci d'avance pour votre aide..

[Muchos]

J'imagine : vous proposez 3 articles.
Vous en avez fait une liste dans votre code html.

Code html :

1
2
3
4
5
<ol>
<li><a href="page-produit1.htm"><img src="image-produit1" /></a></li>
<li><a href="page-produit2.htm"><img src="image-produit2" /></a></li>
<li><a href="page-produit3.htm"><img src="image-produit3" /></a></li>
</ol>

Visuellement, le rendu sera une liste numérotée (balise <ol>).
Avec le CSS, vous pouvez :

• enlever les numéros de la liste.

Code css :

li {list-style-type: none;}

• en faire des vignettes, des mosaïques… des blocs, quoi.

Code css :

1
2
li {display: inline;}
a {display: inline-block; /* ajouter ici d'autres mises en forme ;) */}

Une dernière chose : si l'utilisateur doit pouvoir switcher entre un rendu liste et un rendu mosaïque, il s'agit d'une application riche ; et vous devez utiliser un langage approprié (PHP, JS…)

[smookyone]

Bonjour,
Merci beaucoup pour votre réponse, mais j'utilise la fonction répéter en php, ce qui me permet d'afficher le nombre voulu d'article désiré, ou de mettre tout les articles de la base de données, voici mon code :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
					<?php do { ?>
                    <ol>
                    <li>
                      <table width="200" border="1">
                        <tr>
                          <td><p><a href="../store/articles.php?id=<?php echo $row_article1['id']; ?>"><img src="imagebrowser/<?php echo $row_article1['isbn']; ?>.png" alt="" width="60" height="60" class="imgindent" /><span class="article_droite"><strong><?php echo $row_article1['titre']; ?><strong><img src="imagebrowser/logos/<?php echo $row_article1['logo']; ?>.png" alt="" width="80" height="20" /></strong></strong></span></a></p>
                            <p><span class="prix"><?php echo $row_article1['prix_ttc']; ?> CHF.- <br />
                              <?php if ($row_article1['prix_rab'] > 0) { // Show if recordset not empty ?>
au lieu de <span class="prix_rab"><?php echo $row_article1['prix_rab']; ?> CHF.-</span></span><?php } // Show if recordset not empty ?></p></td>
                        </tr>
                      </table>
                      </li>
                      </ol>
					  <?php } while ($row_article1 = mysql_fetch_assoc($article1)); ?>

J'y ai inscrit les balises li et ol comme vous me l'avez montrer, et j'ai ajouté les styles css aussi, mais rien ne fonctionne, peut-être voyez vous une erreur dans le code ? merci d'avance...