display:block sur <legend/>

**MainMa** · 20/12/2009, 22h47

Bonsoir.

J'ai un petit souci. J'ai une page dont le contenu semble être plus logique à faire avec des <fieldset/>s (pas de formulaires). Graphiquement avec CSS, ça va donner des jolies zones avec bordure, arrière plan et, en haut, le nom de la zone en question.

J'ai donc :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<fieldset>
  <legend>Zone 1</legend>
  <!--Contenu de la zone 1-->
</fieldset>

et au niveau du CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

fieldset legend{display:block;background:#eee url(...) repeat-x left top;color:#444;line-height:30px;}

Problème : malgré mon très beau display:block, le <legend/> reste comme s'il était display:inline.

Note : en cherchant sur internet, j'ai vu que IE affichait ça sur toute la ligne (la version n'étant pas indiquée, je présume qu'il s'agissait du IE6, en tout cas IE8 affiche également le bloc en inline). En tout cas aucune solution n'a été donnée pour afficher ça sur toute la ligne dans les navigateurs normaux, si ce n'est de passer par un assemblage <div/> à la place de <fieldset/> et <legend/>, ce que je trouve un peu dommage de faire en l'espèce.

Quelqu'un sait-il, déjà, pourquoi ça fait ça, et ensuite comment faire pour afficher le bloc sur toute la ligne ?

Merci d'avance.

**E.Bzz** · 22/12/2009, 11h43

Bonjour,
tu as essayé un simple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

width:100%;

A+

**MainMa** · 22/12/2009, 16h51

Envoyé par E.Bzz

Bonjour,
tu as essayé un simple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

width:100%;

A+

Yep. Pareil, n'importe d'ailleurs si display:block; est présent ou pas.

Petite demo :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Test</title>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
  <div>
    <fieldset>
      <legend style="display:block;width:100%;background:yellow;">Hello</legend>
      World
    </fieldset>
  </div>
</body>
</html>

EDIT:
À noter que avec width:100%, ça marche impec' sous IE8. Mais toujours rien sous FF3.

**CCyrillus** · 22/12/2009, 19h07

bonjour,

Pouvoir styler "legend" est un "mythe" .

Insere un <span> dans legend et style celui-ci , tu aura de meilleur résultats

.

Cordialement
GC

**MainMa** · 22/12/2009, 19h59

Envoyé par CCyrillus

bonjour,

Pouvoir styler "legend" est un "mythe" .

Insere un <span> dans legend et style celui-ci , tu aura de meilleur résultats

.

Cordialement
GC

Comme ça ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<fieldset>
  <legend>
    <span style="display:block;float:left;width:100%;background:yellow;">Hello</span>
  </legend>
  World
</fieldset>

Exactement le même résultat. Par contre c'est pas moi qui déconne ? Je vois que pour certains, ça marche : V. Cannot style legend tag with css

Certes c'est toujours possible de placer en absolu le <span/>, mais bon, j'aimerai éviter (autant revenir à la solution classique des <div/>).

**CCyrillus** · 22/12/2009, 20h29

okay

ce que tu peut faire aussi :
c'est de na pas utiliser de fieldset ni de legend et de remplacer ceux-ci par un div et un titre (ou un section et un titre par exemple si tu code en html 5) .

Ces élément ne te poserons aucun problème pour les styles , ils vont aussi structurer ton formulaire . ... et tu éviteras aussi un bug d'impression dans certaines version de firefox avec des fieldset si les contenus doivent être imprimer sur plusieurs pages .

GC

**MainMa** · 22/12/2009, 21h11

Envoyé par CCyrillus

ce que tu peut faire aussi :
c'est de na pas utiliser de fieldset ni de legend et de remplacer ceux-ci par un div et un titre

Oui, à savoir la solution que j'avais au début, avant d'essayer d'utiliser des <fieldset/> (à part que c'était que des div, et pas de titres). Mais bon, justement, l'intérêt des <fieldset/> était que ça traduit mieux la logique du contenu de la page, juste ça.

