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

display:block sur <legend/> [CSS 2]

CSS

Vue hybride

Discussions similaires

Partager

Partager