28173 sujets

CSS et mise en forme, CSS3

[Résolu] Listes emboitées, propriété display, IExplore et aspirine

Réponse dans le commentaire d'Allan

Bonjour à tous, merci de m'accueillir sur votre forum.

Pourriez vous me montrer comment faire une liste avec display:inline, dont les items contiendront des items display:block avec internet explorer s'il vous plait ?

Pour moi, c'est impossible :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
	
<html>
<head>
<STYLE>* {margin: 0; padding: 0; }
body { background-color:white; margin: 8px; font-family:arial; font-size:12px; }
.inline-block li
{
	display:inline-block;
	border: solid black 5px;
	padding: 10px;
}
.block li
{
	display:block;
	border: solid blue 5px;
	padding: 10px;
	margin: 10px;
}
.inline li
{
	display:inline;
	border: solid yellow 5px;
	padding: 10px;
}
</style>
</head>
<body onload="javascript:alert(getElementById('summary').currentStyle.hasLayout)">

not working

<ul class="inline-block">
	<li>INLINE</li>
	<li>INLINE</li>

	<li>
		<ul class="block">
			<li>BLOCK</li>
			<li>BLOCK</li>
		</ul>
	</li>
	<li>INLINE</li>

	<li>INLINE</li>
	<li>
		<ul>
			<li>Not display block</li>
			<li>Not display block</li>
		</ul>
	</li>

</ul>

wot working either :

<ul class="inline">
	<li>INLINE</li>
	<li>INLINE</li>
	<li>
		<ul class="block">
			<li>BLOCK</li>

			<li>BLOCK</li>
		</ul>
	</li>
	<li>INLINE</li>
	<li>INLINE</li>
	<li>
		<ul>

			<li>Not display block</li>
			<li>Not display block</li>
		</ul>
	</li>
</ul>

</body>
</html>

Modifié par is_null (11 Jan 2007 - 23:25)
Administrateur
is_null a écrit :
Pourriez vous me montrer comment faire une liste avec display:inline, dont les items contiendront des items display:block avec internet explorer s'il vous plait ?

Hello et bienvenue,

A priori, cela me paraît assez contradictoire.
As-tu un aperçu de ce que tu veux obtenir ? Ce sera bien plus parlant qu'un code.
Bonsoir,
J'ai regardé vite fait la page et j'ai remarqué que tu utilises sur .thumbnail_container la propriété float, mais sans spécifier de largeur, ce qui peut vite poser problème à Internet Explorer (en y mettant un élément doté de laytout) : voir cette page pour en apprendre un peu plus.

Sinon par rapport à inline-block et Internet Explorer, il faudrait utiliser les déclarations display:inline et zoom:1; pour obtenir un équivalent de inline-block (sinon ça ne marche que sur les éléments inline par défaut).
Toutefois on utilise rarement inline-block, car ce n'est pas encore supporté par Firefox/Gecko.
Modifié par Alan (11 Jan 2007 - 18:21)
Merci beaucoup de votre aide très professionnelle !
Effectivement, en attribuant une largeur css ainsi qu'au parent, tout est rentré dans l'orde Smiley lol

Au passage, je précise que je recherche des beta-testeurs pour une classe complete de
gestions de site de vente de templates. Pour l'instant, la seule synchronisation supportée est avec l'XML du webapi de templatemonster, mais la base de données est prête à en stocker d'autres sans limites. Si vous ne connaissez pas le webapi de templatemonster, ceci vous sera inutile.

Merci encore et à bientôt Smiley smile
Sujet clos
Aller à