Cherche a afficher 3 en colonnes des photos d'une requête en DIV

SebC · 09-03-2010 17:16:11

Bonjour,

Je cherche un exemple d'affichage sur 3 colonnes d'images issues d'une requête, puis passage à la ligne suivante avec 3 images.. etc
le tout en DIV pas en tableau.. si quelqu'un à un bout de code que je tenterai d'adapter à mes besoins... je suis preneur

Les exemples trouvés sur le net sont tous en tableaux

Merci,

Seb

xTG · 09-03-2010 19:30:06

De même je serai fort intéressé par le sujet... Et pas des DIVs qui prennent la taille de la page...
Cela fait plusieurs mois que je cherche sans rien avoir trouvé de concluant.

Par contre ce n'est pas la bonne section pour en parler. ^_-

Dernière modification par xTG (09-03-2010 19:30:39)

Pierrot · 09-03-2010 20:49:32

j'vois pas de problème
<div><img ..................../></div><div><img ..................../></div><div><img ..................../></div><br>

j'vois vraiment ce qu'il y a de compliqué
a++

xTG · 10-03-2010 06:57:49

Et ton br tu me le jette voilà ce qui va pas...
Car avec ta méthode rien n'est aligné suivant ce que tu mets dans tes divs Pierrot.
Faire trois divs à la suite c'est pas ça qui nous pose problème... Ce sont les contraintes à appliquer aux divs.
Et quand on cherche sur le net des solutions on tombe sur des trois DIVs pour design qui prennent toute la page (et utilisant des méthodes qui font qu'on ne peut les insérer ailleurs qu'à la souche du site) ou alors encore pire en position absolute...

Dernière modification par xTG (10-03-2010 07:00:07)

Maljuna Kris · 10-03-2010 08:55:05

Saluton,
Je ne peux que vous renvoyer vers les articles sur le positionnement CSS du site de l'OpenWeb Group

xTG · 10-03-2010 12:29:12

Tiens un site que je n'avais pas visité. Je m'en vais faire la liste des articles à lire.

Pierrot · 10-03-2010 18:18:47

Xtg->
explic ce sue tu veu faire ?
a++

xTG · 10-03-2010 18:54:29

Faire un "tableau" de DIV à trois colonnes qui puisse s'utiliser quelque soit le contexte.
Bref un table mais en div quoi...

Actuellement j'arrive à en faire un semblant en mettant les divs en float mais il fau absolument les mettre de la taille du conteneur sinon tu en récupères plus de 3 sur une ligne.
Et il se trouve un soucis bien plus chiant avec cette technique, le retour à la ligne... Si on fait un simple <br /> par exemple et qu'on met un objet quelconque à la suite, si cet objet peut se caser entre le troisième (et dernier) DIV et le bord droit du conteneur eh bien il s'y cale...
En bref ce sont des petits trucs comme ça super chiant que je n'arrive pas à gérer.

L'explication du problème des DIVs est pas facile...
Mais voici ce qu'on a avec des tables :

<table>blablablabla</table><br />Mon reste

Tout ce qui se trouvera après le <br /> sera bien à la ligne par rapport avec le table, mais avec les divs c'est une autre affaire en attribut float...

Dernière modification par xTG (10-03-2010 18:56:14)

SebC · 10-03-2010 23:27:20

Bonsoir,

Pas eu le temps de répondre à XTG, mais si tu trouve une piste, je reste preneur, je pense devoir me rabattre sur une solution en tableau..

Dans mon cas, j'ai par exemple 15 produits nommés avec l'ID et je souhaite les afficher sur 3 colonnes et n lignes (il pourrais y en avoir 10 de plus ou 6 de moins), en générant les DIV à la volée. Mais rien trouvé de probant, le modulo avec une table et des <TD> semble être la solution la plus utilisée.

Seb

Jc · 17-04-2010 00:55:07

Je veux bien vous aider, mais si je pouvais avoir un rendu visuel de ce que vous cherchez a faire, ca m'aiderait à comprendre où réside votre problème.
Déjà j'aimerais savoir si les cellules de votre tableau en div doivent avoir une taille fixe ou peuvent avoir une taille variable. Ensuite si elles peuvent avoir une taille variable, est-ce verticalement, horizontalement ou les deux? Quelles sont les parties qui doivent rester fixe quelque soit le contenu? Bref J'aimerais avoir le cahier des charges de vos contraintes de réalisation pour pouvoir répondre avec une solution "propre".

Dernière modification par Jc (17-04-2010 01:00:45)

