Dylav

b û che

N'a-t-on pa s le droit de s e d é gui s er ?

Oui, encore une bizarrerie de IE... Mais essaie de placer le :hover plutôt sur le <a> #menugauche a { background: url("trame.png") no-repeat; text-decoration: none; color: #000000; } #menugauche a:hover { background: url("trame2.png") no-repeat; text-decoration: underline; color: red; font-weight: bold; } #menugauche li { margin: 10px 10px; padding: 12px 0px; } ou peut-être plutôt #menugauche li a et #menugauche li a:hover

Bravo Florent ! Je te souhaite de flotter encore longtemps sur ton petit nuage... Pourquoi pas pour le reste de ta vie... c'est le moment de rêver ! Lucie, vous ici ! Toi non plus, on ne te voit plus guère... bûche !

J'avais préparé ailleurs le message ci-dessous, avant de découvrir le présent sujet, Je comprends mieux la raison du changement...

Bizarre, peut-être... mais surtout dommage !

Désolé, Diana, là tu demandes le beurre et l'argent du beurre... L'ascenseur invisble, ça n'existe pas encore !

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 !