28173 sujets

CSS et mise en forme, CSS3

Bonjour,

Je sais que ma question peut paraître stupide mais je recherche une méthodes pour aligner des blocs horizontalement.

Je m'explique

Je travaille actuellement une galerie de photos. Ces dernières sont représentées sous formes de polaroïd (dans un div a fond blanc avec un petit titre en dessous). Je cherche à en mettre plusieurs par ligne de ne pas avoir une unique colonne de photos. Je pourrais avoir recours au positionnement relatif ou absolu mais je souhaiterais que le nombre de photos s'adapte à la taille de la fenêtre (comme dans un positionnement auto).

Je ne sais pas si je suis bien clair.
N'hésitez pas à me poser des questions

Merci d'avance
Modifié par MnepuL (14 Aug 2006 - 01:38)
Bonjour,

Faire un tableau de présentation (une cellule, une vignette) ou bien faire flotter chaque bloc-vignette (float: left, le sujet a souvent été traité dans le forum).

sinon, une remarque: le titre doit être au-dessus de la série de vignette, pas en-dessous (titre <hn> obligatoirement avant le contenu concerné, et afichage CSS cohérent)
Modifié par Laurent Denis (12 Aug 2006 - 14:16)
Avant toute chose merci de la réponse

J'avais songé à faire "flotter" mes photos mais cela me restreint à deux photos par ligne, il me semble?

Pour le titre de chaque photo je voulais les mettre dessus mais je n'ai pas la place pour garantir un affichage "polaroid".

upload/8019-site.JPG

J'ai caché les photos car le site porte sur mon fils de 2 ans. (Le site est lui même protégé par un .htaccess)

Concernant le tableau, ceux-ci ne sont-ils pas proscrits avec les CSS?

Merci
Modifié par MnepuL (12 Aug 2006 - 15:02)
Je viens de tester le flottement.

Lorsque je l'applique le bloc sort complétement du flux de ma page et les photos les plus basses se retrouvent en dessous du pied de page.. ce n'est donc pas ma solution.

upload/8019-site-float.JPG
Modifié par MnepuL (12 Aug 2006 - 15:03)
L'utilisation des flottants va de pair avec la propriété overflow:+valeur autre que visible sur le conteneur, afin que le calcul de sa hauteur prenne en compte les flottants.
Merci avec le flottement et la directive "overflow : auto;" le site a exactement l'apparence que je désire et je peux ainsi avoir plusieurs photos sur la même ligne.

Encore merci

Euh, il est où le bouton résolu
Modifié par MnepuL (13 Aug 2006 - 01:02)
Juste un petit souci que je n'avais pas remarqué hier.

Lorsque j'applique un "overflow: auto;" sur le contenant avec le "float : left;" sur le contenu (la photo), j'obtiens un espace blanc sous la dernière photo après un retour à la ligne qui correspond à la hauteur de tous les div dudit conteneur

Comme un dessin vaut mieux qu'un grand discours je vous joins l'image

upload/8019-site-2.JPG

Merci
MnepuL a écrit :
Comme un dessin vaut mieux qu'un grand discours je vous joins l'image

Bonjour MnepuL,
Il y a encore bien mieux : un exemple en ligne Smiley cligne
Merci d'avance de donner un lien.
Bonjour,

Comme je l'ai mentionné le site comporte des photos de mon fils, donc je tente de le garder discret, donc de pas de divulguer son URL sur un forum.

Mais si cela est vraiement indispensable je vais créer un compte free avec des photos bidons.
euh la comme ça sans un exemple c'est compliqué, mais je commencerai par mettre un clear:both; tout à la fin de tes floats, histoire de "rétablir l'équilibre" !
Smiley cligne
on pourrait même pas avoir un tit bout de code ? Smiley confused