28114 sujets

CSS et mise en forme, CSS3

[Résolu] <li>en float

Une pure question d'info :

J'ai constaté que dès qu'on positionne des <li> en float, les puces des éléments de la liste disparaissent (même si on définiun "list-style-type:").
Cela me parait assez logique (quelle utilité d'une puce dans ce cas) mais, intrigué et un peu maniaque, j'ai fais quelques recherches et, ô surprise, dans les exemples de <li> en float, je retrouve toujours un "list-style-type:none" qu'il me parait inutile de coder.
Par ailleurs, je n'ai pas trouvé de description du phénomène.

Un spécialiste des <li> peut-il confirmer ?
D'autre part, si on désire malgré tout une puce : passage obligatoire par "list-style-image:" ?

Merci d'avance
Je ne suis pas du tout sur de ce que j'affirme, ce doit être une hypothèse:

Si la <li> est en float:left, par exemple.
On ne verra plus la puce, car elle est trop à gauche de l'écran.
Quand à la deuxième puce du deuxième <li>, elle est cachée par le premier <li>;

je n'en suis pas certain, cependant , pour vérifier, il faudrait mettre les <li> en float:right, pour voir si on n'a pas de puce...

En tout cas, si on met les list-style-type:none, c'est pour les navigateurs qui ne fonctionneraient pas comme les autres (on ne citera pas de noms..)
Bonjour Sylvain,

J'ai essayé aussi avec float right : idem
Je soupçonnais aussi des puces masquées mais en mettant des marges rien n'apparait.

Je visualise tout ça sous IE5.5 et IE 6 (bureau oblige Smiley decu ).

Le code exemple :

<!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" lang="en" xml:lang="en">

<head>
	<title>test de positionnement en bas d'un header</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
		* {
		margin:0;
		padding:0;
		}
		#menu li {
		float:left;
		margin:10px;
		}
	</style>
</head>

<body>
<ul id="menu">Où sont les puces ?
	<li>Elément 1</li>
	<li>Elément 2</li>
	<li>Elément 3</li>
	<li>Elément 4</li>
</ul>
</body>
</html>
Mis en "float", un élément adopte de facto un "display:block" (voir CSS2.0 et CSS2.1).

Donc, un <li> flottant n'est plus en "display: list-item", dont le rôle est justement de permettre la génération de la boîte très spéciale qui permet d'afficher la puce (une boîte de marqueur).

Donc, un <li> en float n'a plus de puce, effectivement, selon CSS2.0/2.1.

Mais... Certains navigateurs ont effectivement du mal, beaucoup de mal, avec la propriété display, et ses valeurs implicites. D'où la précaution du "list-style-type: none" qui est leur est effectivement destinée Smiley cligne
Modifié par Laurent Denis (29 Jul 2005 - 09:39)
Réponse claire précise et complète ... comme toujours !
Smiley smile
Donc pas de list-style-image non plus mais un background-image si on veux vraiment une puce !

Merci Laurent !
Modifié par g41687 (29 Jul 2005 - 09:49)
L'explication est effectivement très claire. Existe-t-il y a un moyen de contourner ce comportement ?

J'ai une liste ordonnée dont les entrées sont en "float: left", mais j'aimerais conserver les numéros.
J'ai essayé en ajoutant pour mes li :

	display: list-item;
	list-style-type: decimal;


NB : sous Firefox, les numéros s'affichent malgré le "float: left", mais pas sous IE ni Opéra.
faîtes attentions de ne pas avoir de sélecteur universel 
 * {
margin:0;
padding:0;
}


qui risque d'enlever les puces, masquée par l'élément.
Je crois qu'il y a un truc à ce sujet dans le livre de raphael
Je n'ai pas de sélecteur universel dans mes styles, et j'ai essayé de corriger ce problème en réglant le margin et le padding de mes li dans tous les sens, mais rien n'y fait.
Bonjour Boris,

La gestion des boîtes de marqueur est pleine d'imprévues, selon les concepteurs de CSS eux-mêmes Smiley cligne Il faut dire que seule une moitié de la spécification CSS2.0 a été implémentée par les navigateurs courants dans ce domaine, et que l'autre moitié a disparu avec CSS2.1.

Pas de contournement a priori dans IE, qui n'implémente aucune des propriétés offrant une solution de repli.

Pour Firefox, un simple padding ou margin gauches suffisent à faire apparaître le marqueur (la gestion des marges de flottants perturbent le résultat sinon). Un list-style-position: inside simplifie la gestion de ces espaces.

Pour Opera, il faut reconstituer un compteur de liste, avec :
li:before {
display: marker;
content: counter(liste, decimal) ". ";
counter-increment: liste;
}


Pour safari et IEMac, aucune idée du résultat.

Le plus simple: inclure directement la numérotation dans le contenu de chaque <li>.
Modifié par Un vacancier (24 Aug 2005 - 12:46)
Bonjour le vacancier,

J'ai suivi ton conseil : j'ai transformé mon <ol> en <ul>, masqué les puces avec la feuille de styles, et inclu la numérotation dans chaque <li>.

J'avais envisagé cette solution dès que j'ai rencontré mon problème, mais je ne voulais pas m'y résoudre de suite...

Merci d'avoir interrompu tes vacances Smiley cligne

Bob
Sujet clos
Aller à