Alignement adaptatif

Avec une largeur imposée je vais perdre l'equidistance entre les liens HREF..

Bonjour,

Pourrais-tu nous montrer ton essai ?

La cause la plus probable est que le 5ème bloc n'a pas assez de place sur la ligne (bordure, padding...)

si ca fonctionne dans mon exemple mais pas chez toi c'est que tu as mal reproduit le code tu ne crois pas?

<div id="menu">
 <div>
  <ul>
	<li><a href="#">menu0</a></li>
	<li><a href="#">menu1</a></li>
	<li><a href="#">menu2</a></li>
	<li><a href="#">menu3</a></li>
	<li><a href="#">menu4</a></li>
	<li><a href="#">menu5</a></li>
	 etc...
  </ul>
 </div>
</div>

#menu{padding:0; margin:0;}
 #menu div{overflow:visible; padding:0; margin:0; height:50px;}
  #menu div ul{ list-style-type:none; padding:0; margin:0; text-align:center;}
   #menu div ul li{position:relative; display:inline; list-style-type:none; padding:5px; margin:0;}

je repete, ça n'est pas une solution, mais si le texte dépasse il ne retournera pas à la ligne.
Modifié par e-rwan (28 May 2010 - 19:13)

Ok en fait je crois savoir pourquoi ca marche pas chez moi : j'ai un margin-right sur mes <li> alors que tes <li> n'ont qu'un padding.

Voici ce que j'ai : http://www.truc.netau.net/test2.html

Si vous augmentez le margin-right des <li> de quelques pixels, le dernier <li> passe a la ligne.

"Si vous augmentez le margin-right des <li> de quelques pixels, le dernier <li> passe a la ligne."

Oubliez cette phrase et remplacez par "Si la police est Times New Roman, tout tient sur une ligne, mais si la police est Arial ou Verdana, le dernier <li> passe a la ligne."

Ce layout ne fonctionne donc pas avec n'importe quelle police. Comment remedier a ca ? C'est vraiment un probleme basique (afficher un menu horizontal occupant toute la largeur) donc il doit bien exister une solution..

Bonjour/bonsoir

Tu as interet a proposer la bonne police , puis en seconde main d'autre police courante de même type et taille avec font-family:'Times New Roman', 'autre police' , 'une autre police' ;

Sinon , je pense que ta premiere idée de flottants etait meilleur . En forçant une largeur aux li et en appliquant une couleur de fond a son element enfant affichant le texte. plus besoin de marges droites et le texte peut s'etaler de plus ou moins quelques pixels sans que tu en est a t'en soucier .

GC

<edit> ah j'oubliais d'evoquer le dernier <li> acoller a droite :
a cibler en class (comme tu fait) ou via les selecteurs .

#menu div ul li:last-child 

a repositionner a droite .

par exemple sur ton test actuel :
1) mettre ul en text-align:right ;
2) mettre li en float-left;
3) mettre le dernier li en display:inline (ou inline-block si pas de largeur definies) et margin:0;
Ce li va etirer ul et faire afficher son fond sans devoir avoir a modifier les contextes de formatages.

L'espace entre ces deux dernier <li> va fluctuer en fonctions des autres textes et de la police d'affichage (pas de 'pixels perfect').
</>
Modifié par gc-nomade (01 Jun 2010 - 00:47)

Ok merci ! J'esperais pouvoir forcer un authentique "justify" droite et gauche de ma liste <ul> comme dans Word mais ce sera pour une autre décennie je crois