5591 sujets

Sémantique web et HTML

[Résolu] Legend à gauche

Bonjour à tous.

Quel que soit l'alignement interne de son contenu, par défaut, dans Internet Explorer et dans Firefox, le bloc legend lui-même est positionné à gauche.
Dans Chome, Safari et Opéra, il est centré.

Comment positionner ce bloc toujours à gauche ? Merci pour vos explications.
Smiley biggrin Ça avance...

@JuseN : absolute aligne bien à gauche. Il reste cependant un souci avec le p qui suit, car celui-ci est mangé par le legend.

Voir : Révision – Relecture, sur la page : prestations/correction.php.

@SuperMerguez : je ne comprend pas de quoi tu parles et donc ce qu'il faudrait faire.
Ouf ! C'est donc ce que je faisais. Smiley biggrin

Il reste à mettre un peu d'espace sous le bloc legend (voir la page précédente). Comment faire ?
J'ai trouvé une solution. Elle m'apparait peu satisfaisante.
Elle consiste à mettre le contenu de <legend> dans une balise <div>.

Comment faire plus simple pour obtenir le même affichage (bloc à gauche et son contenu centré dans ledit bloc) quelque soit le navigateur ?


<!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>
bonjour,

si tu ne veut pas toucher au html, tu peut jouer avec le pseudo-element :after, ou pas , dans le sens ou legend aurait un display:inline-block; par défaut et qui accepterais un simple width : text-align..avec des differences d'interpretation sur le text-align ...

Plutôt que d'argumenter ou expliquer : voir le dessin http://dabblet.com/gist/3189239
ou http://result.dabblet.com/gist/3189239

voir differences sous ie9 , FF, Chrome

Cordialement,
GC
Pas mal ! Smiley biggrin

Je m'interroge par contre sur le (joli) JavaScript inclu. Ça pourrait faire peur d'autant qu'il se présente comme un commentaire qu'il n'est pas.

L'alignement du bloc à gauche (deuxième cas) ne fonctionne pas sous Chrome et sous Safari.
Pyanepsion a écrit :
Pas mal ! Smiley biggrin

Je m'interroge par contre sur le (joli) JavaScript inclu. Ça pourrait faire peur d'autant qu'il se présente comme un commentaire qu'il n'est pas.

L'alignement du bloc à gauche (deuxième cas) ne fonctionne pas sous Chrome et sous Safari.


le js est surement le script de Lea Verrou (auteur de cette utilitaire) qui prefixe les feuilles de styles la ou il faut si il faut (Alsacréations en déjà parlé), et quand tu commence a t'en servir, tu ne peut plus t'en passer, t'en oubli même que les prefix-vendor existent Smiley smile

Pour webkit, vois si un float:left; peut-être gérable Smiley smile

++
Voici un source qui résout le problème vu sous Chrome et Safari.



<!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>


Smiley biggrin Merci une fois de plus à tous pour votre aide.
Modifié par Pyanepsion (28 Jul 2012 - 07:22)
Finalement non.

Cela ne fonctionne 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 cachée par la balise <legend>.
Modifié par Pyanepsion (28 Jul 2012 - 09:51)
Smiley biggrin C'est une bonne idée, et ça évite les rustines à n'en plus finir en attendant que ce bogue de Chrome et Safari ne soit corrigé. Merci.

Sur mes pages les formulaires sont déjà dans une zone <h2>. Je vais donc remplacer les <legend> par des <h3>, <h4>, et <h5> spécifiques aux <fieldset>, histoire de ne pas mécontenter Google (à juste puisqu'en imprimerie ce serait également une aberration) pour le référencement des ces pages...

Et voilà la résolution enfin élégante d'un problème qui me tenait en haleine depuis quelque temps.
Sujet clos
Aller à