Legend à gauche

Version imprimable

26/07/2012, 07h15
Pyanepsion

Legend à gauche

Bonjour à tous.

Legend est un bloc contenant du texte.
Je souhaite que ce bloc reste toujours positionné à gauche et que dans ce bloc le texte soit centré au milieu du bloc.

C'est le comportement normal avec Internet Explorer, Firefox et Opera.
Dans Chome et Safari, le centrage du texte amène aussi un centrage du bloc.

Comment positionner ce bloc toujours à gauche ? Merci pour vos explications.
26/07/2012, 08h39
ledisciple
Bonjour

Ceci te conviendrai?
Code:

1 2 3 4 5 6 legend { margin: auto; width: 1%; display: block; }
26/07/2012, 11h01
Pyanepsion

Hélas non. C'est d'ailleurs un peu ce que j'utilisais déjà (.legend, .prestige, etc.)

Sinon,

Code:

position:absolute;

améliore la chose. Seul, mais gros problème : la balise p qui suit est mangée par la balise legend.

Voir sous Chrome ou Safari le bouton de mon site : Réception du document, à la page : /prestations/correction.php.
27/07/2012, 19h05
NoSmoking

Bonjour,

Citation:

Envoyé par Pyanepsion

le bloc legend lui-même est positionné à gauche
(...)
Comment positionner ce bloc toujours à gauche ?

il faut avouer que cela n'est pas clair :koi:
j'aurais tendance à dire ne fais rien, mais sans plus d'explications claires et d'un éventuel morceau de code...:zzz:

:D C'est sûr que ne connaissant pas la réponse, poser une question pertinente est parfois un peu difficile... même si j'ai cependant donné un lien vers la page de mon site permettant alors de mieux comprendre.

Avec un source ce sera plus clair. Selon les différents navigateurs, le bloc bleu sera positionné à gauche ou au centre alors que seul son contenu (le texte : Bloc legend) devrait être centré dans ce bloc bleu, ledit bloc devant rester à gauche.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Formulaire</title>
<style>
        legend{
                border: 1px solid blue;
                width: 450px;
                text-align: center;
        }
</style>
</head>
<body>
<form>
	<fieldset>
		<legend>Bloc legend</legend>
		<p>Texte de la balise p</p>
	</fieldset>
</form>
</body>
</html>

J'ai trouvé une solution qui me semble peu adaptée : déplacer le text-align dans un div.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Formulaire</title>
<style>
        legend{
                border: 1px solid blue;
                width: 450px;
        }
        .center{
                text-align: center;
        }
</style>
</head>
<body>
<form>
	<fieldset>
		<legend><div class="center">Bloc legend à gauche — Contenu centré</div></legend>
		<p>Texte de la balise p</p>
	</fieldset>
</form>
</body>
</html>

Il doit bien y avoir beaucoup mieux ?

27/07/2012, 19h27
NoSmoking
Citation:

même si j'ai cependant donné un lien vers la page de mon site

le lien n'est pas actif.

sans utiliser de DIV intermédiaire pourquoi ne pas mettre directement
Code:

1 2 3 4 5 legend{ border: 1px solid blue; width: 450px; text-align:center; /* centrage du texte */ }
27/07/2012, 19h49
Pyanepsion

