Tom's Guide > Forum > Programmation > [resolu][css] Alignement vertical d'images pour galerie photo

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

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

TomsGuide.com : 800 000 inscrits répondent à toutes vos questions high-tech et informatique. Pour obtenir de l'aide, inscrivez-vous gratuitement !
Mot :    Pseudo :           
 

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.

Liens sponsorisés
Inscrivez-vous ou connectez-vous pour masquer ceci.

Un coup de main ne serait vraiment pas de refus...

Répondre à ouistiti22

et "padding-bottom:0px;" ? Tu as essayé ?

Répondre à Darit

Oui, j'avais testé aussi, sans résultat.

Répondre à ouistiti22

En laissant les autres padding en auto ?

Code :
  1. padding:auto auto 0px auto;

Répondre à Darit

Testé... ça ne marche pas non plus...

Répondre à ouistiti22

C'est bien le style de ton "bloc" que tu modifies et non aps le style des "photos" ?

Répondre à Darit


C'est bien le style du bloc que je modifie.

Répondre à ouistiti22

Et en essayant "margin-bottom:0px;" dans le style de ton image ? (voire même "margin:auto auto 0px 0;" )

Répondre à Darit

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) ?

Répondre à ouistiti22

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 ?

Répondre à Darit

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 :
  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.

Répondre à ouistiti22

ok, ça marche, en ajoutant au code précédent la dimension du padding-top (px par exemple).

Répondre à ouistiti22
Tom's Guide > Forum > Programmation > [resolu][css] Alignement vertical d'images pour galerie photo
Aller à :

Il y a 678 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Attention

Vous allez répondre sur un sujet resté inactif pendant plus de 6 mois.
Assurez-vous d'apporter des éléments nouveaux à la discussion avant de poursuivre.

Répondre Annuler
Liens