5568 sujets
Sémantique web et HTML
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 ?
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
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
Pyanepsion a écrit :
Pas mal !
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
Pour webkit, vois si un float:left; peut-être gérable
++
Voici un source qui résout le problème vu sous Chrome et Safari.
Merci une fois de plus à tous pour votre aide.
Modifié par Pyanepsion (28 Jul 2012 - 07:22)
<!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>
Modifié par Pyanepsion (28 Jul 2012 - 07:22)
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.