Le DVD vidéo de Florent V. :

Elephorm apprendre XHTML et CSS
Rechercher dans le sujet :
Forum
» CSS et mise en forme
» Menu utiliser des listes ou des tableaux ?
Auteur
EricLB
# 03 Dec 2006 - 19:17:11
Citer
363 Posts
 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 :
previews/3208-rendu-ie.png

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 ?
http://www.lesintegristes.net/ 
^
EricLB
# 04 Dec 2006 - 20:42:51
Citer
363 Posts
 Personne n'a de solution à proposer ? decu

http://www.lesintegristes.net/ 
^
knarf
# 04 Dec 2006 - 20:53:24
Citer
988 Posts
 bonjour,

je n'ai pas testé mais en rajoutant le "width:100%" au lien en display-block
http://www.web-pour-tous.org 
^
EricLB
# 04 Dec 2006 - 21:41:41
Citer
363 Posts
 Non, déjà testé !
http://www.lesintegristes.net/ 
^
knarf
# 05 Dec 2006 - 05:33:19
Citer
988 Posts
 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)
http://www.web-pour-tous.org 
^
EricLB
# 05 Dec 2006 - 07:38:47
Citer
363 Posts
 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 fache

http://www.lesintegristes.net/ 
^
EricLB
# 05 Dec 2006 - 17:50:48
Citer
363 Posts
 Personne n'est encore au point sur les bugs d'IE7 ?
C'est étonnant langue

http://www.lesintegristes.net/ 
^
Raphael
# 05 Dec 2006 - 18:18:33
Citer
Mangez des kiwiz !
Administrateur
11080 Posts
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 fache

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)
Le saviez-vous ? Alsacréations propose dorénavant des formations web (XHTML/CSS, accessibilité, Flash, jQuery).
http://www.goetter.fr 
^
gcyrillus
# 05 Dec 2006 - 18:25:58
Citer
1234 Posts
 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)
Mes quelques resources sur la mise en forme : http://yidille.free.fr/plux/valign : trés fouillis et en français plus que moyen
http://re7net.com 
^
20cent
# 06 Dec 2006 - 16:59:41
Citer
165 Posts
 Bingo !
Pfiou, c'était pas de la tarte ! murf

http://20cent.net/docs/divers/eric.html
Vincent
http://www.htmlzengarden.com 
^
EricLB
# 07 Dec 2006 - 10:20:24
Citer
363 Posts
20cent a écrit :
Bingo !
Pfiou, c'était pas de la tarte ! murf

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
http://www.lesintegristes.net/ 
^
EricLB
# 07 Dec 2006 - 10:23:47
Citer
363 Posts
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)
http://www.lesintegristes.net/ 
^
gcyrillus
# 07 Dec 2006 - 22:08:48
Citer
1234 Posts
 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>


++
Mes quelques resources sur la mise en forme : http://yidille.free.fr/plux/valign : trés fouillis et en français plus que moyen
http://re7net.com 
^
chmel
# 08 Dec 2006 - 00:07:20
Citer
654 Posts
EricLB a écrit :


menu déroulant

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

^
EricLB
# 08 Dec 2006 - 00:45:20
Citer
363 Posts
 Oups ! Effectivement, j'en suis à la enième version et les noms ont changé.

Désolé confused

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)
http://www.lesintegristes.net/ 
^
gcyrillus
# 08 Dec 2006 - 01:14:00
Citer
1234 Posts
 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 smile .
</>

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.
Mes quelques resources sur la mise en forme : http://yidille.free.fr/plux/valign : trés fouillis et en français plus que moyen
http://re7net.com 
^
chmel
# 08 Dec 2006 - 22:51:18
Citer
654 Posts
EricLB a écrit :
Ta version fonctionne chez moi dans IE7 (version standalone)
Merci


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)
^
Le sujet est clos.
Aller à
Powered by Phedio v3.8.5 beta in 12.7 ms © dew