xTG · 17-04-2010 09:50:33

Dans l'absolu je cherche quelque chose de générique afin de ne pas avoir trente-six classes css.
Donc cela inclut des tailles variables, même si pour 99% des cas où j'aimerai utilisé le css pour remplace mes tableaux les cases ont la même taille.

Cependant je ne comprend pas le "Quelles sont les parties qui doivent rester fixe quelque soit le contenu?". Parles-tu de déformation des divs suite à un gros contenu ?

Sinon pour le rendu c'est franchement la même que ce qu'on pourrait avoir avec un table que je recherche.
Par exemple ce simple code :

<table>

  <tr>

    <td>case 1</td>

    <td>case 2</td>

    <td>case 3</td>

    <td>case 4</td>

  </tr>

  <tr>

    <td>case 1</td>

    <td>case 2</td>

  </tr>

</table>

<br />

Un texte.

Je précise le retour à la ligne ainsi que le texte car j'ai pour le moment trouvé des solutions avec "float:left;" mais qui ne me satisfait que peu car on ne peut gérer le retour à la ligne correctement en dessous des divs s'ils ne font pas toute la largeur de notre conteneur.
Exemple :
----- -----
| | | |position de mon texte après <br />
| | | |
----- -----
position souhaitée après le <br />

Dernière modification par xTG (17-04-2010 09:51:10)

ManicoW · 17-04-2010 10:15:36

Bonjour,

xTG a écrit :

Bref un table mais en div quoi...

Note au passage a ce sujet, cela n'est bon que si ce table sert de présentation. Si le table est la pour présenter des données tabulaires (un truc que de toute facon sur papier on aurait mis en tableau, tel que des listes de stats ou ce genre de chose), les faire en div est bête (et non conforme a la philosophie html en plus )

Sinon, pour les questions de retour ligne suite a des float, en général une propriété css aide pour remettre d'aplomb, c'est la propriétaire clear. Typiquement utilisé en clear:both d'ailleurs.

Utilisé (peut être pas optimisé, y'a sans doute "plus beau", moi j'aime bien le fonctionnel) sur http://www.wdmedia-hebergement.net/ entre autre

@+

Jc · 17-04-2010 11:37:50

Bonjour,

Je précise le retour à la ligne ainsi que le texte car j'ai pour le moment trouvé des solutions avec "float:left;" mais qui ne me satisfait que peu car on ne peut gérer le retour à la ligne correctement en dessous des divs s'ils ne font pas toute la largeur de notre conteneur.

A ce propos, c'est à ça que sert un "float:left;", donc il n'est pas du tout approprié au rendu souhaité.
Ce qu'il faut se dire quand on fait un tableau avec div, c'est qu'il faut le construire comme un tableau sans div. C'est à dire qu'avant de déclarer des lignes et des colonnes, on doit créer un tableau avec <table></table>. Donc de même il faut créer un <div class="tableau"></div> conteneur de nos lignes et colonnes en <div></div>. De plus ce <div> conteneur doit obligatoirement être contenu dans un <div> qui dans un cas minimaliste represente le corps du document <body><div class="espacedetravail">...</div></body> et ce pour garder une autonomie complète sur la gestion de notre template. Le positionnement de ce <div class="tableau"> conteneur de notre tableau donc, sera positionné selon les CSS définies dans ce cas dans class="espacedetravail" et dans class="tableau" (dans ce dernier uniquement position:fixed ou position:absolute ou :relative). Ensuite il suffit de creer les cellules à l'interieur avec des div comme on le souhaite. Le texte apres le <div class="tableau"> sera automatiquement positionné en dessous et selon la classe class="espacedetravail". Un <br/> avant fera juste sauter une ligne au texte par rapport au div tableau.

xTG · 17-04-2010 14:42:24

@Jc :
Ok je comprends pour le conteneur tableau. Mais comment s'agence les cases ?
Car si je fais cela bêtement mes cases seront en colonnes. A moins que je n'ai pas compris et que tu parlais de mixer un position:relative; avec un float:left pour les cases ?

@ManicoW :
Mon utilisation est donc mauvaise, je voudrais remplacer un table qui se trouve être de la présentation de données.
Donc suivant ce raisonnement, les divs ne sont pas bon. Donc quoi utiliser ?

Jc · 17-04-2010 21:07:49

