Discussion :

[Kerweb]

Bonjour,

Je viens de récupérer une maquette que je dois modifier assez rapidement pour faire une première présentation :

Je vous vois déjà venir, bouuuu table pas bien, etc... mais j'ai pas le temps de clarifier tout ça, une fois que le principe de navigation sera accepté, je m'attaquerai directement au code.

Pour l'instant donc j'ai un souci avec le menu déroulant, apparemment il utiliserait une fonction Javascript qu'on trouve assez souvent pour faire afficher un élément de liste. Sous FF et IE7 aucuns problèmes mais sous IE6 (encore lui...) les éléments du menu déroulés réagissent bizarrement. La liste sur fond jaune prend toute la largeur de la balise <ul> au lieu de n'entourer que le texte.
Je suis pas sûr de bien expliquer donc je vous laisse regarder directement, vous comprendrez mieux.

Est-ce que quelqu'un peut m'éclairer sur ce petit problème ?

Merci d'avance

[Bisûnûrs]

Quand on va sur un sous-menu, il se cache aussi sur IE6.

Personnellement je te conseille :
http://css.developpez.com/galerie/?p...orizontaux#MH1

[Kerweb]

Est-ce que je peux arriver exactement au même rendu que celui qui est déjà en place avec le menu que tu proposes ?
Je demande ça car si j'aurais peut être pas le temps d'y passer un long moment dessus aujourd'hui. Mais merci pour le lien en tout cas !



(je déteste qu'on me refile des projet à moitié bouclé dans les pattes...)

[Bisûnûrs]

Est-ce que je peux arriver exactement au même rendu que celui qui est déjà en place avec le menu que tu proposes ?

Oui, sans problème, en modifiant un poil le CSS, et si tu maîtrises un minimum le CSS ça peut être bouclé en moins de 10 minutes.

[Kerweb]

Ok cool, j'vais regarder ça en début d'aprem.

Quand on va sur un sous-menu, il se cache aussi sur IE6.

J'ai pas trop compris là le menu n'apparait pas quand tu passes la souris sur le titre de liste ?
Chez moi ça apparait bien mais la balise LI qui se déroule prend toutes la largeur de la liste UL.

[Bisûnûrs]

Le sous-menus apparaît bien, mais lorsqu'on veut aller sur ce sous-menu justement, il se cache. D'où mon lien qui te renvoie vers un menu nickel.

[Kerweb]

C'est marrant ça réagit pas pareil chez moi. Enfin bon, encore un mystère iexplorien...

[djoyeux]

chez moi sur ma machine virtuel avec IE6 sur XPSP2 tout juste installé c pareille que chez Bisûnûrs.

Et je comfirme j'ai un menu CSS sur un de mes site qui réagit exactement comme le tiens sauf qu'il fonctionne sur la plupart des navigateurs.

[Kerweb]

J'ai adapté la maquette en div :

Mais j'ai quelques soucis avec le menu de Bisûnûrs. Déjà d'où vient ce décalage avec le bandeau et pourquoi est-ce que les éléments de la liste sont tous à droite ?

[Kerweb]

J'ai retenté quelques modifs mais toujours rien

[Bisûnûrs]

Mets

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

padding:0;

sur tes ul de sous-menus.

[Kerweb]

Merci, ça résout pas mal de décalage. Je pense jamais à cet histoire de padding/margin. Mon décalage du haut venait du margin que je n'avais pas initialisé.

Il me reste 1 "problème" : le fait que les éléments de sous menu passent à la ligne et que le survol ne se fasse que sur le texte en lui même (je ne sais pas si ça vient du même problème ou pas).

[onirisme]

Il me reste 1 "problème" : le fait que les éléments de sous menu passent à la ligne et que le survol ne se fasse que sur le texte en lui même (je ne sais pas si ça vient du même problème ou pas).

Concernant le passage à la ligne, c'est lié à la taille de tes block ; je m'explique, tes li sont relatifs à tes ul et prennent donc la même largeur.

Deux solution :
1°) Soit tu refais tout ton menu et tu le mets sur toute la largeur de la page en reformatant ton menu
2° soit tu ajoutes nowarp à ton style

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
#menubandeau ul li { /*chaque sous-menu*/
white-space:nowrap;

