28172 sujets

CSS et mise en forme, CSS3

Mise en forme d'un élément <legend> sous Firefox

Bonjour,

Je me demandais depuis quelque temps comment utiliser les labels pour les boutons radio. Une réponse me convenant plutôt bien a été donnée sur le forum : http://forum.alsacreations.com/topic.php?fid=4&tid=29215&s=label+radio

Seul problème, comment mettre un élément légende en forme? C'est apparemment tâche assez ardue sous Firefox. Vous pouvez constater dans le code ci-dessous que j'essaie de donner une taille de 300 pixels à la légende à des fins de tests. Mais ça ne veut pas, ça résiste. La mise en forme est plus ou moins correcte sous IE, Opera et Safari.

<!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">
<head>
	<title>Formulaire CSS</title>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
	<style type="text/css">
	form {margin:2em 0em 0em 2em; padding:1em; width:40em; font-family:Verdana, Helvetica, Arial, sans-serif; font-size:0.8em;}
	fieldset {margin:1.5em 0em; padding:1em 0em; background-color:#E0E8F2; border:1px solid #2E62AA; color:black;
	/* Hack pour contenir le background du fieldset dans le cadre IE */
	position:relative;
	/* Hack pour contenir le background du fieldset dans le cadre IE */
	}
		legend {margin:0em 1em; padding:0em 1em; display:block; border:1px solid #2E62AA; background-color:#EDF1F7; color:#000000; font-weight:bold;
		/* Hack pour contenir le background du fieldset dans le cadre IE */
		position:absolute; top:-0.6em;
		/* Hack pour contenir le background du fieldset dans le cadre IE */
		}
		label {margin:0em; padding:0em .5em; float:left; width:30%; text-align:right;}
		input[type]  {border:1px solid #2E62AA;}
	fieldset.radio {margin:0; padding:0; border-style:none; background-color:transparent;}
		fieldset.radio legend {margin:0em; padding:0em .5em; display:block; float:left; width:300px; text-align:right; border:1px solid #00ffff;}
	</style>
</head>
<body>
<form id="formulaire" method="post" action="">
	<fieldset id="info1">
		<legend>Identité</legend>
		<fieldset class="radio">
			<legend>Civilité</legend>
			<p>
				<input type="radio" id="civiliteM" name="civilite" value="M" /><label for="civiliteM">Monsieur</label>
				<input type="radio" id="civiliteMme" name="civilite" value="Mme" /><label for="civiliteMme">Madame</label>
			</p>
		</fieldset>
		<p><label for="nom">Nom</label><input type="text" id="nom" name="nom" value="" /></p>
		<p><label for="prenom">Prénom</label><input type="text" id="prenom" name="prenom" value="" /></p>
	</fieldset>
</form>
</body>
</html>


Quelqu'un saurait-il comment faire?

Merci par avance.
Modifié par bbp (13 Aug 2008 - 14:45)
Hello,

C'est peut-être l'imbrication de deux fieldset qui pose problème? C'est valide il me semble, mais peu commun et vu la gestion un peu étrange de FIELDSET et LEGEND par les navigateurs... ça peut jouer.

D'ailleurs, j'utiliserais plutôt un titre HN pour l'intitulé «Identité», plutôt qu'un LEGEND (avec un fieldset autour).
Merci pour ta réponse.

L'idée du <legend> vient de toi, pourquoi plutôt penser au <hn> qu'à<legend> dans ce cas? A cause des <fieldset> imbriqués?
C'est vrai qu'après relecture de la spécification un <hn> pourrait correspondre :
w3c a écrit :
Un élément de titre décrit brièvement le sujet de la section qu'il introduit.
Modérateur
bonjour/bonsoir

ceci me rappelle une vieux topic ( qui raméne au bout du compte au topic que Florent vient d' ouvrir , voir ci-dessus):

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

j'avais fait cette page de test /bidouille/torture :
http://gcyrillus.free.fr/trucs_css/legend-au-centre.html

les methodes ou plutot bidouilles proposeés jouent sur le display :block; dans IE et sur des surcharges pour FF css aussi du type 'display' sur le legend et ses parents ..... plutot lourd , mais remonté la source pour inclure tout un morceau d'un(e) structure/dom etait la seule façon que j'avais trouvé pour enfin atteindre le legend et pouvoir modifié(fixer) son affichage implicitement par les propriétés de display attribués au parents ...par effet de cascade de style et d'heritage de comportement causé par le display:table; justement .....


IE : display:block; width:xx; (prevoir le min-width pour IE7 , voir le premier legend du test , tester en 2006 :anterieur a la sortie de IE7 )

FF :
le mode d'affichage des elements de formulaires est en générale trés rigide .... exepté sur l'élement principale <form>.

Le display : table ; modifie le comportement d'affichage en conferant un comportement de tableau a la zone ciblé : le parent puis les enfants qui conserveront leur mode d'affichage par defaut , mais qui seront suceptible de recevoir les regles display:table-xx;

C'est a partir de ce moment que l'on peut esperer avoir un peu plus de liberté sur les elements enfant d'un 'form' , le legend par exemple .

Cependant , heritant des comportement d'affichage d'un tableau , le form va devoir etre doté de dimension ou non , l'affichage des enfants peut aussi devenir delicat Pour cette exemple , on va donc passé par :
form (display:table;) -> fieldset(display:table-caption; destruction de son comportement par defaut qui le lie au legend)->legend(display:table; applicable car le fieldset a perdu ses caractéristique d'affichage) .

Note: un display:inline-block , fera peut-etre l'affaire pour ff3 et les autres ?, a defaut de form imbriquable , un div pour le second parent pourrait faire office de conteneur parent au fieldset ? ...

sinon , serieusement cela vaut-il le coup d'apprivoiser un <legend> .. ne serait-ce pas un mythe Smiley smile ?

GC
houlà !!!

je me posais justement la même question, comment mettre en form mon legend...

Laisse tomber !
je vais mettre du hn Smiley cligne
Sujet clos
Aller à