• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Logo img przemieszcza się nie osobno, ale z navbarem

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
127 wizyt
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

0 głosów
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.

0 głosów
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.

Podobne pytania

0 głosów
1 odpowiedź 512 wizyt
pytanie zadane 2 listopada 2018 w HTML i CSS przez Q7V Gaduła (4,250 p.)
0 głosów
1 odpowiedź 97 wizyt
pytanie zadane 27 czerwca 2016 w HTML i CSS przez mopatowicz Użytkownik (560 p.)
0 głosów
2 odpowiedzi 332 wizyt

93,108 zapytań

142,085 odpowiedzi

321,607 komentarzy

62,449 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...