28221 sujets

CSS et mise en forme, CSS3

Bloc dans un inline : autorisé en CSS ?

Je me pose cette question depuis un moment : en HTML on ne peut pas mettre un élément bloc dans un élément en ligne. Ça me parait normal.

Mais en CSS... est-ce qu'on peut ?

Prenons l'exemple d'un menu tout simple :
<ul>
	<li><a href="...">menu1</a></li>
	<li><a href="...">menu2</a></li>
	<li><a href="...">menu3</a></li>
</ul>

Pour le faire tenir sur une ligne, on peut le faire flotter, mais alors pour que ça marche dans Opera il faut fixer la largeur des <li>, pas évident vu que ceux-ci peuvent varier (d'ailleurs j'ai pris un mauvais exemple dans lequel ils ont tous la même taille)...
Une autre possibilité, qui semble marcher (et c'est ça qui est étonnant) : 
li {display:inline;}
a {display:block;}
(et toutes les marges, espacements, bordures qui vont avec...)


Ce code fonctionne, pourtant il inclus des blocs (a) dans des en-ligne (li). Alors qu'en est-il ? Est-ce un bug de tous les navigateurs ou est-ce normal ? Peut-on s'y fier pour faire un beau menu ou faut-il trouver autre chose ?

Désolé si ma question est un peu tordue Smiley lol
Administrateur
A priori oui, puisque les CSS ne modifient en rien la structure HTML.
Une balise <a> restera *intrinsèquement* un élément de type en-ligne, même si tu l'invites à s'afficher (visuellement) de façon bloc.
Calimo a écrit :

Pour le faire tenir sur une ligne, on peut le faire flotter, mais alors pour que ça marche dans Opera il faut fixer la largeur des <li>


Non, ce n'est pas la largeur des éléments <li> qui est problématique. C'est celle du conteneur global des flottants, donc plutôt <ul> Smiley cligne

a écrit :

Une autre possibilité, qui semble marcher (et c'est ça qui est étonnant) : [code]li {display:inline;}
a {display:block;}


Les éléments <a> remis en block s'alignent les uns en dessous des autres. J'avoue que l'intérêt m'échappe s'il s'agit de faire une menu horizontal ?
Modifié par Laurent Denis (28 Feb 2005 - 11:57)
Laurent Denis a écrit :
Les éléments <a> remis en block s'alignent les uns en dessous des autres. J'avoue que l'intérêt m'échappe s'il s'agit de faire une menu horizontal ?
Effectivement je me disais bien que c'était bizarre. J'avais raté un float:left Smiley confused

Laurent Denis a écrit :
- le display inline sur <li> est en fait ignoré (légitimement) lorsque <li> contient un élément bloc.
Visiblement pas totalement ignoré. Un test minimal :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
	<title>Test</title>
	<style type="text/css">
	li {display:inline;}
	a {display:block;}
	</style>
</head>

<body>
	<ul>
		<li><a href="#">premier lien</a></li>
		<li><a href="#">deuxième lien</a></li>
	</ul>
</body>
</html>
Il n'y a plus de puces devant les éléments de liste, donc le display:inline a du être pris en compte... peut-être remplacé par un display:block ? En tous cas ça a un effet, et c'est bien là le problème Smiley confus

Laurent Denis a écrit :
Non, ce n'est pas la largeur des éléments <li> qui est problématique. C'est celle du conteneur global des flottants, donc plutôt <ul> Smiley cligne

Ah oui effectivement, je me suis encore trompé, mais il semblerait qu'en fixant la largeur sur les li ça fonctionne aussi... et comme je me suis toujours arrangé pour faire différemment et éviter les float multiples, je n'avais jamais trop investigué Smiley ohwell
Ce sera un souci en moins si tous les navigateurs "flottent pareil", ça ne peut qu'être une bonne chose !

Merci pour ces précisions Smiley smile
Sujet clos
Aller à