Et donc la conclusion définitive, c'est qu'on peut pas faire ce que je voulais avec <legend/> ?

**CCyrillus** · 22/12/2009, 23h22

non

**MainMa** · 23/12/2009, 00h19

Envoyé par CCyrillus

non

Dommage.

Bon, merci à tous pour les réponses.

**CCyrillus** · 23/12/2009, 12h32

Bonjour,

je reviens sur ta problématique avec une piste qui n'est pas forcement une solution car assez rigide et sans garantie au travers des différents navigateurs.

L'idée est de forcé une dimension a legend via "content" et ":before" ou ":after" .

theorie :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HTML 4.01 </title>
<style type='text/css'>
form {
width:828px;
margin:auto;
}
legend {
width:800px;
display:block;
background:yellow;
text-align:center;
}
legend:before {
background:yellow;
content:'';
display:block;
width:800px;
}
</style>
</head><body>
<form action ="" method="pot">
	<fieldset><legend>Hello</legend>
		<input type="text"value="World" />
	</fieldset>
</form>
</body></html>

Astuce difficile a maintenir et surement instable .

Bonnes fêtes

GC

<edit> Les pseudo :before et :after servent parfois a regler des soucis d'affichages (degagement des flottants pour le plus classique , mais aussi d'autre défauts ponctuels ... </edit>

**E.Bzz** · 23/12/2009, 12h35

Envoyé par CCyrillus

L'idée est de forcé une dimension a legend via "content" et ":before" ou ":after" .

Pas pour IE, donc ...

A+

**CCyrillus** · 23/12/2009, 13h54

IE 6/7 , semblent se contenter du display:block .

Cette astuce n'est pas forcement une solution , dans le passé en jouant sur display et les valeurs table et table-caption , on arriver a faire plier FF , ce n'est plus le cas . L'astuce vaut ce qu'elle vaut .

Cordialement .

**MainMa** · 25/12/2009, 15h36

Envoyé par CCyrillus

Bonjour,

je reviens sur ta problématique avec une piste qui n'est pas forcement une solution car assez rigide et sans garantie au travers des différents navigateurs. [...]

Merci. Oui, c'est vrai que ça peut marcher. Comme a remarqué E.Bzz, :before n'aura pas d'effet dans les anciennes versions d'IE, mais bon, mon code d'origine marche, j'imagine, sous IE6/7, donc ça change rien.

Après, j'ai pas précisé dans ma question d'origine, mais l'idée était d'avoir le <legend/> occuper 100% d'espace (espace de quoi ? de la page pour commencer, et d'un container quelconque pour durcir un peu les choses). Donc pas possible d'utiliser width:800px; pour moi.

PS. Tiens, c'est drôle, position:absolute;right:10px;left:10px; sur <legend/> marche sous IE8, mais toujours rien sous FF3.

**CCyrillus** · 31/12/2009, 14h00

Envoyé par MainMa

Après, j'ai pas précisé dans ma question d'origine, mais l'idée était d'avoir le <legend/> occuper 100% d'espace (espace de quoi ? de la page pour commencer, et d'un container quelconque pour durcir un peu les choses). Donc pas possible d'utiliser width:800px; pour moi.

Un element qui garde un comportement de type inline (ton <legend> ), ne peut recevoir , appliquer ni transmettre une largeur ou hauteur .

La seule pirouette possible est donc d'imposer une largeur a cet élément enfant (element ou pseudo element) . Les pourcentages sont inutilisables dans ce cas . Il faut reinjecter une largeur de valeur fixe . Celle d'un parent par exemple (moins les marges ... ) javascript peut t'aider aussi .

div et hn te permettront d'obtenir un résultat stable sans astuces hasardeuses

ni surcharges css et js . J'imagine que c'est la solution pour laquelle tu as opté.

Bonnes fêtes