Fieldset на слоях

@ua30 · Регистрация: 01.09.2016

Студворк — интернет-сервис помощи студентам

Добрый день!

Хочу на слоях сделать эффект наподобие fieldset. Проблема в том, что когда в legend возникает вторая строка, он накладывается на контент родителя. Как этого можно избежать?

https://jsfiddle.net/w419kLfk/

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<br /><br />
 
<div class="fieldset">
  <div class="legend">legend legend legend legend legend legend legend legend legend legend</div>
  fieldset fieldset fieldset fieldset fieldset fieldset fieldset 
</div>
 
<br /><br />
 
<div class="fieldset limit">
  <div class="legend">legend legend legend legend legend legend legend legend legend legend</div>
  fieldset fieldset fieldset fieldset fieldset fieldset fieldset 
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.fieldset {
    border: 1px solid #777;
    position: relative;
  padding-top: 10px;
}
 
.legend {
    border: 1px solid #777;
    margin: 0;
    position: absolute;
    top: -10px;
    left: 10px;
    background: white;
}
 
.limit {
  width: 300px;
}

Вариант использовать fieldset - не вариант. Т.к. хочется свободы в изменении внешнего вида сайта путем правки CSS, без необходимости внесения изменений в саму HTML-верстку.

Спасибо!

@Penetrator_ · 06.04.2017, 14:47

Привет! если position убрать то будет родитель растягиваться но накрывать не будет пойдёт?

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.fieldset {
    border: 1px solid #777;
  padding-top: 10px;
}
 
.legend {
    border: 1px solid #777;
    margin: 0;
    background: white;
}
 
.limit {
  width: 300px;
}

@ua30 · 06.04.2017, 14:55 **[ТС]**

Penetrator_, спасибо, но мне надо чтоб внешне был как fieldset.

Добавлено через 1 минуту
Проще говоря, чтоб было вот так:
https://jsfiddle.net/w419kLfk/4/

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<br /><br />
 
<fieldset>
  <legend>legend legend legend legend legend legend legend legend legend legend</legend>
  fieldset fieldset fieldset fieldset fieldset fieldset fieldset 
</fieldset>
 
<br /><br />
 
<fieldset class="limit">
  <legend>legend legend legend legend legend<br>legend legend legend legend legend</legend>
  fieldset fieldset fieldset fieldset fieldset fieldset fieldset 
</fieldset>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
fieldset {
    border: 1px solid #777;
}
 
legend {
    border: 1px solid #777;
    margin: 0;
    background: white;
}
 
.limit {
  width: 300px;
}

@Penetrator_ · 06.04.2017, 14:56

Не понял. внешне как fieldset это как? При появлении второй строки вы поднимаете выше по позиции top просто не -10 а -25 px. Лучше нарисуйте как должно быть при условии добавления второй строки
А всё понял... не увидел ваше добавление

@ua30 · 06.04.2017, 14:58 **[ТС]**

Сообщение от Penetrator_

При появлении второй строки вы поднимаете выше по позиции top просто не -10 а -25 px.

А если я не знаю, влезет текст на одну строку или в две. Или на все три будет?

Нужно чтоб было как в последнем примере.

@Penetrator_ · 06.04.2017, 15:23

пробуйте

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.fieldset {
    border: 1px solid #777;
    position: relative;
  padding-top: 10px;
}
 
.legend {
    border: 1px solid #777;
    margin: 0;
    position: relative;
    top: -20px;
    left: 10px;
    background: white;
}
 
.limit {
  width: 300px;
}

@ua30 · 06.04.2017, 15:45 **[ТС]**

Penetrator_, спасибо за старания. Но как это поможет со случаями, когда будет не 2 строки, а 1 или 3, а может 10?

@Penetrator_ · 06.04.2017, 16:05

Сообщение от ua30

Penetrator_, спасибо за старания. Но как это поможет со случаями, когда будет не 2 строки, а 1 или 3, а может 10?

