Quatre blocs à positionner

Bonjour à tous,

Je suis actuellement en train de réaliser un site dans lequel j'ai une page où sont classifiés en 4 catégories des aliments.

Tout est généré via PHP, et il ne me reste donc plus qu'à mettre en forme comme ceci :

http://img186.imageshack.us/img186/1857/exemplesp3.gif

Pour le moment, j'ai 4 blocs (chacun d'une couleur) dont la hauteur est indéterminée, chacun rempli d'une liste d'aliments.

Que me proposeriez-vous pour les disposer comme je le souhaite ?

Je vous remercie d'avance,


Sephi-Chan
Modifié par Sephi-Chan (26 May 2007 - 13:31)

Bonjour, deux possibilités :
- la plus simple : faire un tableau de mise en forme (deux lignes, deux cellules par ligne) ;
- la plus compliquée :

<div id="ligne1">
<div class="gauche">...</div>
<div class="droite">...</div>
</div>
<div id="ligne2">
<div class="gauche">...</div>
<div class="droite">...</div>
</div>

Les div.gauche sont flottants à gauche. Les div.droite ont une marge à gauche de la largeur des div.gauche. Avec les div#ligne1 et div#ligne2, on gère le dépassement des flottants, et on applique une image de fond pour dessiner des colonnes factices.

Faire des recherches sur le dépassement des flottants et les colonnes factices, si besoin.


Si je devais le faire moi... je le ferais peut-être sans tableau de mise en forme, ou peut-être avec un tableau. Suis pas sûr.

Dans l'idéal, par contre, j'aurais utilisé display: table-cell, mais bon...

Salut,
un truc comme ça aussi

<div style="width:600px; height:600px;">
	<div id="right1" style="float: right; width: 300px; height: 300px; background-color:yellow;"></div>
	<div id="left1" style="float: left; width: 300px; height: 300px; background-color:red;"></div>
	<div id="right2" style="float: right; width: 300px; height: 300px; background-color:black;"></div>
	<div id="left2" style="float: left; width: 300px; height: 300px; background-color:orange;"></div>
</div>

marche pour ie6/7 et ff, les autres, sais pas
oeuf corse, les styles en ligne sont juste là pour l'exemple et à virer dans le monde réèl

Maintenant, comme florent, il se peut que je laisse provisoirement mon missel au vestiaire sur un coup comme ça et la joue tableau, simple, solide, ultra compatible, arghh

Have swing
Modifié par virtualgadjo (26 May 2007 - 16:18)

Merci pour ces réponses, j'avais commencé comme l'a expliqué Florent V.

Hélas, le soucis est que, pour les deux blocs du bas, ça ne fonctionne pas.

Je me retrouve avec :

http://img149.imageshack.us/img149/7304/exemple2up2.gif

Car la colonne de gauche est bien plus grande que celle de droite.


Sephi-Chan, qui déteste les floats

virtualgadjo a écrit :
Maintenant, comme florent, il se peut que je laisse provisoirement mon missel au vestiaire sur un coup comme ça et la joue tableau, simple, solide, ultra compatible

Et tu ferais bien, car la solution que tu donnes est moins accessible et moins robuste.
Moins robuste :
- remplissage pile poil au pixel près de l'espace horizontal par des flottants = énorme probabilité de passage des flottants à la ligne au moindre imprévu.

Moins accessible :
- hauteur fixe ;
- ordre visuel et ordre du code inversés, ce qui sera problématique si on doit lire d'abord le bloc de gauche puis celui de droite.

Sephi-Chan a écrit :
Car la colonne de gauche est bien plus grande que celle de droite.

À partir du moment où tu ne passes pas par un tableau mais par des flottants, il va falloir que tu bosses :
1 - le dépassement des flottants ;
2 - les colonnes factices.
(Ce que j'avais déjà précisé dans mon précédent message, mais il n'est jamais inutile de se répéter...)

Est-ce que c'est fait ?

Dur, dur avec ma connexion qui fait le yoyo.

En regardant (entre autre) sur Pompage.net - Les colonnes factices je ne comprends pas en quoi ça peut me servir.

Ensuite avec Initiation au positionnement CSS : 2.position float, j'ai eu quelques résultats ; ma colonne violette va au même niveau que la rouge, mais le contenu est chassé.


Sephi-Chan, pour qui les flottants sont bien mystérieux...

