[Résolu] <span><legend></legend></span> et val

Bonjour,

Pour faire suite à ce topic, dans lequel il était dit:

Florent V. a écrit :

<fieldset>
  <legend>Ligne 1</legend>
  <label for="l1c1">Oui <input type="checkbox" id="l1c1"></label>
  <label for="l1c2">Non <input type="checkbox" id="l1c2"></label>
  <label for="l1c3">Sans objet <input type="checkbox" id="l1c3"></label>
</fieldset>

(le tout pouvant être linéarisé en CSS, moyennant un span autour ou dans le LEGEND, peut-être, je sais plus exactement).

Effectivement, le code suivant permet de linéariser <legend> et ce qui suit:

	<fieldset>
	<span style="float: left"><legend>Voie</legend></span>
		<label for="tenue1_1_1_oui">Oui</label><input type="radio" id="tenue1_1_1_oui" />
		<label for="tenue1_1_1_non">Non</label><input type="radio" id="tenue1_1_1_non" />
	</fieldset>

Mais… Le validateur du w3c m'indique une erreur:

validator a écrit :
document type does not allow element "legend" here

J'ai raté un truc? Ou c'est la syntaxe qu'il n'aime pas?
Modifié par speedlab (16 Aug 2010 - 21:09)

'lut,

c'est normal puisque l'élément LEGEND n'accepte que le FIELDSET comme parent. Il faut donc mettre le SPAN à l'intérieur du LEGEND.

Salut Heyoan,
J'entends bien, mais dans ce cas-là, un comportement étrange sur mac avec safari 5 et chrome 5.
En effet avec le code suivant, le texte disparaît

<legend><span style="float: left;">Voie</span></legend>

Je mets disparaît car ça revient à visibility: none, la place est gardée mais le texte n'apparaît pas. Même, plus étrange: le texte apparaît si je mets <span style="background-color: red;">.

Je précise qu'il n'y a aucun style appelé ou importé, j'en suis à la construction du formulaire…

Une page en ligne si tu veux jeter un œil, premier <legend>: http://www.antiflam.com/index2.html (la page ne restera pas longtemps en ligne)
Modifié par speedlab (14 Aug 2010 - 23:24)

Eh bien j'aimerais bien avoir un Mac sous la main mais ça n'est malheureusement pas le cas.

Sinon je ne comprends pas bien l'intérêt ni du SPAN, ni du float:left. Quel est le rendu que tu souhaites obtenir ?

Alors, je n'ai pas de pc sous la main
Mais le <span> permet de "linéariser" afin d'avoir un ligne comme ça:

Voie Oui [ ] Non [ ]

Le tout grâce au code suivant:

<span style="float: left"><legend>Voie</legend></span> 
        <label for="tenue1_1_1_oui">Oui</label><input type="radio" id="tenue1_1_1_oui" /> 
        <label for="tenue1_1_1_non">Non</label><input type="radio" id="tenue1_1_1_non" />

Suis-je assez clair? Tu as pu jeter un œil à la page en ligne avec un pc?

Ah OK.

Alors avec ce code ça semble fonctionner :

fieldset {
	border: none;
	padding: 0;
	margin: 5px 0;
}
fieldset legend {
	float:left;
	padding-right: 15px;
	font-weight: bold;
}

Sauf sur les versions d'IE < 8 qui créent un retour à la ligne après le LEGEND... mais ça reste lisible.

Bonjour,
je sais d'expérience que s'agissant de Firefox, certaines propriété (comme float ou position) de l'élément legend ayant eu des valeurs marquées ! important jusqu'à la version 3 de FF (au moins), et les déclaration marquées comme tel prenant le dessus sur tout, un float:left/right sur legend et marqué ! important n'avait bizarrement aucun effet.

Ce n'est plus le cas pour ce qui est de Firefox3.6 (chercher forms.css dans le dossier Mozilla) mais essayez de changer par exemple le line-height d'un input, vous n'y parviendrez pas.
L'exemple d'Heyoan devrait donc à présent fonctionner.

Je ne sais pas comment se comporte les autres navigateurs à ce niveau là mais il me semble que le comportement était similaire sur certaines déclarations.


Attention: si l'élément legend n'est pas directement inclu dans le fieldset, les style par defaut de FF ne seront pas appliquées, encore une bonne raison de valider ses documents :

fieldset > legend {
  padding-left: 2px;
  padding-right: 2px;
  border: none;
  position: static;
  float: none;
  width: -moz-fit-content;
  min-width: 0;
  max-width: none;
  height: auto;
  min-height: 0;
  max-height: none;
  white-space: nowrap;
}

Modifié par Hermann (15 Aug 2010 - 12:35)

Hello,

Heyoan a écrit :
Sauf sur les versions d'IE < 8 qui créent un retour à la ligne après le LEGEND... mais ça reste lisible.

et

Hermann a écrit :
Je ne sais pas comment se comporte les autres navigateurs à ce niveau là mais il me semble que le comportement était similaire sur certaines déclarations.

Le problème se situe bien à ce niveau-là: le formulaire en construction doit être orienté ie6, les autres navigateurs passant au second plan (voire au troisième …).

Va falloir rebrancher le pc portable et tester tout ça (je sens que je ne suis pas arrivé au bout de mes peines, moi… Ça sent le bon dimanche)

speedlab a écrit :

Le problème se situe bien à ce niveau-là: le formulaire en construction doit être orienté ie6, les autres navigateurs passant au second plan (voire au troisième …).

Les styles par défaut du layout engine d'IE n'étant à ma connaissance pas connaissables, c'est effectivement assez problématique.
Modifié par Hermann (15 Aug 2010 - 12:47)

Plop !

speedlab a écrit :
le formulaire en construction doit être orienté ie6

Je suppose que c'est pour un intranet ?

Dans ce cas le rendu n'est pas mal en mettant, comme tu l'as fait, les SPAN autour des LEGEND. Il manque peut-être simplement

span {
	float: left;
	width: 80%;
}

Edit: un aperçu dans IE6 (PC) :


Modifié par Heyoan (15 Aug 2010 - 13:06)

Salut Heyoan

Heyoan a écrit :
Je suppose que c'est pour un intranet ?

Bien vu

Une petite question: la copie d'écran que tu joins vient de l'url que j'ai postée hier soir?

Si c'est le cas, le résultat semble tenir la route; j'avais continué le dév tard dans la nuit, donc sans poster sur alsacreations…

Je n'y touche plus, j'attends de tes news.

Bon après-midi!

speedlab a écrit :
la copie d'écran que tu joins vient de l'url que j'ai postée hier soir?

Yep : celle de ce post. J'ai juste rajouté le width sur le SPAN.

Pourquoi ne pas supprimer le span, et appliquer son style au legend ?

Salut et bienvenue,
Un début de réponse là.

Les styles sur <legend> ne s'appliquent pas forcément comme attendu selon le navigateur utilisé…