html - tamaño - ¿Es posible lograr un efecto similar a<fieldset> sin usar la etiqueta<fieldset>?
para que se utiliza la etiqueta fieldset en html (8)
Personalmente, me gusta la etiqueta <fieldset> debido a cómo dibuja un cuadro y coloca a <legend> en la parte superior, sobre el borde. Me gusta esto.
Sin embargo, el elemento fieldset se creó para organizar forms , y su uso para el diseño general no es mejor que usar tablas para el diseño general. Entonces, mi pregunta es ... ¿cómo puedo lograr el mismo resultado usando otra etiqueta? El borde debe borrarse debajo de <legend> (o cualquier otra etiqueta que se use), y como podría haber una imagen de fondo de cuerpo "complejo", no puedo permitirme simplemente establecer el background-color de background-color de la leyenda en Coincidir con el del elemento debajo.
Me gustaría que funcione sin JavaScript, pero los formatos CSS3 y XML (como SVG o XHTML) están bien.
Sin embargo, fue hecho para organizar formularios, y usarlo para diseño general no es mejor que usar tablas para diseño general
Esto es un error. El problema principal con el uso de tablas para el diseño es que casi ningún diseño se asigna a datos tabulares. El segundo problema es que ninguno de los que no se asignan a los datos tabulares son datos tabulares, y algunos de los que no lo hacen. Es decir, la semántica del marcado no coincidiría con la de la página. Además, de manera pragmática, el mecanismo de disposición de las tablas generalmente hace que el estilo personalizado y la navegación de solo texto sea dolorosa o imposible.
Ahora, fieldset claramente tiene la intención de agrupar campos de formulario. Y elegir un elemento para su apariencia es casi siempre una señal de que es una mala elección. Sin embargo, para este ejemplo específico, argumentaría que una leyenda de fieldset + que contiene una lista casi no tiene desventajas (de hecho, la única que puedo imaginar es un scaper que interpreta ingenuamente el fieldset como señalización de un formulario y luego desperdiciando el tiempo en la enumeración del usuario Su contenido es diferente, pero no conozco nada que realmente haga esto). La razón principal de esto es que el elemento de forma sirve para el propósito funcional y semántico de contener entradas, mientras que el fieldset ha poseído desde los primeros días tenía efectos visuales especiales, no reproducibles. Además, si los elementos visuales en el fieldset son de algún modo funcionales, semánticamente el fieldset contiene nuevamente un conjunto de widgets interactivos, que era el punto original.
Mi consejo es usarlo si quieres. No lo haría, pero no por consideraciones semánticas: prefiero no depender de los efectos especiales y evito la forma en lugar de la función en general.
De todos modos, aquí hay algo para masticar:
<!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>
Actualizo un poco la propuesta de Anónimo a eso:
<!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_legend.test1 div {
z-index: 100;
background: white;
position: relative;
float: left;
}
.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>
Aquí una posible solución con un enfoque en la simplicidad (si puede perder un poco el requisito de un fondo transparente). No hay elementos adicionales.
section {
border: 2px groove threedface;
padding: 1em;
}
section h2 {
float: left;
margin: -1.7em 0 0;
padding: 0 .5em;
background: #fff;
font-size: 1em;
font-weight: normal;
}
<section id=foo>
<h2>
Foo
</h2>
bar
</section>
Creo que ya sabes la respuesta.
Tiene 2 opciones, proporcionar su propio borde (que es una gran cantidad de trabajo innecesario) o colocar un elemento ocluyendo el borde (el problema es que solo puede tener un color de fondo sólido, pero tal vez esté bien).
Que yo sepa, no hay nada que puedas hacer para hacer este ejercicio bien en todos los navegadores que hay. Sin embargo, me gusta tu estilo, es el enfoque correcto, pero probablemente no sea un problema que puedas resolver de manera satisfactoria.
Mi opinión general sobre estos temas es que no debe intentar hacer cosas con la web que requieren A) esfuerzo excesivo o B) una solución de marcado que no sea del todo obvia para empezar. La web tiene limitaciones y harías bien en anunciarla en lugar de tratar de evitar esas limitaciones.
Así que me veo obligado a preguntar, ¿cuál es el problema con <legend />?
No, no es realmente posible. Incluso los mismos fabricantes de navegadores están luchando con eso.
Por supuesto, no pude resistirme a intentarlo de todos modos. Y dediqué tanto tiempo a eso, que Anonymous ideó una "solución" bastante similar a la mía mientras tanto (su test1 ). Pero el mío no necesita la "leyenda" de ancho fijo.
Sin embargo, este código es evidentemente un truco, y no sé qué tan bien le irá en sitios complejos. También estoy de acuerdo con Anonymous en que usar un fieldset para agrupar no es tan malo como usar tablas para maquetar. Los conjuntos de campos fueron diseñados para agrupar elementos, aunque en HTML se supone que solo deben usarse para agrupar controles de formulario.
.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;
}
<fieldset>
<legend>Legend</legend> Fieldset
</fieldset>
<div class="fieldset">
<h1><span>Legend</span></h1> Fieldset
</div>
Como nota al margen, es posible que también desee ver la figure HTML5 y los elementos de figcaption . Esos parecen ser los mejores elementos para usar en tu ejemplo.
Sin embargo, eso es solo para la parte semántica del problema, ya que no creo que esos elementos se representen igual que un fieldset / legend. Por no mencionar que los navegadores actuales probablemente no admitan estos elementos para comenzar.
Obtuve un resultado razonable.
<div>
<div style=''position:absolute;float:top;background-image: url("whiteSquare.jpg");height:20px;z-index:10;font-size:20px''>
Header
</div>
<div style=''position:absolute;float:top;border:1px dashed gray;width:300px;margin-top:12px;z-index:1''>
<div style=''margin-top:20px;''>
<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>
</div>
</div>
</div>
Use ::before pseudoelement para generar el borde superior del <fieldset> emulado, luego coloque el elemento <legend> emulado sobre el bloque ::before con propiedades de z-index y position . Por último, use un degradado y un color sólido en la parte superior del conjunto de campo emulado, configurando el color superior del degradado lineal en transparente para que cualquier fondo que se encuentre detrás del conjunto de campo falso sea visible.
.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;
}
<div class="fieldset">
<h1><span>Title</span></h1>
<p>Content</p>
</div>