imitation d’un fieldset
Comment réaliser graphiquement l’imitation de l’élément fieldset (accompagné de l’élément html legend) en html/css.
Pourquoi imiter un fieldset ?
L’élement fieldset est sémantiquement valide si il est placé dans un formulaire (form), en dehors, ce fieldset ne provoque pas d’erreur de validation (validateur html du w3) en xhtml mais l’imitation est utile pour respecter la sémantique html. L’élément fieldset est en effet destiné à être utilisé dans les formulaires.
Imiter graphiquement un fieldset
Basiquement, il s’agit d’obtenir un div avec un bordure, d’ajouter à l’intérieur un paragraphe avec une marge verticale négative et une couleur de fond sur le texte pour cacher la bordure.
Au niveau html :
<div class="fieldnotset">
<p class="legend"><span>Fausse legende</span></p>
<p class="clear">On croirait un fieldset mais en fait non !</p>
</div>
Au niveau de la css :
p.legend {
margin-top:-0.8em;
margin-left:10px;
float:left;
}
p.legend span
{
padding:0 10px;
background-color:#fff;
}
div.fieldnotset
{ border: 1px solid #99a; }
.clear {clear:both;}
Exemple d’imitation d’un fieldset
Cette imitation de fieldset est réalisé avec du css en ligne
Imitation fieldset
Graphiquement, ces elements ressemblent à un fieldset accompagné d’une légende, mais il n’en ai rien.
Le code html de cet exemple :
<div style="border: 1px solid #99a;">
<p style="margin-top:-0.8em; margin-left:10px; float:left;">
<span style="padding:0 10px; background-color:#fafaff;">Imitation fieldset</span></p>
<p style="clear:left; padding:0 15px;">Graphiquement, ces elements ressemblent à un fieldset accompagné; d'une légende, mais il n'en ai rien.</p>
</div>
Commentaire
Vous avez tout intérêt a utiliser d’unité em pour positionner la pseudo légende, afin de permettre une bonne adaptation aux différentes tailles de caractères.
Ajouter a mon :
et
7 février 2007 at 14:47
très interessant ! merci beaucoup pour cette source cela tombe bien
7 mai 2007 at 09:25
Pour l’imiter alors qu’il existe ??
8 mai 2007 at 12:26
Oui car …
The FIELDSET element allows authors to group thematically related controls and labels. Grouping controls makes it easier for users to understand their purpose while simultaneously facilitating tabbing navigation for visual user agents and speech navigation for speech-oriented user agents. The proper use of this element makes documents more accessible.
source.
Donc s’utilise normalement dans un formulaire.
L’utilité d’imiter de fieldset est si tu veux utiliser un pseudo-fieldset dans un autre contexte.
c’est le premier paragraphe.
8 mai 2007 at 22:05
Bravo, jolie astuce
11 novembre 2007 at 01:58
Voilà…. le même
j’ai rajouté quelques éléments pour arriver à la même chose que le fieldSet sous fireFox.
sans grande modif je vous rassure.
Nota, j’ai pas trouvé comment faire pour “automatiquement” récupérer la couleur de fond (body par exemple ou bien couleur du corps du parent) dans le SPAN sans la préciser explicitement
si quelqu’un à la solution… je prends !!!!!!!!!!!!!
Code HTML
legende
On croirait un fieldset !
Code CSS
p.legend {
margin-top:-1.2em;
margin-left:0px;
float:left;
font-weight:bold;
}
p.legend span {
padding:1px;
background-color:#E2E2E2;
font-weight:bold;
}
div.fieldnoset{
border: 1px solid #99a;
padding:7px;
margin-top:7px;
margin-left:0px;
margin-bottom:0px;
margin-right:0px;
}
.clear {
margin:0px;
padding:0px;
clear:both;
}
30 novembre 2007 at 10:12
Super merci , juste une ptite remarque “il n’en ai rien” c’est pas le verbe avoir
je sais c’est completement hors sujet et perso on s’en fou !
juste comme ça .c’est le petit detail qui ferai mieux ^^
3 décembre 2007 at 23:40
Bonjour,
C’est exactement le type de technique que je cherchais pour mon site.
Par contre, je suis face a un bug de rendu sous IE (en version 6, je ne sais pas ce qu’il en est pour la version 7) que je n’arrive pas à résoudre.
En effet, si je fais flotter le conteneur .fieldnotset (un simple float:left dans le css), alors la légende se retrouve “coupée”. C’est comme si ce qui dépassait du rectangle était effacé.
Quelqu’un saurait-il comment tordre le coup à ce bug?
16 janvier 2008 at 18:10
Excellent ton idée de développer un fieldset entierement en css.
Seul probleme, j’ai l’impression que c’est pas compatible sur IE6…snifff
CSS et compatibilité, quel combat décidemment!!
A bientot
22 mai 2008 at 17:29
Bonjour, j’ai découvert les fieldset , par hasard il y a a peine quelques jours, ai voulu jouer avec les les fieldset , sans succes… (a part coller des images à la place> voir www.marseille-sur-web.fr/tourisme/indexmon.php) , alors je suis tombé sur le imité , Bravo , impressionnant ! et que j’utiliserai surement un jour.
Mais quelqu’un a t’il l’astuce pour eliminer le petit liseret de la couleur du cadre central qui reste a l’exterieur? car a part le melanger avec la couleur de fond, je sais pas trop.. (et rien à voir avec le navigateur)
voir www.marseille-sur-web.fr/amis/webmaster.php > 4 exemples.
et à noter egalement, l’essai 1) (boite bleue) , le faux ‘legend’ en rouge ressort bien sous firefox mais bidon sous IE, tronqué dans sa partie superieure.. bon, je sais on va tous passer sur firefox, mais quand meme… (rire)
Merci, et bonne continuation dans les ‘magouilles’ !
Paul