Est-il possible de réaliser un <fieldset> effet similaire sans utiliser le <fieldset> étiquette?

Question

Est-il possible de réaliser un <fieldset> effet similaire sans utiliser le <fieldset> étiquette?

Demandé el 6 de Février, 2010: Quand la question a-t-elle été
12137 affichage: Nombre de visites la question a
4 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Personnellement, j'aime l' <fieldset> balise parce que de la façon dont il dessine une zone et place de l' <legend> au dessus de lui, sur la frontière. Comme cette.

example image of what I'm trying to achieve

Cependant, l' fieldset élément a été fait pour organiser les formes, et de l'utiliser pour la conception générale n'est pas mieux que d'utiliser des tableaux pour la conception générale. Donc, ma question est... comment puis-je obtenir le même résultat avec un autre tag? La frontière doit être effacée en vertu de l' <legend> (ou tout autre balise sera utilisé), et depuis, il pourrait être un "complexe" du corps de l'image de fond, je ne peux pas se permettre de simplement définir l' background-color de la légende pour correspondre à celui de l'élément.

J'aimerais qu'il fonctionne sans JavaScript, mais CSS3 et formats basés sur XML (comme SVG ou XHTML) sont très bien.

Demandé el 6 de Février, 2010 par zneak

Answer 1

4 Réponses

Answer 2

44voto

Mathias Bynens Points 41065

Lien de démonstration jsBin

HTML:

 <div class="fieldset">
    <h1><span>Title</span></h1>
    <p>Content</p>
</div>

CSS:

 .fieldset
{
    border: 1px solid #ddd;
    margin-top: 1em;
    width: 500px;
}

.fieldset h1
{
    font-size: 12px;
    text-align: center;
}

.fieldset h1 span
{
    display: inline;
    border: 1px solid #ddd;
    background: #fff;
    padding: 5px 10px;
    position: relative;
    top: -1.3em;
}

Répondu el 6 de Février, 2010 par Mathias Bynens (41065 Points )

Answer 3

27voto

mercator Points 16196

Non, il n'est pas vraiment possible. Même les éditeurs de navigateurs eux-mêmes sont aux prises avec.

Bien sûr, je ne pouvais pas résister à avoir un aller à elle de toute façon. Et j'ai passé tellement de temps, que l' Anonyme est venu avec une "solution" plutôt similaire à la mienne dans le temps (sa test1). Mais le mien n'a pas besoin de la largeur fixe "légende".

Ce code est évidemment un peu un hack, et je ne sais pas comment il va se débrouiller dans des sites complexes. Je suis également d'accord avec Anonyme, que l'utilisation d'un fieldset pour le groupement n'est pas presque aussi mauvais que d'utiliser des tableaux pour la mise en page. Des balises html fieldsets été conçu pour regrouper des éléments, mais en HTML, ils sont vraiment censés être utilisés pour regrouper des contrôles de formulaire.

<!doctype html>
<style>
.fieldset {
    border: 2px groove threedface;
    border-top: none;
    padding: 0.5em;
    margin: 1em 2px;
}
.fieldset > h1 {
    font: 1em normal;
    margin: -1em -0.5em 0;
}   
.fieldset > h1 > span {
    float: left;
}
    .fieldset > h1:before {
        border-top: 2px groove threedface;
        content: ' ';
        float: left;
        margin: 0.5em 2px 0 -1px;
        width: 0.75em;
    }
    .fieldset > h1:after {
        border-top: 2px groove threedface;
        content: ' ';
        display: block;
        height: 1.5em;
        left: 2px;
        margin: 0 1px 0 0;
        overflow: hidden;
        position: relative;
        top: 0.5em;
    }
</style>

<fieldset><legend>Legend</legend> Fieldset</fieldset>

<div class="fieldset"><h1><span>Legend</span></h1> Fieldset</div>

Comme une note de côté, vous pouvez également avoir un regard sur le HTML5 figure et figcaption - éléments. Ceux qui semblent être les meilleurs éléments à utiliser dans votre exemple.

C'est seulement pour la sémantique partie de la question, bien que, depuis, je ne pense pas que ces éléments sont rendus le même comme un fieldset/legend. Pour ne pas mentionner que les navigateurs actuels ne supportent pas ces éléments pourtant, pour commencer.

Répondu el 6 de Février, 2010 par mercator (16196 Points )

Answer 4

6voto

Anonymous Points 8757

Cependant, il a été choisi d'organiser les formes, et de l'utiliser pour la conception générale n'est pas mieux que d'utiliser des tableaux pour conception générale