Alors pour les cases.
1) Travailler qu'avec des CSS.
2) Il faut caler ta largeur. C'est à dire que l'ensemble de tes div sur la premiere ligne représentant tes colonnes doivent remplir la largeur de ton tableau. Le mieux c'est de le faire en largeur fixe ou en % si besoin.
3) Toutes les lignes de ton tableau pouvant être indépendantes les unes des autres doivent toutes remplir la condition 2. Dans ton cas, si j'ai bien compris ce que tu veux faire, toutes les div cellule de ton tableau doivent avoir la meme largeur en fixe. N'oublie pas dans ton calage un padding 5px par ex sur toutes tes div pour régler l'ensemble de la largeur de ta ligne.
4) Pour la verticalité: plein de choses à dire...
4a) Pour avoir dans un premier temps un rendu stable et le temps de te familiariser avec la chose, définir une hauteur en fixe (px par ex) de ton tableau.
4b) Quel que soit le nombre de lignes visibles ou qui seront utilisées, remplir le tableau en vertical comme en horizontal. Une ligne non visible doit exister pour eviter un calage automatique de la div de la ligne du dessus.
4c) Cacher les div cellule que l'on utilise pas avec "empty-cells: hide;"
4d) Pour conserver les dimensions des cellules quel que soit son contenu, utiliser "overflow: auto;"

Voila, dans les grandes lignes je pense que tout y est.

xTG · 17-04-2010 21:11:47

Hum ok je vois mais mon problème persiste. Il manque quelque chose à ton explication, et c'est cette chose en fait qui me pose problème.

Si on fait ce code ci :

<div class="conteneur">

  <div class="cellule"></div>

  <div class="cellule"></div>

  <div class="cellule"></div>

</div>

Je vais obtenir trois cellules les unes en dessous des autres quelque soit les tailles que je fixe pour les cellules ou le conteneur.

Jc · 17-04-2010 22:42:09

Bon je suis désolé, mais visiblement je vais avoir du mal a expliquer par cette methode.
On peut le faire aussi avec float, et je pense que finalement ca sera plus facile. Seulement avec float vous oubliez 4b).
Suis peut etre pas assez bon pédagogue. Alors pour me faire pardonner j'ai pris 15min pour vous dev un peu de code avec float qui parlera mieux de lui-même
Pour le tester suffira de le copier coller dans une page html vide.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta content="fr" http-equiv="Content-Language" />

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<title>Tableau sans table html</title>

<style type="text/css">

.workspace {

  border: thin solid #800000;

  margin-right: auto;

  margin-left: auto;

  width: 518px;

  height: 493px;

}

.tableau {

  margin: 5px;

  padding: 5px;

  width: 497px;

  height: 468px;

  display: table;

  text-align: center;

}

.tablerow {

  width: 101%;

  height: 110px;

  border: thin dotted #C0C0C0;

  display: table-row;

  margin-bottom: 20px;

}

.tablecel {

  display: table-cell;

}

.cell_col_left {

  border: thin dotted #FF0000;

  padding: 5px;

  height: 100px;

  width: 150px;

  float: left;

  overflow: auto;

}

.cell_col_middle {

  border: thin dashed #008080;

  width: 150px;

  height: 100px;

  padding: 5px;

  float: left;

  margin-right: 5px;

  margin-left: 5px;

  overflow: auto;

}

.cell_col_right {

  float: right;

  width: 150px;

  height: 100px;

  padding: 5px;

  border: thin dotted #000000;

  clear: right;

  overflow: auto;

}

</style>

</head>

<body>

<div class="workspace">

  <div class="tableau">

    <div class="tablerow">

      <div class="cell_col_left"></div>

      <div class="cell_col_middle"></div>

      <div class="cell_col_right"></div>

    </div><br/><span>Bonjour</span>   

    <div class="tablerow">

      <div class="cell_col_left"></div>

      <div class="cell_col_middle"></div>

      <div class="cell_col_right"></div>

    </div>

    <div class="tablerow">

      <div class="cell_col_left"></div>

      <div class="cell_col_middle"></div>

      <div class="cell_col_right"></div>

    </div>

  </div>

</div>

</body>

</html>

Vous remarquerez que le margin-bottom 20px n'est pas pris en compte dans le rendu et ce à cause de display: table-row; dans la classe table_row. Suffit de retirer le display pour retablir l'affichage de la marge.

J'espère avoir aidé du monde^^.

Dernière modification par Jc (17-04-2010 22:56:23)

ManicoW · 17-04-2010 23:04:07

xTG a écrit :

@ManicoW :
Mon utilisation est donc mauvaise, je voudrais remplacer un table qui se trouve être de la présentation de données.
Donc suivant ce raisonnement, les divs ne sont pas bon. Donc quoi utiliser ?

