Après avoir résolu (grâce à vous) un souci de JavaScript, me revoilà pour un problème concernant le CSS de ma galerie. N'allez pas croire que je poste dès que j'ai un problème, celui-ci est ardu et je ne vois pas comment m'en sortir convenablement..
J'ai hébergé le site ici pour mieux illustrer le problème. Je sais, les images sont trop lourdes, ça va être modifié sous peu.
Le but de la galerie est d'afficher des thumbnails sur la gauche et d'afficher l'image cliquée dans le div de droite via Js (cf le thread d'hier). Le truc, c'est que je vais avoir certaines galeries comportant une cinquantaine, voire une centaine d'images pour certaines galeries.
D'un côté esthétique et ergonomique, mon idée était de faire passer les thumbnails dans l'espace libre présent sur la gauche, mais également en-dessous du div de droite. Quand on arrive à cent miniatures sur la page, ça commence à faire long en scroll si on ne garde qu'une colonne sur la gauche. De plus, ça fait de l'espace vide useless en-dessous du div de droite.. scroll qu'il faudra remonter à chaque image affichée dans ledit div. Autant dire que les gens se barreront avant d'avoir fini de regarder la galerie.
Bref, j'ai tout d'abord codé les thumbnails en divs (un div pour une miniature, tous reliés à la classe "mini"), puis ajouté un float:left à la classe "mini". Le div de droite étant en float:right, jusque là tout va bien. Les images s'alignaient nickel, si on resize la fenêtre, ça retourne à la ligne quand il y a trop de miniatures, bref, parfait.. ou pas. Avec ce que j'ai fait, dès qu'on arrive au niveau de la bordure du bas du div de droite, les divs "mini" s'affichent dès qu'il y a assez d'espace disponible. Du coup, c'est décalé. Et moche. Ne pouvant pas prévoir à l'avance la taille du div de droite (la taille du div dépend de la taille de l'image affichée), je ne pense pas que ça soit possible d'aligner les miniatures en conservant le float:left. J'ai conservé ce code dans la galerie Champs significatifs, au cas où (et pour que vous compreniez plus aisément le rendu précédemment expliqué).
Du coup, j'ai modifié le CSS et j'ai mis un display:inline pour voir ce que ça donnait. Bingo, ça reste sur la même ligne. Par contre pour le CSS.. j'ai du modifier pas mal de trucs et user de ruses de sioux pour arriver à un rendu pas trop laid (notamment les background au rollover) : genre augmenter la font-size à 35 pour augmenter la hauteur des lignes, donc du background..
Par contre, même en bidouillant, je n'arrive pas à "centrer" le background blanc (le rollover quoi) sur l'image.. et quand on arrive au bout d'une ligne, le background est coupé..
Voilà.. merci à ceux qui ont lu jusqu'ici, déjà.
Et bon courage à ceux qui se pencheront sur le problème. 
Sur ce, j'attends vos réponses et remarques, et je me tiens à votre diposition pour tout renseignement nécessaire (les sources sont toutes récupérables sur le site, ce n'est que du xHTML/CSS/Js et je n'ai pas bloqué les accès aux fichiers sources je crois. Si il y a un souci pour les récupérer, dites-le, et j'hébergerai un zip contenant le site). Maintenant je m'en vais proposer à mon boss de retirer le background foireux, et mettre à la place un contour blanc sur l'image au rollover. Ca résoudrait pas mal de soucis.
Modifié par Madounet (03 Dec 2009 - 10:19)
J'ai hébergé le site ici pour mieux illustrer le problème. Je sais, les images sont trop lourdes, ça va être modifié sous peu.
Le but de la galerie est d'afficher des thumbnails sur la gauche et d'afficher l'image cliquée dans le div de droite via Js (cf le thread d'hier). Le truc, c'est que je vais avoir certaines galeries comportant une cinquantaine, voire une centaine d'images pour certaines galeries.
D'un côté esthétique et ergonomique, mon idée était de faire passer les thumbnails dans l'espace libre présent sur la gauche, mais également en-dessous du div de droite. Quand on arrive à cent miniatures sur la page, ça commence à faire long en scroll si on ne garde qu'une colonne sur la gauche. De plus, ça fait de l'espace vide useless en-dessous du div de droite.. scroll qu'il faudra remonter à chaque image affichée dans ledit div. Autant dire que les gens se barreront avant d'avoir fini de regarder la galerie.
Bref, j'ai tout d'abord codé les thumbnails en divs (un div pour une miniature, tous reliés à la classe "mini"), puis ajouté un float:left à la classe "mini". Le div de droite étant en float:right, jusque là tout va bien. Les images s'alignaient nickel, si on resize la fenêtre, ça retourne à la ligne quand il y a trop de miniatures, bref, parfait.. ou pas. Avec ce que j'ai fait, dès qu'on arrive au niveau de la bordure du bas du div de droite, les divs "mini" s'affichent dès qu'il y a assez d'espace disponible. Du coup, c'est décalé. Et moche. Ne pouvant pas prévoir à l'avance la taille du div de droite (la taille du div dépend de la taille de l'image affichée), je ne pense pas que ça soit possible d'aligner les miniatures en conservant le float:left. J'ai conservé ce code dans la galerie Champs significatifs, au cas où (et pour que vous compreniez plus aisément le rendu précédemment expliqué).
Du coup, j'ai modifié le CSS et j'ai mis un display:inline pour voir ce que ça donnait. Bingo, ça reste sur la même ligne. Par contre pour le CSS.. j'ai du modifier pas mal de trucs et user de ruses de sioux pour arriver à un rendu pas trop laid (notamment les background au rollover) : genre augmenter la font-size à 35 pour augmenter la hauteur des lignes, donc du background..
Par contre, même en bidouillant, je n'arrive pas à "centrer" le background blanc (le rollover quoi) sur l'image.. et quand on arrive au bout d'une ligne, le background est coupé..
Voilà.. merci à ceux qui ont lu jusqu'ici, déjà.
Et bon courage à ceux qui se pencheront sur le problème. Sur ce, j'attends vos réponses et remarques, et je me tiens à votre diposition pour tout renseignement nécessaire (les sources sont toutes récupérables sur le site, ce n'est que du xHTML/CSS/Js et je n'ai pas bloqué les accès aux fichiers sources je crois. Si il y a un souci pour les récupérer, dites-le, et j'hébergerai un zip contenant le site). Maintenant je m'en vais proposer à mon boss de retirer le background foireux, et mettre à la place un contour blanc sur l'image au rollover. Ca résoudrait pas mal de soucis.
Modifié par Madounet (03 Dec 2009 - 10:19)