Logo img przemieszcza się nie osobno, ale z navbarem

pytanie zadane 7 maja 2020 w HTML i CSS przez Mateusz450 Początkujący (380 p.)

Witam, zrobiłem menu z zakładkami na samej górze strony. Na nav zrobiłem logo img lecz, jeżeli chcę przesunąć np: margin-top to margines z .logo odbija razem z navbarem. Jak zrobić by każdy stworzony div nakładał się na drugi i swobodnie można nim było manewrować bez naruszania elementu pod nim ?

.logo {
    display: flex;
    margin-top: 20px;
    width: 20%;

}

nav {

    background: orange;
    height: 100px;



}

nav li {

    list-style-type: none;
    display: inline-block;
    position: relative;
    left: 30%;
    margin-top: 40px;
}

nav a {

    text-decoration: none;
    color: black;
    font-size: 20px;
    font-family: exo;


}


nav ul {

    margin-top: -75px;

2 odpowiedzi

odpowiedź 7 maja 2020 przez frostify Mądrala (5,640 p.)
wybrane 11 maja 2020 przez Mateusz450

Najlepsza

Z twojej opowieści bez podawania pełnego kody żródłowego, z tego co zrozumiałem, mogę jedynie polecić:

position: absolute.

komentarz 7 maja 2020 przez Mateusz450 Początkujący (380 p.)

html {}


body {
    padding: 0;
    margin: 0;

    background: gray;
}


.logo {
    display: flex;
    margin-top: 20px;
    width: 20%;

}

nav {

    background: orange;
    height: 100px;



}

nav li {

    list-style-type: none;
    display: inline-block;
    position: relative;
    left: 30%;
    margin-top: 40px;
}

nav a {

    text-decoration: none;
    color: black;
    font-size: 20px;
    font-family: exo;


}


nav ul {

    margin-top: -75px;


}

li:after {

    content: " ";
    display: block;
    width: 100%;
    height: 3px;
    background: transparent;
    position: absolute;
    bottom: -2px;
    left: 0;

}

li:hover:after {
    background: #00994d;
}

<!DOCTYPE HTML>
<html lang="pl">

<head>
    <!-- kodowanie znaków, możemy używać polskich znaków -->
    <meta charset="utf-8" />
    <!-- sposób wyświetlania na urządzeniach mobilnych -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- tytuł stron. m.in. w wynikach wyszukiwania -->
    <title> RIO GRAPPLING CLUB</title>
    <!-- importujemy czcionkę, żeby jej użyć -->
    <!-- Czcionka Baloo Bhaina2 -->
    <link href="https://fonts.googleapis.com/css2?family=Exo:wght@400;500&family=Teko&family=Ubuntu&display=swap" rel="stylesheet">
    <!-- ikonka strony -->
    <link rel="icon" href="favicon.png">
    <link rel="shortcut icon" href="favicon.png" type="image/x-icon">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>



    <!-- GÓRA -->
    <header>



        <div class="logo">
            <img src="img/logo.png" alt="logo">

            <nav class="nav">

                <ul>
                    <li><a class="STRONAGLOWNA" href="#">STRONA GŁÓWNA</a></li>
                    <li><a class="AKTUALNOSCI" href="#">AKTUALNOŚCI</a></li>
                    <li><a class="TRENER" href="#">TRENER</a></li>
                    <li><a class="HISTORIABJJ" href="#">HISTORIA BJJ</a></li>
                    <li><a class="MMA" href="#">MMA</a></li>
                    <li><a class="PYTANIA-FAQ" href="#">PYTANIA-FAQ</a></li>
                    <li><a class="KONTAKT" href="#">KONTAKT</a></li>
                </ul>
            </nav>
        </div>
    </header>

</body>

</html>

komentarz 9 maja 2020 przez frostify Mądrala (5,640 p.)

Zapomniałeś zamknąć div o klasie logo, i cały nav znajdował się w divie o klasie logo.

https://codepen.io/frostify/pen/qBOozGX

Czy już jest dobrze?

Bo ciężko zrozumieć o co ci tak dokładnie chodzi z twojej wypowiedzi.

odpowiedź 7 maja 2020 przez radek024 Szeryf (77,160 p.)

Przede wszystkim, zainteresuj się CSS Specificity. Pisałem o tym - ot link: https://radek024.github.io/blog/bykiwkodzie/css/strony-www/2020/01/03/css-specificity/. Stylizujesz na bardzo szeroką skalę - w istocie są to wszystkie elementy o danych tagach na stronie.

Po drugie, nie skopiowałeś całego CSSa. HTML też by się przydał, ponieważ wtedy łatwiej wrzucić taki kod na żywo i zobaczyć co to dokładnie za problem.