18041 sujets

Questions générales et questions de débutants

Problème de menu & avis sur mes div !

Bonjour à tous,
Je rencontre mes premiers problèmes de compatibilité, non pas sur IE mais sur Chrome ( Aucun problème sur Firefox & Internet explorer).

Voilà le résultat sur IE et firefox :

upload/34608-IE.PNG

Et sur Chrome :

upload/34608-chrome.PNG

Parcours & CV sont doublés...
Apparemment j'ai un problème aussi sur un lien qui apparaît sur toute la page Smiley ohwell

J'ai mis à disposition mon CSS içi : http://dl.free.fr/getfile.pl?file=/560gUbKM


Du coté HTML :
a écrit :
<div id="menu">
<ul>
<li><a href="#" class="cv"></li>
<li><a href="#" class="parcours"></li>
<li><a href="#" class="accueil"></li>
</ul>
</div>


J'ai essayer différentes solution mais je vois pas le problème .

Je voulais aussi avoir votre avis sur ma déclaration de mes div, voilà une image pour représenter le design : upload/34608-explain.png

Mes div sont déclarés comme ceci dans mon html :
a écrit :

<body>
<div id="conteneur">
<div id="header">
<div id="menu">
</div>
</div>
<div id="contenu">
</div>
<div id="footer">
</div>




Merci à vous Smiley cligne
Modifié par Doccc (05 Dec 2010 - 14:23)
Modérateur
Bonjour,

Dans cet état, ton menu sera inaccessible sans CSS ou sans images. Pour faire un menu en images proprement, il faut le faire comme ceci :


<ul>
<li id="menuAccueil"><a href="#"><img src="accueil.png" alt="Accueil" /></a></li>
<li id="menuParcours"><a href="#"><img src="parcours.png" alt="Parcours" /></a></li>
<li id="menuCV"><a href="#"><img src="cv.png" alt="CV" /></a></li>
</ul>


Ensuite, on ajoute une surcouche Javascript pour gérer le hover et le préchargement des images. Si un élément est unique, il faut aussi utiliser un id plutôt qu'une classe. Pour ma part, je préfère mettre ce id aux li des éléments du menu, car je peux à la fois cibler le li lui-même, mais aussi son lien à l'intérieur grâce aux sélecteurs CSS.

Si tu veux plutôt persister avec ton intégration, je te dirais que la source de ton problème est que tu n'as pas fermé les éléments <a> de ton menu, du moins, dans l'exemple donné.
Modifié par Tony Monast (05 Dec 2010 - 16:08)
Bonjour,
Merci pour ta réponse, exact erreur bête j'ai pas fermer mes balises Smiley ohwell

Je suis pas la pour persister mais apprendre Smiley langue donc je vais creuser du côté javascript et voir si je trouve quelque chose !
Considération personnelle bien sûr, la meilleure solution serait de ne pas utiliser d'images dans ton menu, étant donné que ces images ne sont utilisées, dans ton cas, que comme ersatz de texte... Certes l'effet visuel ne sera sans doute pas le même, toujours est-il que ton menu sera, à mes yeux bien sûr, bien plus beau, car il n'y a pas que l'esthétique qui compte hu ? Smiley cligne

Sinon j'ai déjà été dans le même cas que toi (mettre des images en tant que lien d'un menu), par contre je n'ai pas fait la solution précédement citée, j'ai simplement mis un élément span à l'intérieur de mes li, lesquels indiquaient le texte de l'image de chacun des lien. Je les ai ensuite mis en position absolue avec un top à -9999px. Résultat, ils sont invisibles, et lorsque l'on lit ton code, on peut voir le contenu de chaque lien "en dur". Mais fait pas ça, j'imagine que c'est anti-accessible et qu'il ne faut jamais le faire :x
Modifié par PHPnewb (05 Dec 2010 - 16:41)
Doccc a écrit :
Tu me conseil donc te placer mon texte et de gérer uniquement le hover en image ?


Je ne suis pas un expert, très loin de là, cependant je te conseillerais simplement de mettre le dégradé blanc -> gris en background et de gérer l'écriture "en dur", directement en XHTML/CSS. En gros, un truc comme ça:

http://jsfiddle.net/JkevM/2/

Voilà... Mais si tu tiens vraiment à avoir des images, y'a pas de problèmes ^^
Modifié par PHPnewb (05 Dec 2010 - 17:09)
C'est énorme jsfiddle, je connaissais pas !
Je vais réfléchir et te tiens au courant Smiley cligne
Finalement, je me suis tourné vers l'article sur les sprites et j'ai corriger mon code de départ !

Merci Smiley cligne
Modérateur
C'est comme tu veux, mais les menus de navigation en sprites qui dépendent de l'activation des images et/ou des CSS, j'ai toujours trouvé que c'était une bêtise sans nom. Smiley nono

Les sprites sont pertinents pour des icônes ou des éléments de design, mais pas pour un menu de navigation.
Modifié par Tony Monast (06 Dec 2010 - 01:36)
Merci pour ce conseil, j'ai donc réaliser le menu en Javascript grâce à un excellent post sur le forum http://forum.alsacreations.com/topic-5-46637-1.html et un super article : http://www.alsacreations.com/tuto/lire/562-bonnes-pratiques-javascript.html

mais malheureusement mon menu ne fonctionne que sur IE, sur Chrome il est complètement décalé et ne réagit pas au MouseHover.

Et sur Firefox, il est aligné comme il faut mais ne réagit pas !

Je dois m'absenter la mais à mon retour, je détaillerais plus !
Modifié par Doccc (06 Dec 2010 - 13:49)
Bonjour,

Chrome fait des siennes sur l'alignement, je vais regarder sa ainsi que le script !


Merci de votre aide

Edit : Le script fonctionne mais toujours des problèmes sur Chrome, je vais finir par trouver !
Modifié par Doccc (09 Dec 2010 - 23:39)
Bonsoir,
J'ai pas encore résolu le problème de mon menu sous Chrome ( il me double la hauteur) mais j'ai une autre question toute bête qui me vient à l'esprit, quand on cliquera sur un lien du menu, comment sa doit se passer ?
Ma div central disparaît pour en faire apparaître une autre ou juste le contenu ?

Merci
Bonsoir,
J'ai trouvé la réponse à ma question bête, j'ai utilisé des include et tout fonctionne !
Toujours ce problème avec le script menu sous chrome, si quelqu'un pouvait jeter un coup d'oeil...

Merci et bonne soirée
Sujet clos
Aller à