Problème positionnement de photos dans une cellule <td>

[Roxdes]

Bonjour,
Voici mon problème. Je dois créer un site Web dans lequel doit s'afficher une galerie photos à un endroit précis d'une page. J'ai construit mon site à partir d'un fichier PhotoShop qu'une designer m'a fourni (donc par tranches, ce qui c'est traduit par un tableau en html). J'ai choisi une galerie photos de jQuery que j'ai réussi à intégrer (j'ai copié tout le code dans la cellule du tableau désiré!), cependant, j'aimerais que le positionnement des photos se fasse par rapport à ma cellule du tableau (position:relative j'imagine??) plutôt que par rapport à la fenêtre du navigateur (tel qu'il est présentement). Je suis débutante en développement de sites Web donc le code Javascript et les CSS utilisés par jQuery sont un peu compliqués pour moi.
Une image vaus 1000 mots donc je vous invite à aller voir le site en question : http://www.jolicoudres.com/domainelautremonde/ (Il est vraiment en construction!!! Ne tenez pas compte des autres problèmes ni du fait que c'est mon tout premier site Web que je développe!!).
J'ai essayé de remplacer les positions absolute par relative dans le fichier CSS, mais ça ne donne pas du tout le résultat que j'attends! J'aimerais vraiment que les photos soit présentées telles quelles le sont présentement (au dessus des boutons 'précédent' et 'suivant'), mais qu'elles demeurent 'accrochées' à la même cellule du tableau lorsqu'on change de navigateur ou qu'on réduit ou agrandit la fenêtre de clui-ci...

Quelqu'un peut m'aider SVP?? Cela fait une semaine que je tourne en rond avec ce problème!! Je suis vraiment bloquée et j'ai vraiment besoin d'idées à essayer !!!!

Merci à l'avance!!!

[calimo]

Salut Roxdes, et bienvenue sur Geckozone !

Bonjour,
Voici mon problème. Je dois créer un site Web dans lequel doit s'afficher une galerie photos à un endroit précis d'une page.

Première erreur ! Le web n'est pas un média papier. Tes visiteurs auront des tas de modes d'accès différents, avec des écrans de différente taille, et tu ne pourras jamais rien afficher "à un endroit précis".
Plutôt que de chercher à un positionnement précis et rigide, concentres-toi sur la souplesse : qu'est-ce qui se passe si je redimensionne la fenêtre ? Si j'utilise un autre navigateur ? Un mobile à petit écran ? L'affichage sera "dégradé" par rapport à ton idéal, mais l'important est qu'il reste correct.

J'ai construit mon site à partir d'un fichier PhotoShop qu'une designer m'a fourni (donc par tranches, ce qui c'est traduit par un tableau en html).

Deuxième erreur ! Les tableaux ne sont pas faits pour la mise en forme. Il y a 10 ans on n'avait pas grand chose d'autre, mais maintenant avec l'évolution des navigateurs, le CSS qui arrive bientôt en version 3, leur utilisation pour la mise en forme n'a plus aucun sens. Voir par exemple cette présentation de 2003
Les tableaux sont l'incarnation de ce web rigide qui ne peut pas fonctionner dans un environnement aussi hétérogène.

Trêve de considérations philosophiques, passons au concret !

J'ai choisi une galerie photos de jQuery que j'ai réussi à intégrer (j'ai copié tout le code dans la cellule du tableau désiré!), cependant, j'aimerais que le positionnement des photos se fasse par rapport à ma cellule du tableau (position:relative j'imagine??) plutôt que par rapport à la fenêtre du navigateur (tel qu'il est présentement). Je suis débutante en développement de sites Web donc le code Javascript et les CSS utilisés par jQuery sont un peu compliqués pour moi.
Une image vaus 1000 mots donc je vous invite à aller voir le site en question : http://www.jolicoudres.com/domainelautremonde/ (Il est vraiment en construction!!! Ne tenez pas compte des autres problèmes ni du fait que c'est mon tout premier site Web que je développe!!).

Euh, ben si justement, tout est lié !
Le premier problème : les erreurs HTML. Pas étonnant que ça ne marche pas. C'est un peu comme si tu achètes une voiture : si tu mets les roues sur le toit, l'essence dans le coffre, et que tu essayes de démarrer en mettant la clé dans l'allume-cigare, ça ne va pas fonctionner (au mieux). Sur le web aussi, chaque erreur, c'est prendre le risque que ça pose un problème.

Deuxième problème, le doctype :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Le mode transitionnel t'invite à mélanger la mise en forme un peu partout : tableaux, CSS externes ( <link rel="stylesheet" href="css/style.css" type="text/css" />), intégrées (<style type="text/css">...) et en-ligne (style="position:relative"). Pour reprendre l'exemple précédent, si tu commandes à ton garagiste une renault verte, que tu changes la commande pour une citroën bleue, que tu téléphones à peugeot pour leur dire qu'en fait, tu la veux grise, et que tu appelles ton carrossier pour lui dire de repeindre la WV rouge en blanc métallisé, ben tu es sûr que tu n'auras pas ce que tu veux à la fin ! Ici c'est pareil : à force de tout mélanger partout, impossible de savoir ce qui se passe.

Utilise un doctype (x)HTML strict (p. ex <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">) et valide ton code avec le validateur.

Dans ce cas précis, c'est ton bloc #pp_thumbContainer qui contient toutes les photos, sur lequel tu as déclaré un "position:fixed;" L'effet est assez intéressant, surtout lorsqu'on réduit la taille de la fenêtre. Je dois avouer ne pas comprendre exactement ce qui cause tout cela, mais l'important n'est pas là !

Que faire ?
1) Simplifier le code HTML. Ne garder que le contenu.
2) Passer l'intégralité de la mise en forme dans la feuille de style externe.

Après cela, il sera beaucoup plus facile de comprendre ce qui se passe, et de corriger le problème. Même si tu as l'impression de perdre du temps au début, c'est tout ça de gagné pour la suite.
Si tu ne sais pas comment t'y prendre, il y a un sujet intitulé Quelques liens utiles en haut de cette section du forum. Voir par exemple les liens sous Tutoriaux pour apprendre le XHTML et les CSS.

Bon courage !

[Roxdes]

ouf!!! Merci pour les suggestions! Comme je le disais je suis débutante et c'est mon premier site !! J'ai peut-être vu un peu grand...

Oublions jQuery. Je tente une autre approche... Si on clique sur le lien 'zoothérapie' de mon site (http://www.jolicoudres.com/domainelautremonde ou jolicoudres.com/domainelautremonde), j'ai réussi à placer 3 photos à une position relative à l'endroit que je veux et tous les navigateurs que j'ai testé (explorer, firefox, safari, ipad, iphone) ont le même comportement, c'est ce que je veux. Dans le fond, peu m'importe que les photos bougent quand on passe la souris dessus, je pourrai m'y attarder dans la version 2 du site! Cependant j'aimerais que les photos soient placées en angle (un peu comme sur la page d'accueil). Pour ça j'aurais besoin d'aide svp... J'ai beau chercher dans les tutoriaux et liens, soit que je ne sais pas où chercher exactement, soit que ce que je cherche est trop précis... Comment faire aussi pour gérer facilement mes boutons suivant/précédent ?? Et l'apparition de la photo agrandie quand on clique sur l'image?? J'imagine qu'il doit bien exister du code déjà tout fait de la marque de mon auto que je pourrais intégrer !!?

Merci à l'avance, ce n'est pas que je ne veux pas chercher par moi-même, mais ça doit faire au moins 30 heures que je passe en une semaine à tourner en rond avec cette galerie, en plus de mon travail à temps plein et de ma famille à m'occuper!! Si j'écris sur ce forum c'est que je suis vraiment rendue au bout du rouleau et que je sais qu'un expert pourrait certainement m'aiguiller en quelques minutes même si ce n'est pas parfait (en autant que ça fonctionne!).

Merci encore!

[Bobe]

Pour les photos en angle, il y a une règle css qui le permet mais c'est encore très récent donc c'est pas supporté par tous les navigateurs même très récents, ou bien il y a du code propriétaire qui permet de le faire. En un mot : c'est le foutoir. Le plus simple est d'utiliser la même chose que sur l'accueil, donc jquery et son module jquery.transform.

Y a un petit bug avec les frames aussi. À chaque fois qu'on clique sur "accueil", on se retrouve dans un niveau supplémentaire des frames (tu ouvres index.html dans la frame courante, mais index.html définit lui-même le groupe de frames de départ; je sais pas si je me fais comprendre ^^)

[Roxdes]

Enfin! Un ami "pro" qui tente de m'aider!!! Merci! Je n'ai pas quitter ma chaise d'ordi de toute la journée, je suis royalement crevée...!!!

Ouais pour les frames j'avais trouvé cette option sur le web parce que j'avais remarqué que ma page se loadait par morceaux, et j'avais trouvé cette astuce pour résoudre le problème (en faisant un préload, ce qui mettait les images dans la cache)... Sauf que ça n'a pas l'air de fonctionner à tout coup car par moment ma page s'affiche encore par morceaux... Mais c'est le dernier de mes soucis pour le moment, je comptais ramener ça comme avant (ie renommer la page d'accueil index.html et laisser tomber les frames)...

Présentement je suis revenue sur ma page d'accueil, j'ai modifié les styles css dans le fichier de fourni par jQuery pour mettre la position:relative des thumbs, mais maintenant je ne suis plus capable d'afficher les photos une par dessus l'autre! Peu importe les valeurs de 'left', 'marginTop' ou 'bottom' que j'inscris, on dirait qu'il fait à sa guise... pour faire un test, j'ai même initialisé les valeurs de positionnement selon l'instence de la boucle (ie si cnt == 1, valeurs=... si cnt==2, valeurs= ... etc), mais rien à faire. Je n'y parviens toujours pas.

J'ai essayé aussi d'ajouter un script dans ma page de zoothérapie (directement au niveau de ma balise <td> qui affiche les images), que j'ai copié à partir du code de ma page d'accueil, afin d'utiliser le transform:

<script type="text/javascript">
$(function() {
$('<img />').load(function(){
$(this).transform({'rotate': '60deg'});
}
});
</script>

mais je ne connais pas le langage javascript et je ne comprends pas trop ce que je dois faire exactement pour faire fonctionner mon script... Une idée??

Je n'ai pas copié ces nouvelles versions sur le site, ça ne vaut pas la peine... je tourne encore en rond !!
Merci encore, c'est vraiment vraiment vraiment très apprécié tu n'en as même pas idée!!!

Roxdes

[Roxdes]

Bon j'ai résolu mon problème par moi-même!!! J'ai utilisé une autre gallerie jQuery qui fait à peu près la même chose que je voulais, il me reste à intégrer le code pour agrandir la photo quand on clique sur la miniature... et à placer les vrais photos!!

Merci pour le support!