28173 sujets

CSS et mise en forme, CSS3

Style de la balise legend

Bonjour,

Est-ce que quelqu'un sait pourquoi la balise legend s'affiche par-dessus le bord du fieldset? Est-ce une propriété css? (position:relative?)

Et comment faire pour déplacer ce titre à l'intérieur du fieldset?
Bonjour,

Les styles par défaut de Firefox pour les éléments legend et fieldset sont:
legend {
  padding-left: 2px;
  padding-right: 2px;
  border: none;
  position: static ! important;
  float: none ! important;
}

fieldset {
  display: block;
  margin-left: 2px;
  margin-right: 2px;
  padding: 0.35em 0.625em 0.75em;
  border: 2px groove ThreeDFace;
}

Ce qui n'explique pas vraiment le positionnement constaté du legend par dessus le bord du fieldset...

Les éléments de formulaire sont souvent rendus bizarrement...
Suivant les besoins graphiques, on pourra entourer le fieldset d'une div, et on stylera la div pour dessiner un cadre plutôt que le fieldset.
En fait même avec un div autour, il semble impossible de déplacer cet élément legend.

Et sinon quel est l'avantage d'un legend par rapport à un hn?
Il me semble que certaines aides techniques liront « [ légende ] [ label ] » pour chaque contrôle de formulaire associé explicitement à un label et à l'intérieur d'un fieldset doté d'un legend.

Quant à savoir si un hN est une alternative intéressante... je ne sais pas trop.

<nicolas> a écrit :
En fait même avec un div autour, il semble impossible de déplacer cet élément legend.

À partir du moment où on «masque» le fieldset, notamment en supprimant la bordure, peu importe que le legend soit superposé à la bordure du fieldset, non?

On aura tout de même quelques difficultés pour styler le legend lui-même, comme le montre cet exemple (rendus différents dans Firefox, IE et Opera... bien que ça ne soit pas méchant):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Test</title>
	<style type="text/css">
	div {
		width: 250px;
		border: solid 1px black;
		padding: 10px;
	}
	fieldset, legend {
		border: none;
		margin: 0;
		padding: 0;
	}
	legend {
		display: block;
		width: 100%;
		background: skyblue;
		text-align: center;
		font-size: 1.2em;
		font-weight: bold;
	}
	p {margin: .5em 0;}
	</style>
</head>

<body>

<div>
<fieldset>
<legend>Test</legend>
<p>Un paragraphe.</p>
</fieldset>
</div>

</body>
</html>
Sujet clos
Aller à