28173 sujets

CSS et mise en forme, CSS3

Balise legend et comportement en ligne

Bonjour à tous,

Je tente depuis ce matin de styler un formulaire de demande de renseignements et me rends compte que mes lacunes dans ce domaine sont plus importantes que ce que je présumais Smiley confus

C'est surtout avec la balise legend que je me bats. J'ai du mal à comprendre son comportement à vrai dire. Je lui applique désespérement un display:block afin de lui faire prendre toute la largeur de son conteneur (le fieldset en l'occurence) et de pouvoir lui appliquer différents styles (bordures, marges, etc.) mais il semble l'ignorer complètement. Ai-je loupé quelque chose? Smiley decu

Merci,
Benjamin.
Bonjour,

Je ne voudrais pas dire de bêtise, mais je crois que les possibilitées de styler la balises legend sont assez restreintes.
Je ne crois d'ailleurs pas que tu puisses la transformer en block. Smiley confus
Modérateur
bonjour,

un sujet qui est remonté il y a peu de temps.

http://forum.alsacreations.com/topic-4-6105-1-Centrer-un-ltlegendgt-dans-un-ltfieldsetgt--cassette-.html

Generalement les elements de formulaire sont tres difficile , voir impossible a re-styler , leur affichage depend du browser et du systeme d'exploitation et ce n'est pas du simple html , ils ont des fonctions precises .

Dans le lien du topic , je propose une technique de centrage du legend , peut-etre peut tu en tirer quelque chose pour ton usage.

++

edit une page exemple :
<!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><title>XHTML 1.0 Strict</title><style 

type='text/css'>
form {
	display:table;
	width:300px;
	margin:1em auto;
}

fieldset {
	display:table-caption;
	width:300px;
	margin:auto;
}
legend {
	text-align:center;
	display:table;
	background:white;
	margin:-1em auto 0;
}
#deux legend {
	text-align:center;
	display:table;
	background:white;
	width:300px;
}
</style>
 <!--[if IE]>
<style type="text/css">
legend {
	margin:0 auto;
	width:1%;
	display:block;
}
#deux legend {

	width:auto;
}
</style>
<![endif]-->
</head>
<body>
<form action ='' method=''>
	<fieldset>
		<legend>coucou</legend>
		<input type='text'value='a remplir'/>
	</fieldset>
</form>
<form action ='' method='' id='deux'>
	<fieldset>
		<legend>coucou</legend>
		<input type='text'value='a remplir'/>
	</fieldset>
</form>
</body>
</html>

Modifié par gcyrillus (10 Nov 2006 - 14:05)
Bonjour,

Merci pour vos réponses rapides et précises. Je me rends compte qu'en plus de mes lacunes évidentes à ce sujet, styler des formulaires n'est pas une mince affaire!

Ta solution, gcyrillus, est terriblement intelligente et efficace. Pourtant, il reste une propriété que je n'arrive pas à appliquer: des marges en haut et en bas du legend. C'est vraiment étonnant que cette balise soit si réticente à l'héritage de styles pourtant simples...
Administrateur
Benjamin D.C. a écrit :
C'est vraiment étonnant que cette balise soit si réticente à l'héritage de styles pourtant simples...

En fait, ce n'est pas une simple balise. Comme les select et autres champs, il s'agit surtout de fonctionnalités dont l'ergonomie est laissée à la charge du navigateur et/ou du système d'exploitation.
Modérateur
heu , les marges vertical ne devraient pas posés de problemes .
Les marges horizontale sont peut-etre difficile a aplliqué dans firefoxe du fait que le display-table; ne donne pas de tailles en largeurs exepté celle du contenu , comme un element en float ou absolu. seul le margin:auto; pour le centrage va fonctionné. Le display:table; reprend le comportement d'une table en generale.

++
a écrit :
mais je crois que les possibilitées de styler la balises legend sont assez restreintes.

et
a écrit :
leur affichage depend du browser et du systeme d'exploitation et ce n'est pas du simple html , ils ont des fonctions precises .

et
a écrit :

En fait, ce n'est pas une simple balise. Comme les select et autres champs, il s'agit surtout de fonctionnalités dont l'ergonomie est laissée à la charge du navigateur et/ou du système d'exploitation.


Bon en bref a tes risques et périls , si tu veut vraiment en maitriser l'affichage Smiley cligne

++
Modifié par gcyrillus (10 Nov 2006 - 14:31)
Raphael a écrit :

En fait, ce n'est pas une simple balise. Comme les select et autres champs, il s'agit surtout de fonctionnalités dont l'ergonomie est laissée à la charge du navigateur et/ou du système d'exploitation.
Ce qui est perturbant, c'est que certains attributs de style passent, et d'autres non. Smiley ohwell

gcyrillus a écrit :

Bon en bref a tes risques et périls , si tu veut vraiment en maitriser l'affichage Smiley cligne
Oui, je commence à désespérer... Bon, je vais m'y prendre autrement. Bizarre, cette balise legend...

Merci à tous Smiley jap
Modifié par Benjamin D.C. (10 Nov 2006 - 16:14)
Modérateur
On peut imaginer , malgré qu'au pire les styles ne seront pas appliquer et que l'aspect du legend sera des plus classiques , en somme pas perturbant pour l'utilisateur.

bonsoir
Sujet clos
Aller à