изгиб в теле - PullRequest
Новая
       11

изгиб в теле

0 голосов
/ 17 мая 2018

Вот мой код, и у меня есть некоторые проблемы, потому что main идет под заголовком, и в моем мнении это не должно :) И я понятия не имею, почему main идет под заголовками, а не только один в столбце?И я понятия не имею, как это исправить?Я хочу сделать flexbox SPA.

Может кто-нибудь помочь, пожалуйста, посмотрите, что я делаю не так?Потому что я пытался решить это сам, но не мог сделать это.

Лучший

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
}


.main-header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    background: #0dfd8d;
    align-items: center;
    justify-content: space-around;
    flex-flow: row wrap;
}

.main-header__logo {
    text-decoration: none;
}

.main-header__logo img {
    height: 7rem;
    vertical-align: middle;
}

.main-header__items {
    list-style: none;
    margin: 0;
    display: flex;
    justify-content: flex-end;
}

.main-header__item {
    margin: 1rem;
}

.main-header__item a {
    text-decoration: none;
    color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="main-header">
        <div class="main-header__logo">
           <a href="#"><img src="logo.png" alt="logo"></a>
        </div>
        <nav class="main-header__nav">
            <ul class="main-header__items">
                <li class="main-header__item"><a href="#omnie">O Mnie</a></li>
                <li class="main-header__item"><a href="#przyklady">Przykładowe Teksty</a></li>
                <li class="main-header__item"><a href="#kontakt">Kontakt</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <div id="omnie">
            <img src="eagle.jpg" alt="">
            <p>Jestem orłem! W pisaniu artykułów! Dlatego jeżli szukasz specjalistki w dziedzinie pisania artykułów o tematyce
                zakładów bukmacherskich, typów bukmacherskich i kasyn online to nie musisz szukać dalej bo właśnie ją znalazłeś!
            </p>
        </div>
        <div id="przyklady">Przykładowy artykuł</div>
        <div id="Kontakt">
            <form class="form">
                <label for="name">Imie</label>
                <input id="name" type="text" placeholder="Podaj Imie">
                <label for="surname">Nazwisko</label>
                <input id="surname" type="text" placeholder="Podaj Nazwisko">
                <label for="email">Email</label>
                <input id="email" type="email" placeholder="Podaj Email">
                <label for="message">Wiadomość</label>
                <textarea rows="6" id="message" placeholder="Podaj Wiadomość"></textarea>
            </form>
        </div>
    </main>
    <footer>

    </footer>
</body>
</html>

1 Ответ

0 голосов
/ 17 мая 2018

потому что вы даете position: fixed; своему .main-header. вам нужно дать padding-top телу как рост вашего main-header.

Когда вы даете position: fixed элементу.

Элемент удален из обычного потока документов, и пробел не создан для элемента в макете страницы. Он расположен относительно к исходному содержащему блоку, установленному в окне просмотра 

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    padding-top: 51px;
}


.main-header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    background: #0dfd8d;
    align-items: center;
    justify-content: space-around;
    flex-flow: row wrap;
}

.main-header__logo {
    text-decoration: none;
}

.main-header__logo img {
    height: 7rem;
    vertical-align: middle;
}

.main-header__items {
    list-style: none;
    margin: 0;
    display: flex;
    justify-content: flex-end;
}

.main-header__item {
    margin: 1rem;
}

.main-header__item a {
    text-decoration: none;
    color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="main-header">
        <div class="main-header__logo">
           <a href="#"><img src="logo.png" alt="logo"></a>
        </div>
        <nav class="main-header__nav">
            <ul class="main-header__items">
                <li class="main-header__item"><a href="#omnie">O Mnie</a></li>
                <li class="main-header__item"><a href="#przyklady">Przykładowe Teksty</a></li>
                <li class="main-header__item"><a href="#kontakt">Kontakt</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <div id="omnie">
            <img src="eagle.jpg" alt="">
            <p>Jestem orłem! W pisaniu artykułów! Dlatego jeżli szukasz specjalistki w dziedzinie pisania artykułów o tematyce
                zakładów bukmacherskich, typów bukmacherskich i kasyn online to nie musisz szukać dalej bo właśnie ją znalazłeś!
            </p>
        </div>
        <div id="przyklady">Przykładowy artykuł</div>
        <div id="Kontakt">
            <form class="form">
                <label for="name">Imie</label>
                <input id="name" type="text" placeholder="Podaj Imie">
                <label for="surname">Nazwisko</label>
                <input id="surname" type="text" placeholder="Podaj Nazwisko">
                <label for="email">Email</label>
                <input id="email" type="email" placeholder="Podaj Email">
                <label for="message">Wiadomość</label>
                <textarea rows="6" id="message" placeholder="Podaj Wiadomość"></textarea>
            </form>
        </div>
    </main>
    <footer>

    </footer>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...