Menu utiliser des listes ou des tableaux ?

Bonjour vaut-il mieux utiliser des listes ou des tableaux pour les menus déroulants ?

Facile, vous me direz : des listes ! Les tableaux ne sont pas là pour cet usage. Ok, je suis d'accord avec vous mais comment faire dans ce cas :

Celà ne concerne que IE 6 et IE 7 :

1° Option menu liste

code html

<ul class="titres">
			<li >
				<a href="#">Rubrique 1					 
				</a>
				<ul>
					<li><a href="#">Sous rubrique 1</a></li>
					<li><a href="#">Sous rubrique 2</a></li>
					<li class="hover-mouse"><a href="#">Sous rubrique 3</a></li>
					<li><a href="#">Sous rubrique 4</a></li>
					<li><a href="#">Sous rubrique 5 un peu plus longue</a></li>
				</ul>	
			</li>			
		</ul>

code css

		body{font-family:arial;}
		ul, li{margin:0;padding:0;list-style-type:none;}
		ul.titres li{position:relative;float:left;margin-right:2px;width:95px;}
		ul.titres li a{display:block;font-size:10pt;font-variant:small-caps;text-decoration:none;color:#333;}
		/* Sous rubriques */
		ul.titres li ul{position:absolute;left:0;top:15px;padding:5px 0;border:1px solid #f00;}
		ul.titres li ul li{width:100%;float:none;margin:0;padding:0;border:1px solid #000;}		
			
		ul.titres li ul li a{display:block;padding:0 10px;font-variant:normal;white-space:nowrap;}
		ul.titres li ul li a:hover, ul.titres li ul li.hover-mouse a{color:#fff;background-color:#f00;}/* sur toute la longueur avec Firefox */
		

L'élément conteneur ul a une largeur de 95px, le white-space:nowrap; empêche le texte de passer à la ligne. La conteneur prend la taille du dernier élément de liste plus long que les autres.
Dasn IE 6 et IE7, sur les 4 premiers éléments de liste, au roll-over le fond change de couleur sur 95px pour les 4 premiers et sur toute la longueur pour le dernier.

Voici une image pour illustrer le propos :


Si je remplace la liste des sous-rubriques par un tableau, je peux faire changer le fond de couleur sur toute la longueur et j'obtiens l'effet voulu...

Une autre solution ?

Personne n'a de solution à proposer ?

bonjour,

je n'ai pas testé mais en rajoutant le "width:100%" au lien en display-block

Non, déjà testé !

Bonjour Eric,

Ce doit être un problème de haslayout avec IE car apperement en rajoutant "height:1px" au lien cela semble fonctionner ils prennent toute la largeur au moins sous IE6.
Modifié par knarf (05 Dec 2006 - 05:36)

Oui au moins sur IE6... C'est ça leproblème, si tu regardes dans IE7, il n'y a pasde changement. En fait le problème maintenant ce n'est plus IE6 mais IE7 ! Merci Microsoft

Personne n'est encore au point sur les bugs d'IE7 ?
C'est étonnant

EricLB a écrit :
Oui au moins sur IE6... C'est ça leproblème, si tu regardes dans IE7, il n'y a pasde changement. En fait le problème maintenant ce n'est plus IE6 mais IE7 ! Merci Microsoft

Je n'ai fait que survoler le sujet, mais il semblerait que ce soit au départ un bug de IE6 et non de IE7.

Tu as bien utilisé les commentaires conditionnels, pour corriger le bug uniquement sur IE6 et inférieur ?

Sinon, as-tu essayé zoom:1, souvent plus inoffensif ?
Modifié par Raphael (05 Dec 2006 - 18:19)

bonjour,

sans avoir tester , tuas dans l'ul parente un :width:95px + les 2em de padding par defaut de IE , qui t'amene vers 113px de largeur ... appliquer a ul li ul li ... par un width : 100% ... ce width 100% correspond pour IE a la derniere reference de taille trouvé dans les parents.

Il va laisser "s'aggrandir" , mais dimensionnera au max et par defaut a 95px+2em (selon ton css ) et faire fis de la largeur reele de son parents directe qui n'a pas de dimension donnée.

Essai voir en appliquant le zoom:1; a ul li ul si cela suffit a activé le width:100% comme attendu .

++

<edit>

peut-etre quen laissant tombé le width 100%; et en mettant par exemple un :height:1em ou 1.2em sur a , tu aurais le layout et plus la limite en largeur du parent.

re ++ </>
Modifié par gcyrillus (05 Dec 2006 - 18:32)

Bingo !
Pfiou, c'était pas de la tarte !

http://20cent.net/docs/divers/eric.html

20cent a écrit :
Bingo !
Pfiou, c'était pas de la tarte !

http://20cent.net/docs/divers/eric.html

Salut Vincent,

J'ai essayé ta méthode appliqué à mon cas, mais je n'arrive pas ton résultat...

menu déroulant

gcyrillus a écrit :
bonjour,

sans avoir tester , tuas dans l'ul parente un :width:95px + les 2em de padding par defaut de IE , qui t'amene vers 113px de largeur ... appliquer a ul li ul li ... par un width : 100% ... ce width 100% correspond pour IE a la derniere reference de taille trouvé dans les parents.

Il va laisser "s'aggrandir" , mais dimensionnera au max et par defaut a 95px+2em (selon ton css ) et faire fis de la largeur reele de son parents directe qui n'a pas de dimension donnée.

Essai voir en appliquant le zoom:1; a ul li ul si cela suffit a activé le width:100% comme attendu .

++

<edit>

peut-etre quen laissant tombé le width 100%; et en mettant par exemple un :height:1em ou 1.2em sur a , tu aurais le layout et plus la limite en largeur du parent.

re ++ </>

Bonjour,

Dans ce genre de cas la première chose que je fais est de tester zoom:1; ou height:1% pour les problèmes de layout dans IE - dans ce cas c'est inefficace.

Pour le padding de 2 dans IE, ça ne peut pas être le cas puisque j'ai mis les margin et padding des ul et li à 0 (1° ligne des css)
Modifié par EricLB (07 Dec 2006 - 10:24)

bonsoir,

ton css repris pour illustrer mes idées en parties ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html 

xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head><title>EricLb</title>
<style type='text/css'>body{font-family:arial;}
		ul, li{
	margin:0;
	padding:0;
	list-style-type:none;
}
		ul.titres li{
	position:relative;
	float:left;
	margin-right:2px;

}
		ul.titres li a{
	display:block;
	font-size:10pt;	
	font-variant:small-caps;
	text-decoration:none;
	color:#333;
}
		/* Sous rubriques */
		ul.titres li ul{
	position:absolute;
	left:0;top:15px;
	padding:5px 0;
	border:1px solid #f00;

}
		ul.titres li ul li{
	float:none;
	margin:0;
	padding:0;
	line-height:0em;
}		
		ul.titres li ul li a{
	display:block;
	padding:0 10px;
	font-variant:normal;
	white-space:nowrap;
	border:1px solid #000;
	line-height:1em;
}
		ul.titres li ul li a:hover {
	color:#fff;
	background-color:#f00;

}
ul.titres li ul li.hover-mouse a {
	color:#fff;
	background-color:#f01;
}
/* sur toute la longueur avec Firefox */
</style>
</head><body><ul class="titres">
			<li >
				<a href="#">Rubrique 1					 
				</a>
				<ul>
					<li><a href="#">Sous rubrique 1</a></li>
					<li><a href="#">Sous rubrique 2</a></li>
					<li class="hover-mouse"><a href="#">Sous rubrique 3</a></li>
					<li><a href="#">Sous rubrique 4</a></li>
					<li><a href="#">Sous rubrique 5 un peu plus longue</a></li>
				</ul>	
			</li>			
		</ul>
</body></html>

++

EricLB a écrit :


menu déroulant

Bonjour, EricB
Ton lien ne marche pas .
J'ai cru comprendre que tu as un problème de hashlayout. Je serait curieux de savoir si ma version fonctionne sur IE7

Oups ! Effectivement, j'en suis à la enième version et les noms ont changé.

Désolé

Ta version fonctionne chez moi dans IE7 (version standalone)

Je ne pense pas refaire mon code (j'ai trop ramé pour obtenir un truc qui tienne la route) mais ton code est simple et efficace - j'aurais pas pensé aux marges négatives, je suis même étonné que ça fonctionne aussi bien !

Je reprends mon post... J'avais pas vu que ton code était basé uniquement sur du js pour le comportement ! L'idée de ce que j'ai fait est que celà puisse fonctionner même sans js (sauf pour IE)
Modifié par EricLB (08 Dec 2006 - 00:47)

bonsoir,

@chmel

Ben moi dans ma version standalone (beta embarqué ) , ul s'ecrase sur elle même et ne laisse pas apparaitre ses li , qui reagissent au hover .

Avec un height:2em , le menu apparait enfin .
</>

J'ai plusieurs version de IE en standalone et j'ai gardé IE6 en version "normale" ... sauf que je viens de m'apercevoir , qu'il comprend : "!important , sitot que je lance IE7 , me reste plus qu'a rebooté ....

Arf decidement , ce IE est un vrai mystere et du coup je n'ai aucune idée du vrai rendu par IE6 de mon code precedement posté.

pour ce qui est de ton probleme , je mantient qu'il vient des limites imposée par la taille du parent et de sa marge de 2em (margin).

En appliquant le layout ,et sans dimension aux parents , les li occupent alors la largeur de la page. ... Une histoire a se mordre la queue.

Le js , semble etre une soluce avantageuse pour toi en estimant que tu en ais besoin pour un menu deroulant compatible IE.

Désolé de ne pas pouvoir t'aider plus que ça.

EricLB a écrit :
Ta version fonctionne chez moi dans IE7 (version standalone)

Merci

a écrit :


Je reprends mon post... J'avais pas vu que ton code était basé uniquement sur du js pour le comportement ! L'idée de ce que j'ai fait est que celà puisse fonctionner même sans js (sauf pour IE)

ouais, mais ça ne marche pas au clavier et tes liens en display:block des sous-menus n'y sont pas vraiment sous IE.

J'ai fait marcher ton menu avec mon script. Pour cela, j'ai pas mal simplifié ton CSS et pour éviter des problèmes avec les bordures sous IE, j'utilise plutot margin-left que display:none pour cacher les sous-menus
Modifié par chmel (10 Dec 2006 - 22:47)