Programmation.web : Listes ul/li horizontales

Posté par Emilien Kia (Jabber id, page perso, ) le 05 décembre 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

--
Qu'est-ce qui est petit, rond et vert, qui monte et qui descend ?
Yoda qui fait le con avec la force.

> Lire le message (4 commentaires, moyenne: 1,8).

Cette discussion est archivée, il n'est plus possible de laisser des commentaires.

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

Listes ul/li horizontales

Posté par Sebastian () le 05/12/2005 à 19:07. (lien). É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 Emilien Kia (Jabber id, page perso, ) le 05/12/2005 à 19:52. (lien). É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. :-)

--
Qu'est-ce qui est petit, rond et vert, qui monte et qui descend ?
Yoda qui fait le con avec la force.
- [^]Re: Listes ul/li horizontales
  
  Posté par Sebastian () le 05/12/2005 à 21:17. (lien). É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].
  - [^]Re: Listes ul/li horizontales
    
    Posté par Emilien Kia (Jabber id, page perso, ) le 06/12/2005 à 06:54. (lien). Évalué à 2.
    OK.
    
    Merci
    
    --
    Qu'est-ce qui est petit, rond et vert, qui monte et qui descend ?
    Yoda qui fait le con avec la force.

Revenir en haut de page || Retourner aux forums || Retourner au forum Programmation.web

Programmation.web : Listes ul/li horizontales

Listes ul/li horizontales

[^]Re: Listes ul/li horizontales

[^]Re: Listes ul/li horizontales

[^]Re: Listes ul/li horizontales