[Résolu] Utilisation du tutoriel "Menu graphique sans préchargeme

Bonjour,

Voici ma variante du code proposé dans le tutoriel :

http://temp/test.html[/url]

Mon souci est sous IE au niveau du margin-bottom: 1px : lorsque l'on passe sur un lien, les liens du dessus perdent leur margin-bottom !

Réaction vraiment étrange, je ne vois pas d'où cela peut venir...

Merci d'avance
Modifié par nicolas.charlot (15 May 2005 - 21:01)

Encore un tour de passe passe à la Microsoft. Tes éléments <a> ont leur propriété hasLayout positionnée à True (pour de plus amples informations sur cette propriété voir http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/haslayout.asp et http://msdn.microsoft.com/workshop/author/css/overview/measurementandlocation.asp#intro).

Il suffit dans ta CSS de retirer height: 20px; et de compenser sur le padding.

Par ailleurs je me permets de noter un autre défaut de ton design sous IE : le clignotement des images à chaque passage de souris (requête http pour rechercher l'image sur le serveur à chaque effet :hover). Voici un complément : http://www.ultra-fluide.com/ressources/css/css-hacks.htm#scintillement

Merci pour ta réponse...

J'ai substitué height par line-height et ça fonctionne mieux mais le lien n'est plus complètement cliquable !

Merci également d'avoir mis en avant ce problème de scintillement.
J'y regarde de suite.
Modifié par nicolas.charlot (19 Apr 2005 - 16:21)

Le problème de scintillement m'oblige à avoir l'image en fond...
Ce qui pose un problème avec l'espacement d'1 px entre chaque lien.

Je pense que la solution la plus simple serait de mettre les bordures au sein de l'image directement, comme ça plus aucun problème...

Non tu peux garder ton image en background. Tu as 2 solutions :
- ne pas faire bouger l'image (affichage des 2 images superposées)
- paramètrage adéquat du serveur web

OK, mais il faut un div par lien dans ce cas.

Et pour le line-height ?
Comment garder le clique possible sur toute la zone ?

Version full image dispo à la même adresse...

Je pense que c le mieux :
- Moins de code
- Compatible
- Image pas plus lourde

Peux-tu vérifier si ça scintille encore ?

- scintillement : si tu changes le parametrage de ton serveur tu n'as pas besoin d'ajouter une div.
- zone cliquable : je connais une solution qui consiste à mettre la propriété hasLayout à True, ce qui est justement contradictoire avec la résolution du précédent problème. La seule issue que je connaisse est l'utilisation de IE7. Du coup tu peux avoir l'effet :hover sur n'importe quel élément ce qui te permet de remplacer ta <div> et <a> par <ul> et <li>.

Je n'aura hélas pas accès au serveur de publication...

Est-ce que la dernière version te parrais correcte ?

Tu n'as plus de problème de marge sur ta dernière version. En revanche IE6 continue de balancer des requetes http pour recuperer l'image à chaque déplacement de souris.
Si tu disposes de IE6 tu le constateras avec le paramètrage suivant :
Outils > Options Internet > Onglet général > Paramètres > "A chaque visite de la page".

Le souci, c'est que je suis sur un serveur local...
Donc le scintillement est toujours invisible !

Côté code, je ne vois pas de quoi ça peut venir ?

Mon code ressemble à celui que tu m'as indiqué...
Modifié par nicolas.charlot (19 Apr 2005 - 17:39)

Excuses moi j'ai du regarder de travers ou sur une ancienne version.
Tout est Ok sur ton code.

Un truc pour la vérification : tu surveilles le log d'apache sur ton serveur local. Si tu fais du :hover sur des images à déplacer, ton log sera criblé de requêtes relatives au chargement de l'image (si IE6 est paramétré comme indiqué).

Ok, merci pour ces précieuses infos !
Tout est bon du côté d'apache !
Modifié par nicolas.charlot (20 Apr 2005 - 09:22)

Bonjour,

si ton problème est résolu, merci de rajouter un tag [ Résolu] (sans l'espace) dans le titre de ton sujet en éditant le 1er post, comme indiqué dans l'Aide/Règles