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

@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, а теперь создайте новую тему с полным кодом, что бы это все выглядело красиво, а не разорвано на всю тему

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .

@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