Układanie elementów bezpośrednio jeden po drugim

0

Witam!
Mam problem podczas tworzenia swojej strony.

Zdjęcie poglądowe : https://imgur.com/a/OuWuA

Na zdjęciu widać 3 elementy o które mi chodzi : czarne tło, niżej jest cienka różowa kreska, a jeszcze niżej turkusowe tło. Jak mogę ustawić, aby czarne tło kończyło się po zetknięciu z kreską, a turkusowe tło rozpoczynało się od dolnej granicy kreski. Robiłem początkowo poprzez @media (orientation: X) @media (max-width: X) ale dopasowywanie do każdej rozdzielczości ekranu zajmuje zbyt dużo czasu. Jest jakaś alternatywa, żeby dopasować te 3 elementy do siebie?

Tak wyglądają elementy z którymi mam problem :
(chodzi o background, liniert i main_theme)

<body background="bg1.png">
        <div id="top_menu" align center>
            <nav class="menu"><i class="fa fa-bars" aria-hidden="true"></i></nav>
        </div>
        <img class="logo" src="Gothic3logo.png"/>
        <div id="arrow"><i class="fa fa-caret-down" aria-hidden="true"></i></div>
        <div id="liniert"></div>
        <div id="main_theme"></div>
</body>

body {
    background-size: auto;
    background-repeat: no-repeat;
    position: static;
}

@media (orientation: portrait) {
    background {
        image-resolution: auto;
    }  
} 

#liniert {
    background-color: salmon;
    position: absolute;
    width: 100%;
    height: 10px;
    bottom: 0;
}

#main_theme {
    position: absolute;
    height: 500px;
    width: 100%;
    background-color:aqua;
}

Jak mogę rozwiązać problem? Gdzie zrobiłem błąd lub co muszę dopisać do kodu, żeby czarne tło kończyło się po zetknięciu z górną granicą kreski, a turkusowe tło rozpoczynało się od dolnej granicy kreski?

0

A nie możesz po prostu usunąć position: absolute;? Domyślnie przecież elementy układają się jeden po drugim w HTMLu.

0

Albo nadać border dolny na kontener. Chyba, że da kreska spełnia jakąś niesamowicie ważną rolę..

0

Przepraszam, że nie odpowiadałem, jednak byłem na wyjeździe i nie miałem dostępu do internetu. Wracając do tematu to tak - ta niepozorna kreska spełnia na tej stronie ważną rolę i nie mogę jej tak po prostu skasować. A jak usunę position: absolute; to kreska schowa się pod menu na samej górze które jest przyklejone do góry ekranu, a turkusowe tło nałożyłoby się na to czarne. Czy jeśli zamiast backgrounda wstawiłbym zdjęcie w divie i usunął w obu position: absolute; to czy rozwiązałoby to mój problem?

1 użytkowników online, w tym zalogowanych: 0, gości: 1