[On va dire resolu] Menu liste à puce inline

(reprise du message précédent)

Poire a écrit :
remplace display: inline; par float: left;

et passe les liens en display: block;

Oui mais ça complique des choses qui devraient rester simples. Et ça oblige à imposer une hauteur au <ul> (sinon les liens s'affichent en dehors à cause du float), ou alors un séparateur muni d'un clear.

Bref : c'est un problème assez curieux en effet.

La solution de poire fonctionne, mais partiellement. Si tu places le background dans #menu a au lieu de #menu, c'est déjà mieux.

Puisqu'on a de toute façon besoin d'une image de fond, je suggère les "sprites".
http://pompage.net/pompe/sprites/
Modifié le 04 Jan 2005 - 18:16

Juste pour revenir sur le display: block; + float: left ;
Pas besoin de passer en block quand on est en float si j'ai bonne mémoire ?

@Olivier, le block il faut bien le dimensionner ?

Voici un test avec block et float:

*{margin:0;
padding:0;}

ul#menu{
background: #dddddd;
width:100%;
height:25px;}
 
ul#menu li{
list-style-type: none;
float:left;
text-align:center
}

ul#menu li a{
display:block;
width:100px;
height:25px;
line-height:25px;
border-right: 1px solid #cccccc;
color: #666666;
}
ul#menu li a:hover {
 background: #ffffff;
 color: #000000;
} 

ElMoustiko a écrit :

Pas besoin de passer en block quand on est en float si j'ai bonne mémoire ?

Exact : Float et les positionnements absolus et fixes transforment automatiquement l'élément en bloc.

Mais dans ce cas, il faut mettre les <li> *et* les <a> en float. C'est relativement lourd, surtout que la version inline semble tout à fait logique.

Heuuuuu ! en passant, un peu plus haut j'ai mis un lien... Pourquoi je n'ai pas ce problème sur ma page ?
Modifié le 04 Jan 2005 - 18:28

Bah tu as espace|espace et comme plusieurs espaces en font toujours un seul il y ai aussi.

@dominique

Il est peut-être pas visible parce que tu n'as pas de background-color sur tes hover ?

Bon j'ai testé avec le tous sur une ligne dans le source ça marceh sous firefix 1.0 pour windows, le tout dernier firefox pour linux et ie 6.

Stephan tu as quel Firefox ?

Les gens sous mac peuvent tester et me dire si ça marche avec la ruse de tout sur une ligne ?
Modifié le 04 Jan 2005 - 18:38

Bah moi aussi, mais chez moi ça marche ?!

littlesam a écrit :

Bah moi aussi, mais chez moi ça marche ?!

Tu as raison, j'ai peut-être oublié d'actualiser la page...

OK sous Mozilla 1.8, Netscape 7.1 et Opera 7.5

Bon bah je vais tout metter en une ligne
C'est pas terrible pour se relire mais ça s'affiche bien c'est l'essentiel

Raphael a écrit :

Oui mais ça complique des choses qui devraient rester simples. Et ça oblige à imposer une hauteur au <ul> (sinon les liens s'affichent en dehors à cause du float), ou alors un séparateur muni d'un clear.

Bref : c'est un problème assez curieux en effet.

c'est la méthode tuto alsa sur les menus

Moi j'aime pas faire compliqué pour rien...
C'est pas super de se prendre la tête avec les floats quand ça n'apporte rien de plus

Poire a écrit :

c'est la méthode tuto alsa sur les menus

Oui, les floats sont quasi nécessaires lorsque tu veux faire un menu avec des "boutons" dimensionnés (largeur / hauteur) comme c'est le cas sur ce tutoriel.
Mais il est vrai que les float, sortant du flux, peuvent par conséquent poser des problèmes avec l'arrière plan du menu s'il y'en a un.

littlesam a écrit :
C'est pas super de se prendre la tête avec les floats quand ça n'apporte rien de plus

On est d'accord.

Il faudrait une liste de cas où utiliser les floats et ou ne pas utiliser les floats.
Pour résumer, le mieux c'est de ne pas brser le flux ?

J'ai le code suivant :

<div class="menuH">
	<ul class="lstBouttonsH">
		<li><a href="/">ThumbClic</a></li>
		<li><a href="/">Delphi</a></li>
	</ul>
</div>

.menuH {
	position: absolute;
	background-image: url(images/menuHMiddle.png);
	background-repeat: repeat-x;
	top: 90px;
	left: 200px;
	height: 40px;
	right: 200px;
}
.lstBouttonsH {
	list-style-type: none;
	margin: 0;
	padding: 0;	
}
.lstBouttonsH li {	
	float: left;
	margin: 0;
	padding: 0;	
}
.lstBouttonsH a {
	line-height: 40px;
	display: block;
	text-align: center;
	color: Black;
	font-style: normal;
	font-family: "Comic Sans MS", serif;
	font-weight: bold;
	text-decoration: none;
	padding-left: 5px;
	padding-right: 5px;	
}
.lstBouttonsH a:hover {
	color:#1E8ED3;
	background-image: url(images/menuHSelected.png);
	background-repeat: repeat-x;
	width: auto;
	height: auto;
}

Et je n'ai aucun pb d'affichage (enfin sur IE / FF)
Il y a mieux comme code ?

Poire tu utilises des tailles fixées en px (line-height) ici ce qui signifie que si tu augmente la police de caractère tu vas te retrouver en dehors du bouton.

De plus si tu as une disposition de ta page en float en dessous il va falloir un élément en clear both pour pas que ça vienne se coler après le menu, enfin j'ai pas testé mais ça risque.

Et enfin ton code est loin d'être conci et agraéble à lire un display:inline me parait donc plus joli.

En ce qui concerne le problème, j'ai trouvé une piste ici :
http://archivist.incutio.com/viewlist/css-discuss/38860

A tester. Dans le même genre j'ai une idée (mais j'ai pas de quoi tester sous la main) : mettre un margin-left: -1em; sur li. Comme ça on décale de la largeur d'un espace et c'est masqué.