C'est une erreur. Le principal problème de l'utilisation des tableaux pour la mise en page, c'est que presque pas de mises en page de la carte de données tabulaires. Le deuxième problème est qu'aucun de ceux qui ne correspondent pas à des données tabulaires sont données tabulaires, et certains de ceux qui ne le sont pas. Qui est, la sémantique de l'annotation ne pas correspondre à ceux de la page. En outre, de façon pragmatique, des tableaux de mise en page mécanisme permet généralement de style personnalisé de texte et navigation pénible, voire impossible.

Maintenant, fieldset a clairement l'intention de regrouper les champs de formulaire. Et le choix d'un élément de son apparence est presque toujours un signe qu'il est un mauvais choix. Cependant, pour cet exemple précis, je dirais qu'un fieldset+légende contenant une liste a presque pas d'inconvénients (en fait, le seul que je peux penser est un scaper qui naïvement interprète fieldset comme le signal d'un formulaire et de gaspiller le temps de l'utilisateur de l'énumération de son contenu différemment; mais je ne connais rien de ce qui en fait cela). La principale raison pour cela est que l'élément de formulaire sert le fonctionnel et sémantique but de contenir des entrées, tandis que fieldset a possédé depuis le début des jours spéciaux, non reproduit les effets visuels. En outre, si les éléments visuels dans le fieldset sont en aucune façon fonctionnelle, sémantiquement le fieldset fait à nouveau contenir un ensemble de widgets interactifs, qui a été le point d'origine.

Mon conseil est de l'utiliser si vous le souhaitez. Je ne le ferais pas, mais pas à cause de considérations sémantiques: je préfère ne pas compter sur les effets spéciaux, et échapper à la forme sur la fonction en général.

De toute façon, ici est quelque chose à mâcher:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>test</title><style type="text/css">

.fake_fieldset {
    border: 2px groove ButtonFace;
    border-top-width: 0;
    margin-left: 2px;
    margin-right: 2px;
    padding: .35em .625em .75em;
    margin-top: 1em;
    position: relative;
}

.fake_legend {
    margin-top: -1em;
}

.fake_legend.test1::before {
    position: absolute;
    top: 0;
    left: -1px;
    border-top: 2px groove ButtonFace;
    content: " ";
    width: 0.5em;
}

.fake_legend.test1::after {
    position: absolute;
    top: 0;
    right: -1px;
    border-top: 2px groove ButtonFace;
    content: " ";
    width: 80%;
}


.fake_fieldset.test2 {
    padding: 0;
    padding-top: 1px; /* no collapsed margin */
}

.fake_fieldset.test2 .fake_fieldset.container {
    margin: 0;
    border: 0;
}

.fake_legend.test2 {
    display: table;
    width: 100%;
}

.fake_legend.test2 span {
    display: table-cell;
}

.fake_legend.test2 span:first-child {
    width: 0.5em;
}
.fake_legend.test2 span:first-child + span {
    width: 0; /* cells stretch */
}
.fake_legend.test2 span:first-child,
.fake_legend.test2 span:last-child {
    /* the rest of this code is left as an exercise for the reader */
}


</style></head><body>

<fieldset><legend>foo</legend>bar</fieldset>

<div class="fake_fieldset test1"><div class="fake_legend test1">foo</div>bar</div>

<div class="fake_fieldset test2"><div class="fake_legend test2"><span></span><span>foo</span><span></span></div><div class="fake_fieldset container">bar</div></div>

</body></html>

Répondu el 6 de Février, 2010 par Anonymous (8757 Points )

Answer 5

0voto

John Leidegren Points 21951

Je crois que vous connaissez déjà la réponse.

Vous avez 2 options, fournir votre propre frontière (c'est beaucoup de travail inutile) ou la position d'un élément avec obture la frontière (le problème avec cela est que vous ne pouvez avoir une solide couleur d'arrière-plan, mais peut-être que c'est bien).

À ma connaissance, il n'y a rien que vous pouvez faire pour faire de cette séance d'entraînement bien dans tous les navigateurs là-bas. J'aime ton style même si c'est la bonne approche, mais probablement pas un problème, vous serez en mesure de résoudre d'une manière satisfaisante.

Mon avis général sur ces sujets, c'est que vous ne devriez pas essayer de faire les choses avec le web qui nécessite Un) effort excessif ou B) une majoration de solution qui n'est pas évident pour commencer. Le web a des limites et que vous feriez bien de ad-elle pour eux plutôt que d'essayer de contourner ces limitations.

Je suis donc forcé de se demander, quel est le problème avec <legend/>?

Répondu el 6 de Février, 2010 par John Leidegren (21951 Points )

Est-il possible de réaliser un <fieldset> effet similaire sans utiliser le <fieldset> étiquette?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Est-il possible de réaliser un <fieldset> effet similaire sans utiliser le <fieldset> étiquette?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: