[Résolu] Espace indésirables entre éléments en float

Bonjour,

Je sèche sur une mise en forme d'éléments d'une liste non-ordonnée (ul/li) que je met en float et qui sont sensés représenter quelque chose une fois les bouts collés côte à côte :

Code

<ul id="schema_residence">
	<li><a href="#"><img src="/test_montage_img/ch7_libre.png" alt="Appartement 7 est disponible" /></a></li>
	<li><a href="#"><img src="/test_montage_img/ch6_libre.png" alt="Appartement 6 est disponible" /></a></li>
	<li><a href="#"><img src="/test_montage_img/ch5_libre.png" alt="Appartement 5 est disponible" /></a></li>
	<li><img src="/test_montage_img/ch4_reserve.png" alt="Appartement 4 n'est pas disponible"/></li>
	<li><img src="/test_montage_img/ch3_reserve.png" alt="Appartement 3 n'est pas disponible"/></li>
	<li><img src="/test_montage_img/ch2_reserve.png" alt="Appartement 2 n'est pas disponible"/></li>
	<li><img src="/test_montage_img/ch1_reserve.png" alt="Appartement 1 n'est pas disponible"/></li>
</ul>

Css

	<style type="text/css">
		#schema_residence {
			width: 395px;
		}
		
		 #schema_residence li {
			list-style-image: none;
			list-style-type: none;
			padding: 0;
			margin: 0;
			float: left;
			height: 80px;
			list-style-position: inside;
			background-color: red;
		}
		
		#schema_residence li img {
			border: none;
		}
	</style>

Page de test : http://www.xermi.com/test_montage.html

Ce que je comprend pas, c'est l'espace entre les li flottants. Je ne parviens pas à identifier la raison, et comme je ne veux pas mettre de tableau (magré ce que l'on me conseille ), je me tourne vers vous et vos yeux neufs

Si quelqu'un à une idée, je suis preneur.
Merci.
Modifié par GloubI (25 Jun 2009 - 10:57)

Heu, je parle de l'espace que j'ai mis en rouge, je sais que c'est une histoire de largeur de bloc parent pour les espaces transparents
Modifié par GloubI (24 Jun 2009 - 18:02)

Bonjour,

Ce sujet à été abordé de nombreuses fois. Il y a même un article à ce sujet dans la section apprendre du site.

Oui, c'est une règle que je connais.

Je ne pensais pas que cette règle s'appliquait aux éléments positionnés en flottants, ce qui est mon cas.

Dans mon cas, même avec les li à la suite les uns des autres, le résultat est identique. (la page de test n'a plus les retours à la ligne entre les li).
Modifié par GloubI (24 Jun 2009 - 18:22)

En fait, l'espace est dû au positionnement de la puce. Si celui-ci est mis à outside, il n'y a plus de problème.

Désolée pour ma première réponse qui était trop hâtive.

Allons bon !

Merci pour la piste, mais ça résout pas le problème (j'ai mis à jour le fichier de test).

Par contre, il semblerait que ce soit un bug ou une interprétation spécifique à FF3?, car la page ne pose aucun problème avec safari (3,4) ou opéra (9) sous mac...
Même avec IE6 windows c'est ok

Je viens de vérifier sous windows, et les navigateurs (IE7 & FF2) affichent correctement la page ...

Est-ce que quelqu'un peu regarder avec windows et FF3 ?
http://www.xermi.com/test_montage.html

Au passage, utiliser map plutôt qu'un montage sémantiquement douteux.

Au risque de me répeter:

Laurie-Anne a écrit :
En fait, l'espace est dû au positionnement de la puce. Si celui-ci est mis à outside, il n'y a plus de problème..

d'ailleurs inutile de définir plusieurs fois list-style-position

Laurie-Anne a écrit :
Au risque de me répeter:

d'ailleurs inutile de définir plusieurs fois list-style-position

Rah lala, je suis vraiment un boulet, désolé. J'ai lu qu'à moitié

Effectivement, c'est parfait.

Benjamin D.C. a écrit :
Au passage, utiliser map plutôt qu'un montage sémantiquement douteux.

En quoi c'est douteux ?
J'utilise une liste non ordonnée, qui est à mon sens le plus logique pour un affichage de disponibilité.
Modifié par GloubI (25 Jun 2009 - 10:56)

GloubI a écrit :
En quoi c'est douteux ?

Une illustration transformée en liste. Donc voilà.

Florent V. a écrit :

Une illustration transformée en liste. Donc voilà.

Je pense que j'ai du mal exprimé ce que je voulais faire
Il s'agit de lister les chambres d'un hôtel en y indiquant la disponibilité et le cas échéant, d'un lien pour réserver la chambre en question.

L'idée est de faire ça de façon graphique : hôtel stylisé et intérieur des chambres coloré.

Donc, je me dis que le bon balisage html est une liste non ordonnée et qu'il me suffit de mettre pour chaque chambre, le visuel correspondant à sa disponibilité (rouge ou vert - classique). Ainsi en mode non graphique, ça reste lisible (par contre je n'ai pas regardé le résultat avec une map)

La solution map permet la même chose, grâce aux css (background et opacity), mais n'aura pas le même rendu qu'une image (logique). A moins qu'il y ai une façon de faire que je ne connais pas, auquel cas, je veux bien la connaitre