(J'ignorais si je pouvais donner ici un lien en dur.)

Ton option correspond au premier source. Cela centre aussi le bloc <legend> lui-même dans <fieldset> quand on est sur Chrome ou sur Safari.

Il s'agit de centrer uniquement le texte contenu dans le bloc <legend>, ce bloc <legend devant rester à gauche.

Cela devient nécessaire dès qu'il y a des sous-fieldset. Par exemple : sur ce devis de correction orthographique. Si on regarde avec Chrome ou Safari, la distinction entre les deux niveaux du formulaire devient moins facile : par exemple le bouton "Révision - Relecture".
27/07/2012, 20h34
NoSmoking
Citation:

Ton option correspond au premier source.

:oops: pas vu celle ci.

Je vois effectivement que Chrome et Safari centre l'ensemble...bug!?!
Opéra, FireFox et IE on un comportement que je qualifie de correct, il faudrait fouiller pour en savoir plus.

On en arrive donc à
Code:

1 2 3 4 5 6 legend{ border: 1px solid blue; padding:0.25em 5em; /* width: 450px;/**/ /* text-align:center;/**/ }
en jouant sur le padding mais tu n'auras pas la même largeur.

A suivre...

après plusieurs essais et une tentative de compréhension, il me semble que tu auras du mal à trouver plus simple à mettre en oeuvre que ce que tu as fait à savoir un élément de type block, cela a un simple inconvénient, ce n'est pas valide.

Sinon il y a la solution de retravailler le style de LEGEND en le plaçant en position absolute avec les margin et padding qui vont bien (?), mais attention à la fusion des marges qui donne des résultats très différents entre les webkit et les autres sans parler de IE.

Je te livre le moins pire
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8" /> <title>Formulaire</title> <style> fieldset{ position:relative; padding-top:1em 0; margin:1em 0; } legend{ position:absolute; border:1px solid blue; width:450px; text-align:center; margin:-1.25em 0 0 0; /* padding:0.25em;/**/ line-height:1.5em; background-color: #fff; } </style> </head> <body> <form action=""> <fieldset><legend>Bloc legend à gauche — Contenu centré</legend> <p>Texte de la balise p</p> </fieldset> </form> </body> </html>

28/07/2012, 07h12
Pyanepsion

Bravo.:D

Edit : Aïe ! Cela ne fonctionne par contre pas quand il y a plusieurs lignes dans <legend>. Par exemple ici avec une largeur de 145px.

Il faudrait en fait que la balise <p> qui suit ne puisse jamais être mangée par la balise <legend>.

Citation:

Envoyé par Pyanepsion

Bravo.:D

eh oui tu t'es emballé un peu vite

Citation:

Envoyé par NoSmoking

Je te livre le moins pire

:mrgreen:

Reprenons, sémantiquement parlant l'utilisation d'une LEGEND et autre FIELDSET n'est pas forcément justifiée, j'aurais plutôt fait une structure sur base de DIV et Hx, mais si tu souhaites conserver le FIELDSET il te faut oublier la LEGEND et passer par une DIV en position:relative que tu recadres avec l'avantage de rester dans le flux, de plus le rendu a plus de chance d'être le même sur les différents navigateurs.

Un exemple sur base de ce que je viens d'écrire
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 <!DOCTYPE html> <html lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Formulaire</title> <style type="text/css"> form{ margin:2em 0; } fieldset{ position:relative; padding-left:0.5em; padding-top:0; } .div_legend{ position:relative; border:1px solid blue; width:150px; text-align:center; margin:-0.75em 0 0 0.5em; padding: 0 0.5em; line-height:1.5em; font-size:1em; background-color: #fff; word-wrap:break-word; } </style> </head> <body> <form action=""> <fieldset><div class="div_legend">Bloc legend à gauche — Contenu centré</div> <p>Texte de la balise p</p> </fieldset> </form> <form action=""> <fieldset><div class="div_legend">Bloc legend</div> <p>Texte de la balise p</p> </fieldset> </form> </body> </html>
c'est à affiner.

28/07/2012, 11h54
Pyanepsion

<div> ne passe pas à la validation.

Je vois aussi que tu as regardé mes pages. Il me faut donc expliquer la démarche suivie.

Pour conserver une homogénéité avec les différentes pages de formulaires (menu : « Devis, Tarifs, etc. »), j'ai préféré sur les pages du menu : « Prestations » conserver la présentation sous forme de formulaire. Cela évite de devoir batailler un peu partout lors de chaque modification, et sur le plan sémantique rien ne s'y oppose : un formulaire peut très bien n'avoir rien à remplir (même si en pratique c'est souvent un peu con). De plus, à terme, disons début aout, je vais aligner définitivement la présentation de mes pages Prestations sur la page Commande avec pour seule différence la description des options spécifiques à la prestation de la page en cours.

Finalemement, une meilleure solution consiste à remplacer les <legend> par un <hx>. Il n'y a qu'une seule contrainte : faire attention bien sûr à ne pas chambouler les niveaux de titres déjà existants. Chez moi ce sera donc des <h3>, <h4> et <h5>.
28/07/2012, 18h42
Candygirl

Hello,

Quelqu'un semble avoir déjà signalé la problématique ici en 2010.

Si la structure à base de fieldset/legend est correcte pour l'emploi que tu en fais, que tu arrives à une solution avec le simple rajout d'un élément span à l'intérieur du legend (et non pas div, afin de préserver la validation mais => ajout d'un display:block) j'utiliserais cette méthode plutôt que de chercher midi à 14 heures des solutions de substitution.

Bonjour Candygirl:D

Citation:

Envoyé par Candygirl

Quelqu'un semble avoir déjà signalé la problématique

Le lien que tu donnes renvoie sur le sommaire de ma boutique en ligne.

Arg ! J'avais mal écrit <span> et c'est donc pour ça que j'avais essayé <div>. Avec <span> c'est tout de même mieux, d'autant que ce bogue de Chrome et Safari finira bien par être corrigé.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8" /> <title>Formulaire</title> <style> legend{ border: 1px solid blue; width: 150px; } span{ text-align: center; display: block; } </style> </head> <body> <p>Texte avec p</p> <form> <fieldset> <legend> <span>Centrage</span> </legend> <p>Texte avec p</p> </fieldset> </form> </body> </html>

:oops: j'ai corrigé le lien, une erreur de cc ;)

Autrement dans le genre gros bricolage, avec le code d'origine, sans le span, mais qui nécessite que le fieldset/legend soit le premier élément du formulaire:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Formulaire</title>
<style>
 
        form {
                border:1px solid #999;
                line-height:1.2em;
                margin-top:1em;
        }
 
        fieldset {
                width:0; /* le legend centré sur 0 restera à gauche */
                border:0;
                margin-top:-0.6em;
                position:relative;
                bottom:1px;
        }
 
        legend{
                border: 1px solid blue;
                width: 450px;
                text-align:center;
                background:#FFF;
        }
 
</style>
</head>
<body>
<form>
	<fieldset>
		<legend>Bloc legend à gauche — Contenu centré Bloc legend à gauche — Contenu centréBloc legend à gauche — Contenu centré</legend>
		<p>Texte de la balise p</p>
	</fieldset>
</form>
</body>
</html>

Évidement, si le texte passe sur deux lignes, le legend n'est plus centré verticalement mais je trouve plus esthétique perso.

Après, comme je l'ai dit, je préférerais juste rajouter le span ;)

29/07/2012, 09h37
Pyanepsion

:( Depuis 2010, Google semble un peu long à la détente. Enfin bon, je vais donc modifier ce matin tous mes <legend>.

Merci Candygirl.:D

Edit : Voilà qui est fait. 94 legend quand même, et bien sûr le couper-remplacer tout était impossible. Le résultat est enfin plus sympathique sur les iPad, par exemple sur les différents formulaires de la boutique en ligne.