5568 sujets

Sémantique web et HTML

Pourquoi devrait-on utiliser une liste pour créer un menu ?

Pages :
(reprise du message précédent)

Je pense que ceci fonctionne :

#menu li {
text-align: center;
background: #fff;
width: 100%
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
width: 100%;
border: 0 none;
}
Et bien, Sopo, je crois qu'effectivement, c'est bon !!!

Je refais quelques tests avant de placer un "Résolu" de victoire Smiley biggrin

Question complémentaire : pourquoi de grands noms de la discipline utilisent des solutions bien plus lourdes ?

Je vien d'essayer sur Opera et Firefox, et cela est ok. Reste Safari et Netscape.
a écrit :
Question complémentaire : pourquoi de grands noms de la discipline utilisent des solutions bien plus lourdes ?


Ca c'est une bonne question !! Bien plus intéressante que "pourquoi on n'utiliserait pas des tableaux à la place des listes" Smiley lol

Ne cherche pas trop quand même, sinon tu finiras bien par trouver un truc qui foire quelque part Smiley cligne

Edit : si ça marche vraiment partout, faudrait p-e le signaler à Raphaël.
Modifié par Sopo (22 May 2006 - 18:06)
Je serai en mesure, demain, de faire un test sur IE mac, Netscape et Safari.

T'inquiètes pas, sur IE Mac, je ne cherche pas la perfection : juste vérifier que le menu est fonctionnel, c'est tout.

Dès que j'ai le résultat, je confirme ici et propose à Raphäel de placer l'unique ligne CSS qui change tout sur IE !

1000 mercis à toi, Sopo, en attendant.
Tu es un as ! Smiley prie
Ouais, en fait dans la solution proposée, la seule chose qui change par rapport à un code standard (sans correction de bug), c'est le width: 100%;.

Or, la propriété width a pour caractéristique de conférer le layout à l'élément concerné, dans Internet Explorer (windows). Donc, mes soupçons se renforcent.

Du coup, je ferais bien le test avec un zoom: 1; sur le li à la place de la largeur, pour voir.
Francois-Pierre a écrit :
Mpop, oui, l'effet avec zoom:1 est le même. Ca marche.

Ben voilà, bête petit problème de HasLayout. C'est dingue, j'arrête pas d'en trouver ces temps-ci. Et beaucoup qui sont pas répertoriés par Laurent Denis. Faudrait que je lui demande s'il en connaît beaucoup qui ne sont pas dans son site dédié, et s'il a besoin d'un coup de main pour compléter…
Francois-Pierre a écrit :
Le cas n'est pas vraiment le même.

Dans le cas mentionné ci-dessus, j'ai 3 menus.

une liste doit donc apparaître non plus verticalement, mais horizontalement.


Par pitié donne nous le code précis que tu as utilisé.<edit>Oops j'avais pas vu qu'il y avait deux pages</edit>
Modifié par clb56 (22 May 2006 - 20:35)
Je pense que ce n'est pas tout à fait résolu...
Pour ce cas il fallait conférer le layout aux éléments LI. et un commentaire conditionnel est préférable. Comme width:100% n'est utile qu'à IE .
J'ai un autre cas ou je vous défi de trouver une solution sans passer en quirkmode :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>Liste</title>
<style type="text/css" >
.nav {
	[#red]position:absolute;[/#]
	margin: 0;
	padding: 0;
	list-style: none;
	}
.nav li {
	text-align: center;
	border: 1px solid black;
	margin: 2px 0;
	}
.nav li a {
	display: block;
	width: 200px;
	}
.nav li a:hover {
	color: red;
	background:#eee;
	}
</style>	
<!--[if lte IE 6]>
<style>
 *{height:0; /* ne marche pas */}
</style>
<![endif ]-->
	</head>
	<body>
		<ul class="nav">
			<li><a href="test.html" title="test">Test</a></li>
			<li><a href="test.html" title="test">Test</a></li>
			<li><a href="test.html" title="test">Test</a></li>
		</ul>
	</body>
</html>


C'est l' exemple de Sopo avec position:absolute ajoutée à UL
Modifié par chmel (22 May 2006 - 22:25)
Hello chmel,
En intégrant le border: 1px solid black; au ".nav li a" plutôt, qu'au ".nav li" on obtient un meilleur focus sous IE, mais c'est vrai que ce n'est pas la panacée.

M'interesse ton truc, je vais plancher dessus.
Bon, j'ai une soluce, qui comme d'habitude, à défaut d'être élégante, fonctionne.

Il suffit d'ajouter un background au "li a". Le problème c'est que IE ne gérant pas le "transparent" on se trouve confronté à un problème de mise en page.

Soit tu as un fond uni sous ta liste et dans ce cas il suffit de reprendre la couleur de fond, soit on doit hélas recourir au retour du "spacer" en mettant une image transparente en fond, ce qui donnerait : 


.nav {
	position:absolute;
	margin: 0;
	padding: 0;
	list-style: none;
	}

.nav li {
	text-align: center;
	margin: 2px 0;
	width:200px;
	border: 1px solid black;
	}

.nav li a {
	display:block;
	width: 100%;
	background: transparent url(transparent.gif);*/à toi de voir si on le met en conditionnel ou pas - à la place de transparent tu peux mettre ta couleur de fond/*
	}

.nav li a:hover {
	color: red;
	background:#eee;
	}


Wala,
Aymeric

PS : ce qui est marrant, c'est que même si l'image utilisee en fond n'existe pas ça fonctionne. ^^
Modifié par AymericJ (23 May 2006 - 09:15)
Bonjour et merci AymericJ

La solution est bien d'apporter un background aux éléments a, comme si IE/win perdait des attributs hérités quand on le sort du flux normal de la page.
Dans ce cas ce n'était pas un problème de layout.
J'ai mis background:#fff et ça fonctionne. Background:transparent est un autre bug IE.
Est-ce qu'il y a un site qui énumère tous les bug de IE/win et ses solution en français? serait une bonne question à poser sur ce forum car là, on commence à déborder le sujet Smiley lol
Modifié par chmel (23 May 2006 - 11:08)
Pages :
Sujet clos
Aller à