Se connecter avec
S'enregistrer | Connectez-vous
Votre question

[resolu][css] Alignement vertical d'images pour galerie photo

Tags :
  • CSS
  • Programmation
Dernière réponse : dans Programmation
Partagez
24 Février 2006 13:38:03

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.

Autres pages sur : resolu css alignement vertical images galerie photo

25 Février 2006 10:17:46

Un coup de main ne serait vraiment pas de refus...
25 Février 2006 16:06:04

et "padding-bottom:0px;" ? Tu as essayé ?
Contenus similaires
25 Février 2006 16:14:39

Oui, j'avais testé aussi, sans résultat.
25 Février 2006 16:24:17

En laissant les autres padding en auto ?

  1. padding:auto auto 0px auto;
25 Février 2006 16:43:43

Testé... ça ne marche pas non plus...
25 Février 2006 16:48:59

C'est bien le style de ton "bloc" que tu modifies et non aps le style des "photos" ?
25 Février 2006 16:55:36


C'est bien le style du bloc que je modifie.
25 Février 2006 17:00:23

Et en essayant "margin-bottom:0px;" dans le style de ton image ? (voire même "margin:auto auto 0px 0;" )
25 Février 2006 17:06:54

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) ?
26 Février 2006 17:59:04

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 ?
26 Février 2006 18:12:59

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 :
  1. <?php
  2. ...
  3. list($width, $height, $type, $attr) = getimagesize("img/$nom_fichier[$numero]");
  4. $paddingpx = (350 - $height)/2;
  5. echo '<div style= "padding-top: '.$paddingpx.'" >';
  6. ...
  7. ?>


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.
26 Février 2006 18:35:17

ok, ça marche, en ajoutant au code précédent la dimension du padding-top (px par exemple).
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS