[resolu][css] Alignement vertical d'images pour galerie photo
Forum Programmation : [resolu][css] Alignement vertical d'images pour galerie photo
Bonjour à tous,
je suis en train de concevoir une galerie photo, et courageusement :-) , j'ai choisi de ne pas utiliser de tableaux pour la mise en page mais d'utiliser les feuilles de style.
Voilà ma démarche :
- J'ai un fichier .php pour où s'affiche la galerie et un fichier .css pour la mise en page.
- Dans un premier temps j'ai conçu un canevas (ou contenant) qui est en fait l'équivalent d'une case pour un tableau. La taille de ce canevas est fixe.
- J'affiche ensuite dans chaque canevas une photo (dont la dimension est dynamiquement retravaillée avec la librairie GD de PHP pour entrer dans le canevas). Mes photos peuvent être au format portrait ou paysage, et le ratio longueur/largeur n'est pas fixe.
Voilà mon problème : je voudrais que chaque image soit "collée" à la bordure basse de son canevas, et non à la bordure haute comme par défaut. L'idée est que l'alignement des images soit le même que celui des galeries de google.
J'ai essayé les idées suivantes :
- vertical-align. Sans effet.
- padding, padding-top... Pas adapté, car la distance entre la bordure haute d'un canevas et une photo n'est pas fixe, donc pas moyen de fixer une valeur pour padding. Comme il y a beaucoup de ratio différent, je ne souhaite pas non plus créer un style pour chaque ratio avec un padding-top adapté, ce serait vraiment trop galère.
Voici les styles conçus pour mes canevas et mes photos :
.bloc {
float : left;
padding : 0;
margin : 10px 24px;
width : 122px;
height : 136px;
}
.photo {
padding : 0;
margin : 0;
text-align : center;
}
J'espère que mes explications sont claires.
Merci d'avance pour votre aide.
Un coup de main ne serait vraiment pas de refus...
et "padding-bottom:0px;" ? Tu as essayé ?
Oui, j'avais testé aussi, sans résultat.
En laissant les autres padding en auto ?
Code :
|
Testé... ça ne marche pas non plus...
C'est bien le style de ton "bloc" que tu modifies et non aps le style des "photos" ?
C'est bien le style du bloc que je modifie.
Et en essayant "margin-bottom:0px;" dans le style de ton image ? (voire même "margin:auto auto 0px 0;" )
Non, toujours pas.
Sinon, y aurait-il moyen de donner dynamiquement une valeur à padding, calculée par rapport au ratio de la photo mais en conservant la séparation entre la forme (fichier css) et le fond (le fichier php) ?
Ben tu pourrais mettre le padding dans la page PHP et dans ce cas pouvoir le gérer à moins que tu utilises plusieurs styles et que tu charges un certain style pour certaines images... mais étonnant que ce qu'on a vu au-dessus ne fonctionne pas... sur Google ils utilisent quoi ?
Sur developpez.com, j'ai vu un post décrivant un problème similaire. La réponse fut de créer un style dans le fichier php, en associant à padding une valeur générer dynamiquement suivant la photo; le code est le suivant :
Code :
|
Je pense que je vais l'utiliser, mais j'esperais une solution à base de padding-bottom : 0 ou un truc dans le style, en gardant la mise en forme dans ma css.
ok, ça marche, en ajoutant au code précédent la dimension du padding-top (px par exemple).
Il y a 678 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.
