Возможно ли добиться эффекта <fieldset>, не используя тег <fieldset>?

Мне лично нравится тег <fieldset> из-за того, как он рисует окно и помещает <legend> вверху, над границей. Вот так.

Однако элемент fieldset был создан для организации форм, а его использование для общего дизайна не лучше, чем использование таблиц для общего дизайна, Итак, мой вопрос... как я могу добиться того же результата с помощью другого тега? Граница должна быть стерта под <legend> (или любым другим тегом будет использоваться), и так как там может быть "сложным" фоновым изображением тела, я не могу позволить просто установить background-color легенды в соответствие с одним из элементов под.

Я бы хотел, чтобы он работал без JavaScript, но CSS3 и XML-форматы (такие как SVG или XHTML) хороши.

Ответы

Ответ 1

Нет, это действительно невозможно. Даже сами разработчики браузеров борются с этим.

Конечно, я не мог удержаться от этого. И я потратил так много времени на то, что Анонимный придумал "решение", скорее похожее на мое в среднем (его test1). Но мне не нужна "легенда" фиксированной ширины.

Этот код, очевидно, немного взломан, и я не знаю, насколько хорошо он будет работать на сложных сайтах. Я также согласен с анонимным, что использование набора полей для группировки не так уж плохо, как использование таблиц для макета. Наборы полей были предназначены для группировки элементов, хотя в HTML они действительно должны использоваться только для группировки элементов управления формой.

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

Ответ 2

Демо-ссылка jsBin

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

Ответ 3

Однако было сделано форм и использования его для общего проектирования не лучше, чем использование таблиц для общий дизайн

Это ошибочно. Основная проблема с использованием таблиц для макета заключается в том, что почти нет макетов для табличных данных. Вторая проблема заключается в том, что ни один из тех, которые не сопоставляются с табличными данными, являются табличными данными, а некоторые из них - нет. То есть семантика разметки не будет соответствовать семантике страницы. Кроме того, прагматично, механизм компоновки таблиц обычно делает пользовательский стиль и текстовый просмотр болезненным или невозможным.

Теперь в полевом наборе явно есть намерение группировать поля формы. И выбор элемента для его появления почти всегда является признаком того, что это плохой выбор. Тем не менее, для этого конкретного примера я бы сказал, что у легенды fieldset +, содержащей список, почти нет недостатков (на самом деле, единственный, о котором я могу думать, - это scaper, который наивно интерпретирует набор полей как сигнализирующий форму, а затем тратит время пользователя на перечисление его содержание по-разному, но я ничего не знаю, что на самом деле это делает). Основная причина этого заключается в том, что элемент формы служит функциональной и семантической цели содержания входных данных, в то время как полевой набор обладает с ранних дней особыми, невоспроизводимыми визуальными эффектами. Кроме того, если визуальные элементы в наборе полей каким-либо образом функциональны, семантически набор полей снова содержит набор интерактивных виджетов, который был исходной точкой.

Мой совет - использовать его, если хотите. Я бы не хотел, но не из-за семантических соображений: я предпочитаю не полагаться на спецэффекты и вообще избегать функции в целом.

Во всяком случае, здесь что-то пожевать:

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

Ответ 4

Я считаю, что вы уже знаете ответ.

У вас есть 2 варианта, укажите свою собственную границу (что много ненужной работы) или поместите элемент с окклюзией границы (проблема в том, что у вас может быть только сплошной цвет фона, но, может быть, это и правда).

Насколько я знаю, вы ничего не можете сделать, чтобы сделать эту тренировку красиво в каждом браузере. Мне нравится ваш стиль, но это правильный подход, но, вероятно, не проблема, которую вы сможете решить удовлетворительным образом.

Мое общее мнение по этим темам состоит в том, что вы не должны пытаться делать что-то с помощью сети, которая требует A) чрезмерного усилия или B) решение разметки, которое не совсем очевидно для начала. В Интернете есть ограничения, и вам было бы полезно их использовать, а не пытаться обойти эти ограничения.

Итак, я вынужден спросить, в чем проблема с < legend/" > ?

Ответ 5

Я получил разумный результат.

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

Ответ 6

Я немного обновляю пропозицию анонимного:

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

Ответ 7

Здесь возможно решение с упором на простоту (если вы можете немного потерять свое требование для прозрачного фона). Нет дополнительных элементов.

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>