Personnellement, je pense qu'il vaut mieux refaire ton menu avec des block de taille fixe. Ce sera plus propre. Si tu veux, je te fait un petit truc dan la matinée.

[Kerweb]

Je pensais que le nowrap concernait uniquement les tableaux.

Je viens de rajouter ce bout de code, maintenant c'est bon pour la plupart sauf dans "Le Bateau" où le 4è élément se met à la suite du 3ème, sur la même ligne.

Je sais que ça vient du fait que la largeur n'est pas fixe, comme tu le proposes, mais justement, on m'a demandé de faire le menu comme ça. Les titres sont au "kilomètre", pas de largeur égale pour chaque, et les éléments de sous-menu doivent s'afficher sur une ligne (les éléments dépassent donc la largeur de leur titre respectifs).

Personnellement, je pense qu'il vaut mieux refaire ton menu avec des block de taille fixe. Ce sera plus propre. Si tu veux, je te fait un petit truc dan la matinée.

Si ça ne te prend pas trop de temps, ça me dirais bien oui, je pourrai comparer directement avec ce que j'ai fais et voir où sont mes erreurs (j'ai déjà noté pas mal de trucs que j'oubliais de prendre en compte). Par contre si c'était possible que les blocs ne soient pas de taille fixe et que les éléments de lien prennent toute la largeur du sous-menu ça serait génial

[onirisme]

Bon, voilà ce que j'ai fait rapidement.

J'ai modifier quelques petites choses.

J'ai changer certaines balises du menu
Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
<div id="menubandeau">
			<dt>
				<dd onmouseover="montre('smenu6',true);" onmouseout="montre('smenu6',false);">Akena
					<ul id="smenu6">
						<li><a href="#">Sponsor</a></li>
						<li><a href="#">Investissement</a></li>
					</ul>
				</dd>
			</dt>
....
</div>

Ca ne change pas grand chose mais ça permet d'avoir un code plus clair que des #menubandeau ul li ul li {

Le fichier étant assez gros, je te donne l'adresse du zip que tu peux télécharger ICI

Le résultat est ICI

Je n'ai pas touché à ton script .js

J'ai du modifier le chemin des images dans le css pour test et j'ai également ajouter certaines lignes (pour visualisation) que tu pourras retirer.

Je sais que ça vient du fait que la largeur n'est pas fixe, comme tu le proposes, mais justement, on m'a demandé de faire le menu comme ça. Les titres sont au "kilomètre", pas de largeur égale pour chaque, et les éléments de sous-menu doivent s'afficher sur une ligne (les éléments dépassent donc la largeur de leur titre respectifs).

J'ai bien compris le problème, c'est à toi de voir...
Quand aux éléments du sous menu qui s'affiche sur une ligne, ce n'est pas le cas dans mon exemple etant donné que j'ai fixé une largeur à 120px.

Si tu souhaites avoir les sous menus sur une ligne modifies les css de la balise dd avec un truc du genre ->

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
#menubandeau dd{
	position : relative ;
	display : block ;
	text-align : center ;
	float : left ; 
	margin : 0 0 0 5px ;
	padding : 0 ;
 
}

Pas sûr du resultat.

[Kerweb]

Merci bien pour cet exemple.

Si je veux quand même ne pas fixer de largeur et que chaque élément des sous menus soit sur 1 seule ligne, qu'est-ce que je dois rajouter ?

[Kerweb]

Personne n'aurait d'idée là dessus ?

[onirisme]

Dans ce cas, conserve la version actuelle de ton menu, elle correspond à ce que tu souhaites.

[Kerweb]

Non justement ça ne réagit pas comme il faut.

mais sous IE6 (encore lui...) les éléments du menu déroulés réagissent bizarrement. La liste sur fond jaune prend toute la largeur de la balise <ul> au lieu de n'entourer que le texte.