display:block sur <legend/>

Version imprimable

20/12/2009, 22h47
MainMa

display:block sur <legend/>
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:

1 2 3 4 <fieldset> <legend>Zone 1</legend>  </fieldset>
et au niveau du CSS :

Code:

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.
22/12/2009, 11h43
E.Bzz

Bonjour,
tu as essayé un simple

Code:

width:100%;

:?

A+

Citation:

Envoyé par E.Bzz

Bonjour,
tu as essayé un simple

Code:

width:100%;

:?

A+

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

Petite demo :
Code:

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.

22/12/2009, 19h07
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
22/12/2009, 19h59
MainMa
Citation:

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:

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/>).
22/12/2009, 20h29
CCyrillus

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
22/12/2009, 21h11
MainMa

Citation:

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/> ?
22/12/2009, 23h22
CCyrillus

non :)
23/12/2009, 00h19
MainMa

Citation:

Envoyé par CCyrillus

non :)

Dommage.

Bon, merci à tous pour les réponses.

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:

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>

23/12/2009, 12h35
E.Bzz

Citation:

Envoyé par CCyrillus

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

Pas pour IE, donc ...

A+
23/12/2009, 13h54
CCyrillus

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 .
25/12/2009, 15h36
MainMa

Citation:

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.
31/12/2009, 14h00
CCyrillus

Citation:

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
31/12/2009, 14h14
MainMa

Citation:

Envoyé par CCyrillus

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é.

Tout à fait. Surtout que l'enjeu était aussi d'avoir un code un peu plus propre et clair, donc forcement, si j'y ajoute du JS, c'est... :roll: bref, je détaille pas.