"De la présentation de données", j'avoue que c'est bien vague mais si ce sont des données tabulaires (en gros, que tu mettrais sous forme de tableau en version papier, il faut utiliser... ben <table> and co, c'est justement fait pour ca (et pas pour faire des sites a 3 colonne )

Jc · 17-04-2010 23:28:03

C'est juste un exemple pour comprendre comment ca marche et apporter une réponse au problème posé.
A partir de cet exemple on peut faire y colonnes sur x lignes. Libre à vous de présenter avec la technologie de votre choix. Moi perso j'utilise un mix de table et de div, plus rapide à mettre en place et à maintenir, mais encore une fois c'est relatif et c'est une question d'habitude.

Dernière modification par Jc (17-04-2010 23:35:00)

xTG · 18-04-2010 09:30:43

Merci de l'exemple Jc, je l'étudierai lorsque j'aurai du temps.

Beh ManicoW... Mon soucis est que je souhaite pouvoir tout avoir dans le cache pour optimiser le chargement.
Or les table sont rechargés à chaque chargement contrairement aux div.

ManicoW · 18-04-2010 11:56:29

Heeuuuu, tu parle de quel cache la ??

xTG · 18-04-2010 12:34:34

Le cache navigateur.
Des divs sont moins lourds à charger car tout se porte avec la feuille de style.

J'avais lu un article là dessus très intéressant, ils faisaient la comparaison entre table et div en mettant en oeuvre de grosses pages.
La première tout en table était super lourde à charger contrairement à la seconde qui était en div.
Une même étude avait été faite en mettant toutes les configurations table dans une feuille de style (<table class="blaabla">), le chargement était moindre mais toujours moins intéressant que des divs.

Je vais peut être dire des bêtises mais le rapport de chargement était de 7, ce qui est loin d'être négligeable sur une page qui se charge en plus d'une seconde.

ManicoW · 18-04-2010 12:59:00

Ok, donc c'est la css qui est en cache, pas le div lui même (je me disais que je devenais fou).

Pour ma part, utiliser des div a la place des tables sur des données tabulaires, c'est idiot, pas que sémantiquement, mais aussi pour l'accessibilité (les système de restitution pour aveugles notamment vont rien y comprendre, et la personne derrière non plus. need d'ailleurs un de ces systèmes pour tester les solutions que je deploie, un jour).

Le facteur du temps de chargement (d'ailleurs chargement ou restitution du tableau ? est-ce vraiment le temps de transfert du serveur au poste client (qui ne devrait que peu varier, surtout dans le cas ou les configurations de table sont en css), ne serait ce pas plutot le temps du rendu (auquel cas de mémoire de spécifier en dur les dimension accélère le processus, puisque cela évite au navigateur de faire lui meme les calculs)) est il si important que ca.

Sur une page qui met longtemps a ce charger, oui, mais quelle est cette page si longue a charger ? pourquoi faire une page si lourde ? pourquoi ne pas diviser en sous page ? Après tout, les livres ont des pages, ce ne sont pas des listing sur une seule page dépliante (j'imagine la tronche du programme télé de 80 pages, 23m de long le bidule, quand tu cherche ton programme de la soirée du pleure).

Donc sauf cas très très très rare, a mon avis, on part là dans des subtilitées qui font oublier l'essentiel : l'érgonomie.

my 2 cents

@+

xTG · 18-04-2010 14:52:04

Ah mais je suis tout à fait d'accord avec toi pour l'accessibilité. Mais mon site n'est pas dans le but d'accueillir des aveugles ou autre, donc je ne me suis jamais posé comme contraintes tout ceci dans mon cahier des charges.

Je pense que c'est effectivement la restitution de tableau qui donne cette marge considérable, donc un effet de rendu.
Quant à parler de pages longues à charger il faut ensuite parler de serveur... Je n'ai pas un budget exponentiel, je n'ai pas des compétences inouïes dans l'optimisation malgré que je fasse de mon mieux. Lorsque je compare ce que je fais à ce que d'autres font il y a une énorme marge...
Sur un forum était déposé un sondage de chargement de page pour un même type de page (même si c'est franchement pas comparable selon moi vu qu'ils ont tous des systèmes différents pour un "même" rendu), j'ai tenté de faire une telle page et j'obtenais un chargement 10 à 20 fois plus long...
Voilà pourquoi je suis constamment à la recherche de ci de là d'optimisation, j'étais donc tombé sur le remplacement de table par des divs.

Mais je vais prendre en compte ce que tu as dit, j'ai un système d'affichage de case qui se finira un jour où l'autre, je testerai donc avec div et avec table histoire de me rendre compte moi même.

Jc · 20-04-2010 23:17:40

Si ca peux t'aider a comprendre pourquoi les tables sont plus longues a charger que les divs, voici les raisons que je connais (il doit y en avoir surement d'autres)
Le Parser du navigateur :
- ... examine le contenu de chaque cellule d'une ligne pour en calculer la hauteur. Solution : fixer explicitement la hauteur des lignes pour que le parser commence le rendu des lignes sans examen du contenu.
- ... moins il y a de dimensions fixes dans un tableau (+ il y a de %,em,etc...) plus le calcul de rendu sera long, car elle oblige une analyse de contenu préalable. (même système que précédement). Ce phénomène se démultiplie avec la grandeur et la complexité du tableau.
- Améliorer la vitesse de rendu passe par une opti de dimensionnement comme suit

<table style="table-layout:fixed" width=600>

<col width=100><col width=300><col width=200>

<tr height=20>

<td>...</td><td>...</td><td>...</td>

</tr>

:

</table>

- En peuplant un tableau par des colonnes de largeur fixe et ce quelque soit le contenu, améliore grandement les performances. > Par contre, j'en conviens, ca en complique d'autant le remplissage surtout quand on doit afficher des images^^.

Si vous avez d'autres raisons à votre connaissance merci de m'en faire part^^

PHP|Débutant :: Forums

Advertisement

#1 09-03-2010 17:16:11

Cherche a afficher 3 en colonnes des photos d'une requête en DIV

#2 09-03-2010 19:30:06

Re : Cherche a afficher 3 en colonnes des photos d'une requête en DIV

#3 09-03-2010 20:49:32

Re : Cherche a afficher 3 en colonnes des photos d'une requête en DIV

#4 10-03-2010 06:57:49

Re : Cherche a afficher 3 en colonnes des photos d'une requête en DIV

#5 10-03-2010 08:55:05

Re : Cherche a afficher 3 en colonnes des photos d'une requête en DIV

#6 10-03-2010 12:29:12

Re : Cherche a afficher 3 en colonnes des photos d'une requête en DIV

#7 10-03-2010 18:18:47

Re : Cherche a afficher 3 en colonnes des photos d'une requête en DIV

#8 10-03-2010 18:54:29

Re : Cherche a afficher 3 en colonnes des photos d'une requête en DIV

#9 10-03-2010 23:27:20

Re : Cherche a afficher 3 en colonnes des photos d'une requête en DIV

#10 17-04-2010 00:55:07

Re : Cherche a afficher 3 en colonnes des photos d'une requête en DIV

#11 17-04-2010 09:50:33

Re : Cherche a afficher 3 en colonnes des photos d'une requête en DIV

#12 17-04-2010 10:15:36

Re : Cherche a afficher 3 en colonnes des photos d'une requête en DIV

#13 17-04-2010 11:37:50

Re : Cherche a afficher 3 en colonnes des photos d'une requête en DIV

#14 17-04-2010 14:42:24

Re : Cherche a afficher 3 en colonnes des photos d'une requête en DIV

#15 17-04-2010 21:07:49

Re : Cherche a afficher 3 en colonnes des photos d'une requête en DIV

#16 17-04-2010 21:11:47

Re : Cherche a afficher 3 en colonnes des photos d'une requête en DIV

#17 17-04-2010 22:42:09

Re : Cherche a afficher 3 en colonnes des photos d'une requête en DIV

#18 17-04-2010 23:04:07

Re : Cherche a afficher 3 en colonnes des photos d'une requête en DIV

#19 17-04-2010 23:28:03

Re : Cherche a afficher 3 en colonnes des photos d'une requête en DIV

#20 18-04-2010 09:30:43

Re : Cherche a afficher 3 en colonnes des photos d'une requête en DIV

#21 18-04-2010 11:56:29

Re : Cherche a afficher 3 en colonnes des photos d'une requête en DIV

#22 18-04-2010 12:34:34

Re : Cherche a afficher 3 en colonnes des photos d'une requête en DIV

#23 18-04-2010 12:59:00

Re : Cherche a afficher 3 en colonnes des photos d'une requête en DIV

#24 18-04-2010 14:52:04

Re : Cherche a afficher 3 en colonnes des photos d'une requête en DIV

#25 20-04-2010 23:17:40

Re : Cherche a afficher 3 en colonnes des photos d'une requête en DIV

Pied de page des forums