Forum Programmation.web Listes ul/li horizontales

Posté par  (site web personnel) .
Étiquettes :
0
5
déc.
2005
J'ai une question sur l'alignement des listes en horizontales.
Je sais pas si c'est un bug de ie ou un de firefox mais ca fait cd que je veux sous ie mais pas sous firefox.

en gros j'ai une liste ul/li qui doit afficher des liens. Chaque li doit avoir la même taille car j'ai une bitmap de fond à taille fixe. Le problème vient du fait que je doit OBLIGATOIREMENT mettre mon ul sous forme horizontale (display:inline).
Sous ie, les li ont la même taille (celle spécifiée) alors que sous firefox, ca réduit la taille du li à la taille du texte contenu.

Voici mon code : 


    [ul]


        [li]Panier[/li]


        [li]Identification[/li]


        [li]Convertisseur[/li]


        [li]Créer type[/li]


    [/ul]







.toolbar{


	padding: 0px;


	margin: 0px;


	border: 0;


	background: url("../img/tool-bg.png");


	height: 30px;


	width: 100%;


}





.toolbar ul{


	padding: 0px;


	margin: 0px;


	background: url("../img/tool-bg.png");


	list-style-type: none;


	border: 0;


	height: 30px;


}





.toolbar ul li{


	width: 125px;


	height: 30px;


	padding: 0px;


	margin: 0px;


	display: inline;


	border: 0;


	background: url("../img/tool-btn.png");


	vertical-align: middle;


	text-align: center;


	text-decoration: none;


	font-weight: bold;


}


Comment faire pour avoir des li à taille fixe sous ff ?
Merci

  • # Listes ul/li horizontales

    Posté par  . Évalué à 2.

    Bonsoir,

    Je ne comprends pas bien le .toolbar ul li{}
    Puisque le ul a déjà été féfini.
    Remplace par .toolbar li

    Je ne suis pas sur que cela marchera mais essaye ainsi :

    Dans .toolbar li{} ajoutes un "float : left" et défini une taille pour le " margin:0" qui sera la distance entre chaque lien. (utilise même un margin-right par ex)

    • [^] # Re: Listes ul/li horizontales

      Posté par  (site web personnel) . Évalué à 1.

      Enlever le ul (.toolbar li) ne change rien. Ce qui est normal puisque le ".toolbar ul li" est quasiment équivalent au ".toolbar li" vu la structure du html.

      Mais effectivement, mettre un "float : left" permet de régler mon problème sous firefox.

      Merci beaucoup.

      Par contre (sisi j'abuse) je comprend pas pourquoi ca marche avec, si tu pouvais m'expliquer. :-)

      Un jour libre ?

      • [^] # Re: Listes ul/li horizontales

        Posté par  . Évalué à 2.

        Je ne sais pas si ma réponse sera juste ...
        Mais je crois que si l'on applique un inline, les balises [li] ne sont plus en block bien évidement.
        Donc pour cela que les boîtes ont la taille de leur contenu.
        En appliquant un float, on redefinit un block pour chaque [li].

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.