Как сделать вёрстку аккуратно?

@Masai · Регистрация: 13.07.2014

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

Добрый день, вот тренируюсь, понимаю, что это основы, но запутался блин. Всё разъехалось, одно наезжает на другое. Час сидел колупался во всяких relative-absolut, display, top и т.д.
Кстати в первом внутреннем диве шапки ещё 5 картинок-значков по середине вертикали, а во втором одна большая картинка почти на всю высоту (2-ого внутреннего дива).

HTML5
1
2
3
4
5
6
7
8
9
<div class="header">
    <div class="header1">
        ///
    </div>
 
 
    <div class="header2">
       ///
</div>

(Названия все эти пока от балды).
Затем я это подключаю на главную, или же ещё куда-то, а там само собой какие-то свои div идут и т.п.

@Splaisto · 22.06.2023, 14:06

две картинки не имеющие ничего общего и 3 дива. чего надо, чего не получается, в чем вопрос вообще?

@Masai · 30.06.2023, 12:32 **[ТС]**

Прошу прощения, что оформил не совсем верно. Ну и то что пропал, а тема висела.

Проблема в том, что после вот этой конструкции (Див - внутри два дива - внутри них картинки и т.п) - так называемой Шапки, идёт что-либо ещё (другие дивы, уже не относящиеся к шапке). И они заезжают на Шапку эту (эту конструкцию), а должны находится строго После (ниже).
Казалось бы вопрос глупый, просто путаница в том, что находясь внутри этой конструкции и делая все эти relative и absolute всё настраивается в рамках этой конструкции. Но тут выстраивается иерархия - эта конструкция в свою очередь находится внутри более глобальной конструкции - body, другие дивы. И вот тут уже непонятно как сделать всё чётко как вот на скриншоте. Я делаю relative для шапки, чтоб его внутренности имели absolute и выстраивались как надо, но чтоб шапка в свою очередь на более глобальном уровне чётко выстраивалась с другими дивами - вот тут уже каша какая-то.

Новые блоги и статьи Все статьи Все блоги /
Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .	Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .
Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .

@Splaisto 250 / 184 / 58 Регистрация: 12.03.2021 Сообщений: 1,043
	22.06.2023, 14:06
	две картинки не имеющие ничего общего и 3 дива. чего надо, чего не получается, в чем вопрос вообще? 0

@Masai 11 / 11 / 2 Регистрация: 13.07.2014 Сообщений: 420
	30.06.2023, 12:32 [ТС]
	Прошу прощения, что оформил не совсем верно. Ну и то что пропал, а тема висела. Проблема в том, что после вот этой конструкции (Див - внутри два дива - внутри них картинки и т.п) - так называемой Шапки, идёт что-либо ещё (другие дивы, уже не относящиеся к шапке). И они заезжают на Шапку эту (эту конструкцию), а должны находится строго После (ниже). Казалось бы вопрос глупый, просто путаница в том, что находясь внутри этой конструкции и делая все эти relative и absolute всё настраивается в рамках этой конструкции. Но тут выстраивается иерархия - эта конструкция в свою очередь находится внутри более глобальной конструкции - body, другие дивы. И вот тут уже непонятно как сделать всё чётко как вот на скриншоте. Я делаю relative для шапки, чтоб его внутренности имели absolute и выстраивались как надо, но чтоб шапка в свою очередь на более глобальном уровне чётко выстраивалась с другими дивами - вот тут уже каша какая-то. 0