Я наверно вообще Вас к концу дня не понимаю(
извиняюсь вот ссылка на код

@ua30 · 06.04.2017, 16:37 **[ТС]**

Penetrator_, сорри, протормозил!

Нет идей, как можно убрать лишнее пустое место после "legend" в этом примере? Я добавил обертку fieldset_body и поставил отрицательный верхний марджин, может можно проще как-то:

https://codepen.io/anon/pen/aJryWR

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<br /><br />
 
<div class="fieldset">
  <div class="legend">legend legend legend legend legend legend legend legend legend legend</div>
  fieldset fieldset fieldset fieldset fieldset fieldset fieldset 
</div>
 
<br /><br />
 
<div class="fieldset limit">
  <div class="legend">legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legendlegend legend legend legend legend legend legend legend legend legendlegend legend legend legend legend legend legend legend legend legendlegend legend legend legend legend legend legend legend legend legend</div>
  <div class="fieldset_body">fieldset fieldset fieldset fieldset fieldset fieldset fieldset fieldset fieldset fieldset fieldset fieldset fieldset fieldset fieldset fieldset fieldset fieldset fieldset fieldset fieldset fieldset fieldset fieldset fieldset fieldset fieldset fieldset fieldset fieldset fieldset fieldset fieldset fieldset fieldset fieldset fieldset fieldset fieldset fieldset fieldset fieldset 
</div></div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.fieldset {
    border: 1px solid #777;
    position: relative;
  padding-top: 0px;
}
 
.legend {
  width:95%;
    border: 1px solid #777;
    margin: 0;
    position: relative;
    top: -20px;
    left: 10px;
    background: white;
}
 
.fieldset_body
{
  margin-top: -20px;
}
 
.limit {
  width: 300px;
}

@Penetrator_ · 06.04.2017, 16:47

дак вам надо опустить ниже блок с legend -25px на -20 поставьте или как нужно вам -5 у меня нормально смотрится от первоначального варианта

Добавлено через 6 минут
padding-top только не забудьте убрать у fildset

@web-tech · 06.04.2017, 17:10

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="form">
  <div class="fieldset">
    <div class="legend">
      legend legend legend legend legend legend legend legend legend legend
    </div>
    <div class="form-group">
      fieldset fieldset fieldset fieldset fieldset fieldset fieldset
    </div>
  </div>
  <div class="fieldset limit">
    <div class="legend">
      legend legend legend legend legend legend legend legend legend legend
    </div>
    <div class="form-group">
    fieldset fieldset fieldset fieldset fieldset fieldset fieldset
    </div>
  </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.form {
  padding-top: 50px;
}
.fieldset {
    border: 1px solid #777;
  margin-bottom: 50px;
}
.legend {
  border: 1px solid #777;
  display: table;
  text-align: center;
  transform: translateY(-50%);
  padding: 8px;
  margin: 0 auto;
  background: white;
  max-width: 80%;
}
.limit {
  width: 300px;
}

https://jsfiddle.net/w419kLfk/6/

@ua30 · 06.04.2017, 17:52 **[ТС]**

Penetrator_, так надо чтоб при одной строчке легенда была посередине бордюра фиелдсета.

web-tech, спасибо и Вам, интересное решение. Не очень правда люблю display: table;

@web-tech · 06.04.2017, 17:54

Сообщение от ua30

Не очень правда люблю display: table;

Не хотите css таблицы пользовать, замените на inline-block и задайте для .fieldset text-align: center

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="form">
  <div class="fieldset">
    <div class="legend">
      legend legend legend legend legend legend legend legend legend legend
    </div>
    <div class="form-group">
      fieldset fieldset fieldset fieldset fieldset fieldset fieldset
    </div>
  </div>
  <div class="fieldset limit">
    <div class="legend">
      legend legend legend legend legend legend legend legend legend legend
    </div>
    <div class="form-group">
    fieldset fieldset fieldset fieldset fieldset fieldset fieldset
    </div>
  </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.form {
  padding-top: 50px;
}
.fieldset {
  border: 1px solid #777;
  margin-bottom: 50px;
  text-align: center;
}
.legend {
  border: 1px solid #777;
  display: inline-block;
  text-align: center;
  transform: translateY(-50%);
  padding: 8px;
  margin: 0 auto;
  background: white;
  max-width: 80%;
}
.limit {
  width: 300px;
}

https://jsfiddle.net/w419kLfk/7/

@ua30 · 06.04.2017, 18:12 **[ТС]**

web-tech, спасибо, очень интересный вариант. Но у него есть существенный минус - чем больше высота legend, тем больше пустого места остается после него. Так понял, браузер резервирует его под слой, без учета смещения или х3 что...

https://jsfiddle.net/w419kLfk/8/

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="form">
  <div class="fieldset">
    <div class="legend">
      legend legend legend legend legend legend legend legend legend legend
    </div>
    <div class="form-group">
      fieldset fieldset fieldset fieldset fieldset fieldset fieldset
    </div>
  </div>
  <div class="fieldset limit">
    <div class="legend">
      legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend legend
    </div>
    <div class="form-group">
    fieldset fieldset fieldset fieldset fieldset fieldset fieldset
    </div>
  </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.form {
  padding-top: 50px;
}
.fieldset {
    border: 1px solid #777;
  margin-bottom: 50px;
 
}
.legend {
    border: 1px solid #777;
  display: inline-block;
  transform: translateY(-50%);
  padding: 8px;
    margin-left: 10px;
    background: white;
  max-width: 80%;
}
.limit {
  width: 300px;
}

@web-tech · 06.04.2017, 18:25

Сообщение от ua30

чем больше высота legend, тем больше пустого места остается после него.

Это за счет transform: translate - элемент смещается, но его место остается в потоке, аналогично смещению при position relative. Но этот способ решает выравнивание посередине блока при разном количестве строк контента (больше двух строк на практике редко оказывается, да и две строки не часто там окажется).

@ua30 · 06.04.2017, 18:35 **[ТС]**

Сообщение от web-tech

аналогично смещению при position relative

Неа... см. пример по ссылке Fieldset на слоях

@web-tech · 06.04.2017, 18:59

Сообщение от ua30

Неа... см. пример по ссылке

Ну как же нет - элемент смещается, а место остается зарезервировано под него в потоке.
Разница только лишь в самом смещении: при transform: translate элемент в моем примере смещается на 50% от своей высоты, а в том случае - смещение на определенное количество пикселей.

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом

@Penetrator_ 24 / 24 / 12 Регистрация: 01.03.2017 Сообщений: 93
	06.04.2017, 14:56
	Не понял. внешне как fieldset это как? При появлении второй строки вы поднимаете выше по позиции top просто не -10 а -25 px. Лучше нарисуйте как должно быть при условии добавления второй строки А всё понял... не увидел ваше добавление 0

@ua30 1 / 1 / 0 Регистрация: 01.09.2016 Сообщений: 73
	06.04.2017, 15:45 [ТС]
	Penetrator_, спасибо за старания. Но как это поможет со случаями, когда будет не 2 строки, а 1 или 3, а может 10? 0

@Penetrator_ 24 / 24 / 12 Регистрация: 01.03.2017 Сообщений: 93
	06.04.2017, 16:47
	дак вам надо опустить ниже блок с legend -25px на -20 поставьте или как нужно вам -5 у меня нормально смотрится от первоначального варианта Добавлено через 6 минут padding-top только не забудьте убрать у fildset 1

@ua30 1 / 1 / 0 Регистрация: 01.09.2016 Сообщений: 73
	06.04.2017, 17:52 [ТС]
	Penetrator_, так надо чтоб при одной строчке легенда была посередине бордюра фиелдсета. web-tech, спасибо и Вам, интересное решение. Не очень правда люблю display: table; 0

Fieldset на слоях

Решение