galerie d'images en css et centrage...

galerie d'images en css et centrage... - HTML/CSS - Programmation

Marsh Posté le 02-11-2005 à 00:14:36    

Salut, je fais une page bête et méchante pour une galerie d'images et je n'arrive pas à obtenir ce que je veux en css.
 
Je m'explique : je voudrais que les vignettes des photos s'ajustent dynamiquement à la taille de la fenetre du navigateur, qu'elles soient présentées comme sous forme de tableau mais que si la taille de la fenetre est réduite, le nombre de vignette par ligne s'ajuste en conséquence.
 
Dans l'idée, c'est ce que propose le site openweb dans l'exemple ici : http://openweb.eu.org/articles/ini [...] 1.html#ex4, mais je voudrais que l'aspect général soit "centré". Parce que dans l'exemple, ils utilisent un "float:left" pour tous les blocks, ce qui les aligne tous à gauche (logique  :sarcastic: ).
 
le résultat est presque bon en utilisant des boites inline mais je perds la capacité à ajuster le nombre de vignettes par ligne dynamiquement.
 
Voilà donc mon problème : concilier les avantages d'un tableau dont les cellules sont centrées et les css pr l'ajustement automatique.
merci pour vos conseils ! :hello:
 
PS : je viens de trouver un bon exemple pour décrire ce que je cherche à atteindre
Si la galerie comporte une seule vignette, elle est centrée sur la ligne, s'il y a assez de place pour une deuxieme vignette, la ligne est divisée en 2, et chaque vignette est au centre de sa partie de ligne, ainsi de suite si une autre vignette a la place d'être ajoutée...


Message édité par freekk91 le 02-11-2005 à 00:22:30
Reply

Marsh Posté le 02-11-2005 à 00:14:36   

Reply

Marsh Posté le 02-11-2005 à 00:35:21    

Si tu englobes toutes tes images dans un div et que tu lui donne une largeur de 100% ainsi qu'un text-align: center, ca ne marche pas? :??:
 

Code :
  1. .conteneur {
  2. width: 100%;
  3. text-align: center;
  4. }


---------------
Feaks Forum
Reply

Marsh Posté le 02-11-2005 à 00:37:18    

Essaye avec pour les "img"

Citation :

margin-left: auto;  
margin-right: auto;


Ca marche pas avec IE, mais avec firefox, ca fonctionne. :)
IL faut laisse le float:left; pour qu'ils soient tous les un à côté des autres.


Message édité par omega2 le 02-11-2005 à 00:38:51
Reply

Marsh Posté le 02-11-2005 à 00:44:58    

ben dans un div, les images seront les unes en dessous des autres, pas à coté ?

Reply

Marsh Posté le 02-11-2005 à 00:46:00    

Ben non pourquoi?


---------------
Feaks Forum
Reply

Marsh Posté le 02-11-2005 à 00:48:21    

Code :
  1. .image {
  2.  width: 100px;
  3.         text-align: center;
  4. float:left;
  5. margin-left:auto;
  6. margin-right:auto;
  7. }


 
c'est ce que j'avais, mais j'ai pas les images centrées, le float les colle à gauche de la ligne courante, quelque soit le conteneur, vu que c'est un float.
La vrai question est : est-ce que ce que je demande est possible...

Reply

Marsh Posté le 02-11-2005 à 00:50:19    

bah il faudrait peut être penser à virer le float:left, non? :whistle:


---------------
Feaks Forum
Reply

Marsh Posté le 02-11-2005 à 00:50:41    

Avec IE <7, (vivement qu'il sorte ;) ) les margin*:auto sont sans effet sur le centrage.

Reply

Marsh Posté le 02-11-2005 à 00:54:11    

Multi > en fait, ce que tu propose centre bien les images, mais elles se retrouvent éloignées des bords. En gros je veux une présentation à la DevianArt, mais en dynamique pour le nombre de vignettes par ligne.
 
... en même temps, je sais même pas comment arriver au résultat de devian art (sauf à utiliser des tableaux, ce qu'ils ne font pas il me semble)

Reply

Marsh Posté le 02-11-2005 à 10:35:14    

faut mettre les images dans un conteneur parent et centrer ce conteneur


---------------
Les CSS c'est bon mangez-en
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed