Dylav

Pour corriger le coup, il faudrait appliquer aux images un padding négatif de la même valeur pour annuler, en ce qui les concerne, le padding général : ça devrait fonctionner, puisque ça marche bien avec les marges, le négatif ? #pied a img {padding-bottom: -15px;}

Wilou, lorsque tu réponds au message juste au-dessus, pourquoi le rappeler en citation, puisque le lecteur l'a justement directement sous les yeux ? Dans ce cas, préfère la touche à la touche : elle est juste en-dessous...

Une petite bûche pour toi, Answaz ? Moi

En fait, tu comptes t'appuyer sur la fonction <select>. Dans la séquence de code que tu cites, on va se contenter de retenir l'essentiel, <select name="bdd" id="choix"> <option name="Debutant">Debutant</option> <option name="Confirme">Confirme</option> <option name="Expert">Expert</option> </select> car le reste est incomplet, disant que ton bouton <select> est rangé dans une cellule de table dont il manque les balises de début et de fin. Les attributs name de <select> et <option> sont des étiquettes qui permettront d'identifier ces éléments (pour <option>, ils sont un peu inutiles). L'attribut id de <select> permet de faire référence à ce bouton <select>, par exemple dans une feuille de style qui en décrira la présentation. Le problème, c'est que le choix qu'aura fait ton visiteur à l'aide du bouton <select>, il faut le transmettre quelque part, sinon il ne se passe rien d'autre. Pour savoir quelle valeur attribuer au <select>, c'est-à-dire quel choix a été effectué, il faut donner à chaque option un attribut value. Ensuite, pour transmettre cette valeur, tu dois inclure ton bouton <select> dans un formulaire (balise <form>). <form method="post" action="action-sur-laquelle-on-enchaine"> <select name="bdd" id="choix"> <option value="1">Debutant</option> <option value="2">Confirme</option> <option value="3">Expert</option> </select> <input type="submit" value="OK"> </form> Ici, les 3 choix se voient affecter respectivement les valeurs 1, 2 et 3 (mais ce pourrait être "Debutant", "Confirme" et"Expert"). Le bouton <input> va permettre de soumettre le formulaire, c'est-à-dire d'enchaîner. L'attribut action du formulaire va indiquer comment enchaîner. Et là, je coince, j'ai oublié comment on aiguille à partir de l'option choisie. N'hésite pas à aller consulter un bon tutoriel HTML, par exemple sur le Site du ZerO (leurs tutos sont réputés). Je vais pour ma part appeler du renfort...

bûche

... néons Sylvitara

Qu'est-ce que le PHP, sinon une surcouche à HTML qui permet de construire tout ou partie de ta page web de façon dynamique à partir de données ? Ainsi donc, pour la partie statique de ta page, tu codes les instructions en HTML. Alors, pour ton menu, de deux choses l'une, ou bien tu vas rechercher dans des fichiers les éléments de son contenu, et tu employeras pour ça des instructions PHP, ou bien ton menu contient un nombre fixe de choix invariables, et tu vas le décrire en HTML, même dans une page PHP, ce sera naturel et normal. Si donc tu as trouvé un exemple de présentation HTML qui te convient, inclue-le dans ta page PHP, et tu obtiendras les résultats attendus.

Je ne sais pas si c'est la raison, mais le nom de l'image de fond de ta <table> comporte un caractère spécial, en l'occurrence "é", alors que le nom du fichier image contient à la place "%E9", valeur ASCII de ce caractère. Je ne suis pas sûr que tous les navigateurs sachent faire le rapprochement formel. En tout état de cause, donne-toi pour règle de ne pas employer, dans les noms de fichiers, d'autres caractères que les lettres, les chiffres et le caractère de soulignement, soit l'ensemble [a-zA-Z_], ça t'évitera tout embêtement sans être pénalisant. Mais je constate que tu es en plein test de ta page en ce moment même, car les noms des fichiers ne cessent de changer... je te laisse mettre ça au point !

Tu as tout à fait raison, KewlCat, c'était de ma part un abus de langage. Partout où je parle de dimensions de l'écran, il faut entendre dimensions de la fenêtre du navigateur... ce qui est effectivement très différent, compte tenu de l'encombrement non négligeable du bandeau de navigation, de la barre de tâche de Windows, de la barre d'état du navigateur, et des divers ascenseurs ! A tel point que, pour une résolution d'écran 1024x768, la fenêtre "efficace" ne mesure guère que 990x600. Ce que j'avais d'ailleurs fait remarquer à Sew-Oszka à propos de l'image de fond de son site du DAF (voir plus haut dans le présent topic).

Salut ! Je suis passé sur ton site en construction. Je ne comprends pas exactement ce que tu veux faire. Au point où tu en es, cette page comporte une seule zone sensible, l'image en bas à gauche. Quand on clique dessus, il apparaît en-dessous un agrandissement de cette image. Il ne semble pas que l'on puisse ensuite faire disparaître cet agrandissement. Je n'ai pas analysé le script. Pour ton problème avec IE, c'est que tu demandes initialement l'affichage d'une image inconnue*. Dans ce cas, IE fait apparaître un petit pavé blanc avec une croix rouge, alors que FF ne fait rien apparaître du tout. Donc, soit tu ne demandes pas l'affichage d'une image bidon, soit tu masques la boîte où s'affiche cette image (genre visibility:hidden), soit ton image bidon est transparente, mais j'ai un peu honte de te suggérer cette solution (tu peux très facilement en construire une en quelques secondes avec PhotoFiltre, logiciel freeware de retouche d'images que tu trouveras dans la section Téléchargements de Zébulon). * en réalité, après un survol rapide du script : au chargement initial, ce n'est pas l'image qui est inconnue, mais son nom (le résultat est le même), puisque le visiteur n'a pas encore opéré son choix. Il faudrait donc effectivement employer ma 3ème suggestion (une image entièrement transparente), et ajouter dans le script une ligne en-dessous de la 3ème instruction déclarative : qui sert d'affectation par défaut. PhotoTransparente.gif est bien sûr le nom de l'image transparente.

Je comprends ton souci de réalisme pour cette page de cahier. Mais ce n'est "parfait" qu'en 1024x768 plein écran. Tente simplement de diminuer la largeur de la fenêtre du navigateur, et tu vas constater que les quadrillages verticaux du fond et de l'entête ne coïncident plus... C'est pour ça que je te suggérais d'abandonner le fond de l'entête. Pour la marge, tu n'as pas le choix, il faut que le trait rouge soit inscrit sur l'image de fond, puisque le quadrillage n'y est pas le même de part et d'autre. Pour les cadres, sans vouloir me répéter, c'est un problème d'abondance de traits. C'est pourquoi je te suggérais d'atténuer au maximum les cadres, par une couleur très neutre et une épaisseur très fine. Le gris des cadres des formulaires est, à mon avis, préférable au bleu de ceux des citations : on dirait un trait de crayon Une autre suggestion : pour les liens actifs, j'ai toujours trouvé pisseux le bleu standard employé. Je lui préfère soit un bleu beaucoup plus sombre (par exemple #000066), soit carrément une autre couleur (comme un vert assez sombre #006600), au choix de ta créativité. Et puis, foin des conventions, j'ai pris l'habitude de ne pas souligner les liens actifs, mais de leur faire changer de couleur (rouge #990000, par exemple) au survol du curseur. Exemple : a {color:#000066;text-decoration:none;} a:hover {color:#990000;}

... rieuse

Non non, Catcat, Answaz n'a plus de bâillon... mais elle n'en a peut-être pas encore pris connaissance. En attendant, bûche et

Bonjour Balltrap34, Je ne comprends toujours pas pourquoi ce mécanisme ne fonctionne pas chez toi. J'en ai profité pour rendre le source un peu plus orthodoxe, en introduisant une feuille de style. Pour nous simplifier la vie, j'ai aussi réintégré le script dans la page. D'où un fichier unique. Reprends le source par copier/coller, pour l'enregistrer par exemple sous le nom Galerie.html, et y modifier [éventuellement] les noms des 8 images. Ne change surtout rien d'autre, pour faire un premier test. <html><head> <title>Dispo pour galerie</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript"> <!-- Galerie.js ----------------------------------------------------------- // // Use this script to view full-size images from thumbnails. // The full-size images can be different sizes. // The pop-up window will change to the appropriate size. // // This script and many more are available free online at // The JavaScript Source -> [url="http://javascript.internet.com"]http://javascript.internet.com[/url] // ------------------------------------------------------------------------ // function VoirPhoto(img) { if (document.Photo.src != img) { ChargerPhoto(img); document.Photo.src=img; document.all("foto").style.width=document.Photo.width; document.all("foto").style.height=document.Photo.height; } document.all("foto").style.visibility="visible"; } function ChargerPhoto(img) { var Photo=new Image(); Photo.width=0; Photo.height=0; Photo.src=img; ControlerPhoto(img); } function ControlerPhoto(img) { if ((Photo.width==0)||(Photo.height==0)) { Refresh="ControlerPhoto('"+img+"')"; intervallo=setTimeout(Refresh,20); } } function StopPhoto() { document.all("foto").style.visibility="hidden"; } // ---------------------------------------------------------------- End --> </script> <style type="text/css"> #galerie { text-align:center; font-size:11px; } .img { border:0; margin-right:2px; } #foto { position:absolute; visibility:hidden; top:120px; left:0; } </style> </head> <body onUnload="java script:StopPhoto()"> <div id="galerie"> <a href="java script:VoirPhoto('Galerip1_big.jpg')"> <img class="img" src="Galerip1_small.jpg" alt="" /></a> <a href="java script:VoirPhoto('Galerip2_big.jpg')"> <img class="img" src="Galerip2_small.jpg" alt="" /></a> <a href="java script:VoirPhoto('Galerip3_big.jpg')"> <img class="img" src="Galerip3_small.jpg" alt="" /></a> <a href="java script:VoirPhoto('Galerip4_big.jpg')"> <img class="img" src="Galerip4_small.jpg" alt="" /></a> <br /> Cliquer sur une image pour la voir en taille réelle... </div> <div id="foto" onClick="StopPhoto()"> <img name="Photo" src="bidon.jpg" alt="" /> </div> </body></html> Voici ce qu'il devrait se passer, lorsque tu double-cliques sur le source HTML, ton navigateur ouvre la page, où tu ne vois que les 4 vignettes, centrées côte à côte en haut de la page, lorsque tu cliques sur une première vignette, la photo en vraie grandeur correspondante apparaît, en-dessous de la ligne de vignettes, si tu cliques sur une seconde vignette, la photo en vraie grandeur correspondante vient remplacer automatiquement la précédente, si tu cliques sur la photo en vraie grandeur, elle disparaît. Si ça ne se passe pas comme ça, je baisse les bras... mais j'ai horreur de ne pas comprendre ! P.S.: juste un petit truc, au début de la 4ème ligne, j'ignore pourquoi le < a été remplacé par < alors qu'il faut lire

bûche

Dis-moi, tu n'aurais pas paramétré le blocage des scripts JavaScript, par hasard, dans ton FireFox ? Parce que c'est souvent conseillé par sécurité. Mais ce ne doit pas être ça : puisque l'image en vraie grandeur apparaît, c'est que la fonction VoirPhoto s'exécute... Je crois que je n'ai plus les yeux en face des trous, pour ce soir. Je vais réétudier le problème demain, si tu n'y vois pas d'inconvénient. Bonne nuit.

Il est vrai que tu fixes formellement les coordonnées du coin haut gauche du menu par rapport au coin haut gauche de l'écran. Mais ces coordonnées, tu les donnes en pourcentage des dimensions de l'écran (top 42%, left 5%, dans mon exemple). De sorte que la position du coin dépend des dimensions de l'écran !

Es-tu sûr de bien avoir ça, en fin de page HTML ? C'est la séquence qui précise que, si tu cliques sur la photo, tu déclenches la fonction JavaScript "StopPhoto", qui la rend invisible. ... <div id="foto" style="visibility:hidden" onClick="StopPhoto()"> <img name="Photo" src="bidon.jpg"> </div> </body></html> Maintenant, pour que la grande photo s'affiche sous la galerie, il faut que tu la repositionnes verticalement plus bas. Dans le script Galerie.js, dans la fonction "VoirPhoto", tu vas lui dire qu'elle doit commencer à 100 pixels du haut de la page (top), au lieu de 0.

Je serais toi, j'aurais un fond homogène de haut en bas (avec juste la particularité de la marge, sans quadrillage vertical). Dis donc, en ce moment tu as deux marges rouges ? N'aurais-tu pas, dans la feuille de style, laissé traîner la bordure droite rouge de ta <div> menu de gauche ? Suggestion : comme tu as déjà un quadrillage en image de fond, tu devrais alléger tous tes encadrements (par exemple en leur donnant une couleur gris très clair, et une largeur minimale de 1px). Parce que quadrillage sur quadrillage, ça fait un peu chargé, non ?

Ah, OK ! Mais si tu cliques sur l'image en vraie grandeur, elle redevient invisible, et tu redécouvres ta galerie de vignette en-dessous. Après, tu as plusieurs possibilités. La première, c'est d'avertir ton visiteur qu'il peut cliquer sur l'image pour l'escamoter. Tu peux également séparer ton écran en deux parties ne se recouvrant pas, l'une qui affiche la galerie, et l'autre destinée à accueillir l'image agrandie. Ensuite, tu peux laisser libre cours à ton imagination, ta créativité et tes goûts esthétiques...

Bonsoir Ricou, Tu as oublié la possibilité de l'attribut background-repeat:repeat-y ! Il te suffit de faire une image de 1 carreau de hauteur, donnant une image beaucoup moins lourde, de 2048px de largeur certes, mais de 20 ou 30 de hauteur seulement ! L'image devrait devenir 50 ou 60 fois moins lourde (certes plus lourde que tes 524 octets d'origine, mais très raisonnable)

Je ne comprends pas le comportement que tu m'expliques. En effet, lorsque tu cliques sur une vignette, tu déclenches un script qui se contente de dévoiler une autre partie de la "page" : il n'y a donc pas enchaînement sur une "nouvelle" page. On sent bien, au fonctionnement, que la galerie de vignettes n'a pas été rafraîchie, et la page est restée parfaitement stable. D'ailleurs, chez moi, la flèche "page précédente" du navigateur reste grise : elle est inactive, il n'y a pas de pile historique. Et ceci est vrai avec mes deux navigateurs, FF 1.5 et IE 6.0 Tu travailles avec quel navigateur, toi ?

En fait, tu dois décrire l'image de fond d'abord (c'est la seule différence avec ta dernière version), puis le menu (en position absolue) qui viendra se superposer à elle. L'attribut z-index ne s'avère pas nécessaire. J'ai repris ton image de fond et fabriqué six petites images transparentes en 125x35 pour les choix du menu. Et voici une page qui fonctionne, - l'image de fond change effectivement de dimensions, - le menu bouge également, d'une façon qui devrait te satisfaire ! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Annie Lebaillif</title> <style type="text/css"> <!-- #Layer1 { position:absolute; top:42%; left:5%; width:125px; } #Layer1 img { border:0; width:125px; height:35px; } --> </style> </head> <body> <img src="AFarriereplan.jpg" width="100%" /> <div id="Layer1"> <a href="AFaccueil.html"><img src="AFaccueil.gif" alt="accueil" /></a> <a href="AFformation.html"><img src="AFformation.gif" alt="formation" /></a> <a href="AFactualites.html"><img src="AFactualites.gif" alt="actualités" /></a> <a href="AFcours.html"><img src="AFcours.gif" alt="cours" /></a> <a href="AFbook.html"><img src="AFbook.gif" alt="book" /></a> <a href="AFcontacts.html"><img src="AFcontacts.gif" alt="contacts" /></a> </div> </body> </html> Il te restera à effacer, sur ton image de fond, le menu imprimé en dur.

On n'ose pas dire Bravo, on a l'impression de polluer le topic. Bravo, Sebnutt !