Может ли быть в секции еще секции?

@Wanderer_K · Регистрация: 07.03.2018

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

Добрый времени суток.
Я самообучаюсь верстке, поэтому у меня к вам такие простые и странные вопросы.

Верстаю с бутстрапом.
Есть header, тот как бы разделён на 2 секции.
Прям таки писать?

HTML5
1
2
3
4
5
6
7
8
<header>
    <section>
        //итд
    </section>
    <section>
        //итд
    </section>
</header>

Нет, это не 2 row.

@Freeze_Breeze · 14.04.2018, 17:32

Wanderer_K, я бы так сделал.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<header>
    <div class="container">
        <div class="row">
            <div class="col">
                <p>Первая секция</p>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <p>Вторая секция</p>
            </div>
        </div>
    </div>
</header>
 
<section>
    <div class="container">
        <div class="row">
            <div class="col">
                <h1>Секция промежуточная</h1>
            </div>
        </div>
    </div>
</section>
 
<footer>
    <div class="container">
        <div class="row">
            <div class="col">
                <h1>Футер</h1>
            </div>
        </div>
    </div>
</footer>

@Wanderer_K · 14.04.2018, 17:36 **[ТС]**

Freeze_Breeze, дело в том, что каждая "секция в header" имеет свой фоновый цвет. Поэтому мне кажется, что в header 2-е секции

@Freeze_Breeze · 14.04.2018, 17:45

Wanderer_K, секция в бутстрапе определяется как .row, а тег <section> это чисто семантическая штука. Что section, что div оба блочных элемента и разницы в них ни какой нету.

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

что каждая "секция в header" имеет свой фоновый цвет

Если в header у тебя две секции и в каждой из них есть контент (например текст, картинки, анимация) тогда раздели эти элементы как я показал примером выше, то есть каждый фон раздели рядом <div class="row">, а если контента нету, тогда оберни это все дело в section и два бекграунда сделай через div, каждому задай какие нужно размеры и цвет фона, но обязательно это все в одном ряду .row

@Freeze_Breeze · 14.04.2018, 17:47

Я секции использую так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<section class="sectionTestimonials">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-4">
                <h3 class="testimonials">testimonials</h3>
            </div>
            <div class="offset-md-7"></div>
            <div class="col-md-1">
              <div class="quotes">
                <img src="image/other/quotes.png" alt="quotes">
              </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-11">
                <p class="testiText">Applicake chocolate cake wafer toffee pie souffle wafer. Tart marshmallow wafer macaroon cheesecake jelly. Gingerbread cookie souffle sweet roll sweet roll jelly-o.</p>
            </div>
            <div class="offset-lg-1"></div>
        </div>
        <div class="row">
            <div class="col-lg-2 col-md-3">
                <span class="walter">-Walter White</span>
            </div>
            <div class="offset-md-10"></div>
        </div>
    </div>
</section>

@Wanderer_K · 14.04.2018, 18:08 **[ТС]**

Я Вас плохо понимаю, мне этот фон сделать отдельным <div> 'ом при помощи абсолютного позиционирования?

HTML5
1
2
3
4
5
6
7
8
9
10
11
<header>
    <div class="container">
        <div class="row" style="position: relative;">
            <!-- Code -->
            <div class="fon" style="position: absolute; left: 0; width: 100vw; background-color: #4d4d4d"></div>
        </div>
        <div class="row">
            <!-- Code -->
        </div>
    </div>
</header>

@Freeze_Breeze · 14.04.2018, 18:45

Wanderer_K, песочница https://codepen.io/Freeze_Breeze/pen/YaoZvb

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 <header>
    <div class="container">
        <div class="row">
            <div class="col">
                <div class="number">
                    <p>+77778889944</p>
                </div>
            </div>
            <div class="col">
                <div class="search">
                    <h1>Search</h1>
                </div>
            </div>
        </div>
    </div>
 </header>
 
<section>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <div class="logo">
                    <h1>Shine glass</h1>
                    <p>магазин стекольного добра</p>
                </div>
            </div>
            <div class="col-md-8">
                <nav>
                    <ul>
                        <li><a href="#">Каталог</a></li>
                        <li><a href="#">Каталог</a></li>
                        <li><a href="#">Каталог</a></li>
                        <li><a href="#">Каталог</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</section>

CSS
1
2
3
4
header {
    width: 100%;
    background-color: #558899;
}

@Freeze_Breeze · 14.04.2018, 19:28

Wanderer_K, а теперь создайте новую тему с полным кодом, что бы это все выглядело красиво, а не разорвано на всю тему

Новые блоги и статьи Все статьи Все блоги /
Автоматическое создание документа при проведении другого документа Maks 29.03.2026 Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .	Настройка движения справочника по регистру сведений Maks 29.03.2026 Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .	Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .
Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .	Кому нужен AOT? DevAlt 26.03.2026 Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .	Отправка уведомления на почту при создании или изменении элементов справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной записи электронной. . .

@Wanderer_K 0 / 0 / 1 Регистрация: 07.03.2018 Сообщений: 17
	14.04.2018, 17:36 [ТС]
	Freeze_Breeze, дело в том, что каждая "секция в header" имеет свой фоновый цвет. Поэтому мне кажется, что в header 2-е секции 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	14.04.2018, 19:28
	Wanderer_K, а теперь создайте новую тему с полным кодом, что бы это все выглядело красиво, а не разорвано на всю тему 1