Afficher sur n colonnes en CSS

16 Avril 2008 par Devil Can't Burn

Afficher le résultat d'une requête sur 3 colonnes par exemple peut facilement se faire grâce à ce bon vieux MODULO. Ici je vais vous montrer comment réaliser la même chose mais en CSS... Une technique idéale pour une boutique.

Suite à de nombreuses critiques sur ma technique, sur bon nombre de forums, je tiens à préciser que cette technique nécessite tout de même un contrôle du contenu à afficher. Cette technique est idéale dans une application où les infos sont de même attribut, longueur de texte, taille de photo, etc... donc idéal pour une boutique en ligne par exemple...
Fin de la précision.

La structure XHTML et la requête MySQL

Un simple requête pour afficher nos résultats sortis d'une table. Je ne commenterai pas comment se connecter à une base de donnée... Trop de tutoriaux le font pour moi Smiley

.
Nous ne verrons que la structure de notre affichage en 3 colonnes.

Code HTML entre <body> et </body>

<div
id="tableau"> <!-- Notre Div principale qui
intègrera l'affichage des 3 colonnes. !-->

<?

$query = "SELECT * FROM $table";

$resultat = mysql_query($query);

while($item = @mysql_fetch_object($resultat)) 

{ ?>

<div class="item">

<p> <? echo $item->nom ;?></p>

<p> <? echo $item->prenom ;?></p>

</div>

<? } ?>

<br class="clear;">

</div>

#tableau {

width:600px;

height:100%; /*IE Hack... on sait jamais*/

}

#tableau .item {

width:180px;

padding:10px;

margin:0 0 10px 0;

border-bottom:3px solid #F09;

float:left;

}

#tableau .clear { clear:both; }

#tableau p{margin:0; padding:0;}

Avantages de cette technique

Rapide à mettre en place car le code est allégé.

Flexibilité et fluidité du design de l'affichage de vos enregistrements

Plus besoin d'essayer de comprendre Modulo ! (même si c'est ultra simple, certains galèrent encore...)

Voir l'exemple de ce tutoriel
Voir l'exemple d'une boutique...

Voilà,
Amusez-vous!

1 Commentaires

Frenzi a écrit le Mercredi 16 Avril 2008 à 06H59

Fabuleux ! Rien n'est compliqué et pourtant je n'avais jamais vu cette technique appliquée.... bien joué !

Devilcantburn.com