[Résolu]Cassetête chinois pour pros-Images sans dimension dans galerie

Bonjour à tous!

J'ai un vrai casse-tête à présenter aux "pro" du forum. Je pense avoir étudié toutes les possibilités et que selon les conditions que je pose (voir ci-dessous) le problème est insoluble. Mais si vous me trouvez une soluce, ça prouvera que vous êtes pro et que vous avez la plus grosse

Je suis en train de refaire le site d'un pote photographe. Le développement est visible ici. C'est une galerie photo avec une barre de menu à gauche, les vignettes dans une barre défilante en haut, un texte et la photo en grand dans le corps de la page.

Benoît m'a demandé la contrainte suivante:
- Photos disposées soit en portrait, soit en paysage, soit en format carré. Tout cela centré dans un carré imaginaire (le canvas, quoi). Et la représentation des images doit avoir une surface d'affichage constant. C'est à dire que le carré n'occupera pas tout le canvas mais aura des marges pour que son hauteur x largeur soit le même que l'hauteur x largeur des rectangles. A priori les images rectangulaires auront toutes le même rapport (du 3:2 je crois), donc pas besoin de s'inquiéter des panoramiques à rallonge.

Puis, pour le fun (je fais son site surtout pour apprendre et me faire la main en HTML/CSS, pas vraiment dans un but de productivité absolu) j'ai posé la contrainte suivante:
- Je veux que toutes les dimensions soient relatives. C'est à dire que les hauteurs, largeurs et marges sont gérées en pourcentages et que les images s'afficheront dans la même proportion de la fenêtre sur un 13" que sur un 30". En redimensionnant la fenêtre en live tout devrait s'accommoder aussi, mais bon, peu de gens s'amusent à bouger la taille de la fenêtre en cours de navigation.

Ces contraintes étant posées, le problème sur lequel je bloque c'est le centrage vertical des vignettes dans la barre. J'ai essayé plusieurs méthodes, dont:
- display: table-cell / vertical-align: middle -> ça centre verticalement les images, mais ça me fout le binz dans les hauteurs/largeurs. Il n'accepte plus de réglage d'hauteur en pourcentage.
- méthode du positionnement absolu/relatif/float à 50% puis marge négative -> ça coince aussi car la marge négative je dois la donner en pixels. Donc ça marche pour une taille de fenêtre mais pas pour les autres.

J'ai fait plusieurs recherches google et apparemment il n'existe pas d'autre solution en HTML/CSS. Je pense que la seule façon de régler ça c'est de passer par du javascript avec un listener sur la fenêtre et qui changerai la marge de façon dynamique.

Alors, me tromperai-je? Y'a-t'il une autre façon de centrer verticalement des images avec hauteur en pourcentage en html/css?

Merci à vous de vous pencher sur le problème!
Modifié par vitorio (12 Dec 2010 - 17:51)

Oula, en bidouillant un peu mon css j'ai réussi tout seul comme un grand sur un coup de chance!

J'avais donc:

<div class="wrapper">
    <div class="container">
        <div class="thumb">
            <a href...>
                <img src=...>
            </a>
        </div>
        ...
    </div>
</div>

où:
wrapper=div globale à 100% de la largeur de la page
container=conteneur des vignettes avec une largeur potentiellement supérieure à celle de wrapper, ce qui fait une barre de défilement horizontale. (overflow : visible)
thumb=div encapsulant l'image et son lien

C'est cette dernière qui avait le code CSS comme suit:

div.thumb{
	display: inline-block;
	vertical-align: middle;
        height: 100%;
/*	border: 1px solid red;*/
}

Et je sais pas pourquoi, j'ai essayé de virer sa hauteur. Et du coup ça a aligné le contenu au milieu comme je le voulais! Si quelqu'un a le courage de m'expliquer avec de la théorie ce que je viens de faire en pratique, je suis tout ouï J'avais lu quelque part que pour que les éléments avec un height en pourcentage ai une hauteur en proportion des parents, il fallait que depuis body, tous les éléments parents aient un height de défini. C'est peut être valable que pour les éléments block, finalement...

Bon, désolé de polluer le forum avec une question auto-répondue. Mais ça faisait des jours que j'était dessus sans résultat. Comme par hasard, après avoir posté le problème je teste un truc et pouf! C'est le bon...

Bon we à vous!

Désolé, j'ai crié victoire un peu trop vite. Ma solution ne marche que sur Safari... Je m'en tape à la limite des vieilles versions d'IE, mais faudrait que ce soit au moins compatible IE8/FF aussi... Vais continuer à creuser. Si vous avez des suggestions, n'hésitez pas!

Je m'approche de quelque chose. Du display: inline; ça marche pour IE 7 (j'ai pas les autres versions sous le coude). display: inline-block pour Safari. Reste plus qu'à trouver une manière de faire passer le vertical-align: middle à Firefox. Quelqu'un?

J'avoue que je n'ai bien compris ton problème. Pour moi elles ont l'air centrées, tes vignettes (sous FF). Tu parles bien des thumb dans la barre du haut ?

Oui, désolé, mon post est assez confus. J'ai fait des modifications sur le site en lien et j'ai réglé le problème hier soir. Grâce à la lecture de ce tuto j'ai capté que le vertical-align se met dans le contenu et pas le contenant. J'ai viré les div "thumbnail" qui encapsulaient les images. Puis pour être compatible avec IE, les display: inline-block il faut les transformer en display: inline pour ce navigateur (via commentaire conditionnel ou feuille de style séparée).

Bref, le problème de base est résolu, je vais le marquer en tant que tel. Sinon qu'en pensez-vous du site (structure et propreté du code)?

J'ai un peu tout nettoyé pour virer les horreurs de positionnement absolu/relatif que j'avais fait avant. J'ai bidouillé avec des inline-block et du direction rtl pour afficher d'abord le bloc image et ensuite le bloc texte. Je suis contraint à ça car l'image + vignettes sont en fait un plugin inséparable et le texte un article de Joomla. Il me manque quelques détails comme définir des min-width pour des fenêtres trop petites et mettre l'affichage de l'image proportionnel à sa surface. Mais bon, vu d'où je viens, c'est des broutilles tout ça! Puis ce qui m'a étonné le plus c'est qu'IE ne m'a presque pas emmerdé...

Merci mistike de t'y être penché sur le sujet.