Sephi-Chan a écrit :
En regardant (entre autre) sur Pompage.net - Les colonnes factices je ne comprends pas en quoi ça peut me servir.

À avoir une colonne violette et une colonne rouge de la même hauteur (du moins : à en donner l'impression par un effet de trompe l'oeil), quelle que soit l'importance des contenus dans chaque colonne.

Pour le dépassement des flottants, je pensais plutôt à ceci :
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html
(1er lien dans Google sur la requête « dépassement flottants »)

Ça sera nécessaire pour pouvoir utiliser la technique des colonnes factices. C'est à dire que si l'on place une image de fond sur le conteneur de chaque couple colonne gauche+colonne droite, il faut encore que ce conteneur englobe bien le flottant qu'il contient.

Au fait, quels sont les contenus à organiser ainsi ?

Bonjour,

Si les colonnes factices peuvent t'aider à condition de toujours savoir lequel des 2 blocs sur la même ligne sera le plus long !! Il suffira alors d'englober tes 2 blocs dans un div ayant en le background du plus court.

Sinon peut être voir du côté de min-height, se sera peut être plus simple

C'est destiné à classifier en quatre catégorie des aliments, pour une page de régime que je fais pour quelqu'un.

Le soucis est que le code PHP est assez compliqué puisque je ne laisse rien au hasard de ce côté, chaque bloc ouvert est fermé.

Et comme avec ces étranges techniques ils faut créer des blocs bidons, c'est difficile à intégrer au milieu de la boucle. Ce qui ne facilite pas leur mise en place.

Du coup ça m'énerve, et je vais pas tarder à laisser tomber, du coup la personne va prendre du poids, et ce sera la faute de CSS !

Il n'y à vraiment aucune méthode simple et fiable (j'entends par là "qui ne relève pas de 100% de bidouille) de faire ce que je cherche ?


Sephi-Chan

ghost a écrit :
Si les colonnes factices peuvent t'aider à condition de toujours savoir lequel des 2 blocs sur la même ligne sera le plus long !

Heu... non.
Je ne vois pas trop ce qui impose cette restriction à partir du moment où on utilise les flottants (ou plutôt : un flottant).

ghost a écrit :
Il suffira alors d'englober tes 2 blocs dans un div ayant en le background du plus court.

Ça n'est pas la technique des colonnes factices, mais une technique décrite dans un tutoriel sur Alsacréations, tutoriel que je ne retrouve plus d'ailleurs.

ghost a écrit :
Sinon peut être voir du côté de min-height, se sera peut être plus simple

Ce n'est à priori pas nécessaire, et pas vraiment optimal.

Encore une fois, si on veut faire simple, on utilisera un tableau.

Sephi-Chan a écrit :
Il n'y à vraiment aucune méthode simple et fiable (j'entends par là "qui ne relève pas de 100% de bidouille) de faire ce que je cherche ?

La méthode simple et fiable qui permet de générer des blocs de code (disons 4) puis de les mettre en forme comme un tableau 2x2, sans être obligé de rajouter des éléments pour marquer les lignes (div ou tr), c'est le display: table-cell. Qui n'est pas implémenté par IE.

Si cette personne prend du poids, ce sera donc la faute non pas aux CSS, mais à l'implémentation partielle des CSS par Internet Explorer.

Bref, quelle que soit la méthode choisie, il faudra des éléments regroupant tes blocs deux par deux : soit une ligne de tableau (tr), soit une div pour l'image de fond de la technique des colonnes factices et la gestion du dépassement des flottants.

Et franchement, faire ça en PHP ça n'est pas la mort. Un petit peu de modulo, et c'est dans la boite.
Modifié par Florent V. (26 May 2007 - 21:52)

Salut,
@Florent,
je suis assez d'accord avec ce que tu réponds à mon petit tétrix, je ne le donnais que pour reproduire pile poil l'image donnée comme exemple, 4 blocs de hauteurs et largeurs égales parce qu'il paut arriver que ce soit la demande (si, si ), après pour le contenu, ça se gère (si, si aussi)

Maintenant s'il faut que ce soit souple, comme je l'ai dit je te rejoins d'autant plus facilement que pas ayatollah anti tableau pour deux sous. J'suis snob mais n'ai pas de religion ! Je dirais même que ça me fait assez plaisir ici de voir une démo pro tableaux ...

have swing
Modifié par virtualgadjo (27 May 2007 - 07:41)