Combinaison de div complexe

Bonjour,

J'ai une combinaison d'images un peu complexe à faire dans une galerie photo :



Je pensais tout mettre en float:left sauf la grande (en float:right). Et ça marche.
Mais avec les légendes (n° des photos), ça se complique et je n'y arrive plus.
Comment feriez-vous ?

Bonjour,

On pourrait jouer de manière un peu organisée avec des blocs flottants (indice: commencer par faire deux grands blocs, puis dans le bloc de gauche on placera les quatre plus petits). On pourrait aussi travailler avec un tableau de mise en page, pourquoi pas.

Mais si les dimensions des différents blocs sont connues, et si les contenus sont déjà déterminés (notamment: une image pour chacun trois des petits blocs, une image pour le grand bloc, et du texte uniquement dans le quatrième petit bloc, en quantité réduite), on gagnera du temps en travaillant avec des éléments positionnés en absolu, ayant des dimensions fixes.

J'ai oublié de préciser que je travaille avec un CMS (Joomla!), donc je ne fais pas ce que je veux.

Chaque élément doit correspondre à une classe "explicite" dans une liste, de façon à ce que le propriétaire du site mette son article en forme facilement avec l'éditeur wysiwyg.
Je pense que je vais opter pour l'absolu.

Merci de ton aide !

Bonjour

Pourquoi ne pas utiliser une liste de définitions pour afficher les petites photos avec leurs légendes, à l'instar de ce qui est proposé sur Pompage ?
Ou une liste à puce, qui se prête assez bien à ce genre de mise en forme.

Ericf a écrit :
Pourquoi ne pas utiliser une liste de définitions pour afficher les petites photos avec leurs légendes, à l'instar de ce qui est proposé sur Pompage ?
Ou une liste à puce, qui se prête assez bien à ce genre de mise en forme.

Dans les deux cas, quel serait le gain exactement?

De plus, ça me semble surtout compliquer inutilement le travail de mise en page.

Par contre, ce qui me complique la tâche avec le positionnement absolu, c'est mon pied de page... Du coup, il est caché derrière les images

nodesign a écrit :
Par contre, ce qui me complique la tâche avec le positionnement absolu, c'est mon pied de page... Du coup, il est caché derrière les images

Si tu connais la hauteur exacte du bloc où tu as tes images+légendes, tu devrais pouvoir mettre une marge au pied de page. Ou bien le positionner aussi en absolu. Ou bien donner une hauteur fixe en pixels à un div (en positionnement statique, par défaut donc) qui contiendrait les éléments positionnés en absolu.

Mais effectivement, le positionnement absolu est une arme à double tranchant.

Salut,

Ce n'est pas un troll mais voir le blog AlsaS, perso, je ferais une structure en tableau pour ce cas là.

Oui, comme je le disais, pourquoi pas un tableau. Ceci dit, une petite nuance: avec un tableau, on se retrouvera avec une lecture linéaire comme suit: Image 1, Image 2, Image 4, Image 3, Légende. L'avantage du positionnement absolu, c'est de pouvoir avoir comme ordre dans le code HTML: Image 1, Image 2, Image 3, Image 4, Légende.

Ça n'est pas forcément très important, voire négligeable, mais dans certains projets ça sera à prendre en compte.