Largeur des <LI> sous FireFox

10 févr. 2007, 18:51

Bonjour,

Ayant décidé de faire un effort et de me passer de tableau pour faire une barre de lien, j'ai utilisé une liste et ait défini l'attribut display à inline. Jusque là pas de soucis. J'ai ensuite voulu que mes liens aient tous la même taille, j'ai ajouté donc un width, ce qui marche impécablement sous IE, mais sous FF, c'est le drame. Enfin pas vraiment, mais il en a visiblement rien à secouer de mes width :

<ul>
  <li><a href="..."><img src="..." /></a></li>
  <li><a href="..."><img src="..." /></a></li>
  <li><a href="..."><img src="..." /></a></li>
</ul>

Nota: les images n'ont pas la même longeur, et "non", je ne souhaite pas les modifier, je préfère coller un tableau pour la présentation s'il le faut

Code : Tout sélectionner

UL { 
  margin:0px; 
  padding:0px;
  width:100%; 
}
LI { 
  display: inline;
  margin:0px;
  padding:0px;
  text-align:center; 
  width: 150px;
}

Résultat sous IE j'ai un truc impec qui ressemble à ça :

Code : Tout sélectionner

- [__________] [__________] [__________] -

Et sous FF un truc pas beau :

Code : Tout sélectionner

- [____] [_______] [_] -

A votre bon coeur, pour m'dire ce qui ne va pas, m'sieur dame

10 févr. 2007, 19:33

hello,

ton li avec n display: block et un float: left et normalement ca devrait faire l'affaire

bon courage !

10 févr. 2007, 21:28

Cool ! Merci m'sieur

Bon je comprends pas pourquoi il faut mettre un float pour que le width soit pris en compte, mais au moins ça fonctionne.

Par contre ca m'oblige aussi à coller un <br clear="left" /> après la liste, sinon ce qui suit se retrouve callé à droite, en dépit du div qui entoure la liste... m'enfin bon... firefox quoi..

10 févr. 2007, 22:01

Ce n'est pas le float, c'est le "inline" vs "block". À ma connaissance, les éléments "inline" n'ont pas de largeur définie. (ou un truc du genre, en fait j'en ai aucune idée, je ne fais que régurgiter le manuel

)

10 févr. 2007, 22:36

reuh !

en y repensant apres coup, pitetre qu'une solution B serait de définir des liens en block plutot... ca en fait des boutons et c'est plus pratique..
truc du genre :

.li{
display: inline;
}
li a{
display: block;
width: ...
}

à tester...

11 févr. 2007, 12:11

Ouep, j'avais essayé, mais ca me fait perdre le display:inline du <li> et tous mes liens sont à la ligne comme dans une liste normale

Je vais rester sur la première solution (et maudire FF

), j'opte donc pour la solution offensive !

13 févr. 2007, 12:49

Salut,

Un float: left; sur la liste est en effet plus indiqué.

Il y a une chose à laquelle il faut faire attention lorsqu'on veut aligner ses éléments, c'est comment se comporte la liste à l'agrandissement des polices. Si on veut que les liens ressemblent à des boutons, il faut indiquer une largeur et une hauteur pour que ce soit correctement pris en compte sous IE (sous Fx, display: block; suffit).
Ces deux dimensions doivent pouvoir s'agrandir pour s'adapter à la taille de la police ce qui sous-entend des dimensions définies en em (sous-peine de voir des écritures tronquées si ce n'est pas le cas). Si on tient à conserver une largeur de liste fixée avec un width en px sur les liens, il faut laisser un espace suffisant pour 3 Ctrl+ environ.

Un petit exemple avec lequel on peut tester l'agrandissement :

Code : Tout sélectionner

<!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>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<title>Exemple</title>
		<style type="text/css">/*<![CDATA[*/

@media screen, projection
{
	body {
		font-size: 80%;
	}
	ul {
		position: absolute; /* A remplacer par un clear: left; sur l'élément qui suit la liste si besoin est */
	}
	li {
		float: left;
		list-style-type: none;
	}
	li a {
		font-size: 1em;
		color: yellow;
		text-align: center;
		text-decoration: none;
		display: block;
		width: 5em; /* ou 80px; <- suffisant pour cet exemple */
		height: 2em;
		line-height: 2em;
		background-color: blue;
		border: 1px solid green;
	}
	li a:hover {
		background-color: red;
	}
}

		/*]]>*/</style>

	</head>
	<body><div id="doc">

<ul>
	<li><a href="#">test</a></li>
	<li><a href="#">test</a></li>
	<li><a href="#">test</a></li>
	<li><a href="#">test</a></li>
	<li><a href="#">test</a></li>
	<li><a href="#">test</a></li>
	<li><a href="#">test</a></li>
	<li><a href="#">test</a></li>
	<li><a href="#">test</a></li>
	<li><a href="#">test</a></li>
	<li><a href="#">test</a></li>
	<li><a href="#">test</a></li>
	<li><a href="#">test</a></li>
</ul>

	</div></body>
</html>

Largeur des <LI> sous FireFox

Qui est en ligne