Почему наверху моей навигации есть пустое место? - PullRequest
Новая
       10

Почему наверху моей навигации есть пустое место?

0 голосов
/ 05 марта 2019

Почему в верхней части моей навигационной панели есть пробел?Новичок в этом и пытается выяснить, что я сделал неправильно ... Я знаю, когда я снимаю позицию, исправьте это сайты в верхней части страницы.

Может ли это быть дисплей: гибкий;что вызывает проблему?Заранее благодарю за ваши ответы.

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

html {
        margin: 0;
        padding: 0;
    }
    
    body {
        font-family: Helvetica, Arial, sans-serif;
        font-size: 22px;
        color: seashell;
        background-color: black;
        opacity: 0.9;
    }
    
    nav {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        border-bottom: 1px solid seashell;
        position: fixed;
        width: 100%;
        z-index: 10;
        background-color: black;
    }
    
    #logo img{
        height: 50px;
    }
    
    nav ul {
        list-style: none;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    
    nav ul li {
        text-decoration: underline;
        padding-right: 20px;
    }
    
    #mission-statement-body {
        position: relative;
        top: 100px;
        background-image: url("images/img-mission-background.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        height: 700px;
        width: 1200px;
        margin: 0 auto;
    }
    
    #mission-statement {
        text-align: center;
        background-color: black;
    }
<nav>
        <div id="logo">
            <img src="images/img-tea-cozy-logo.png" />
        </div>
        <ul>
            <li>Mission</li>
            <li>Featured Tea</li>
            <li>Locations</li>
        </ul>
    </nav>

    <div id="mission-statement-body">
        <div id="mission-statement">
            <h2>Our Mission</h2>
            <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
        </div>
    </div>

Ответы [ 3 ]

1 голос
/ 05 марта 2019

Свойству top задается определенное значение при использовании position: fixed, поэтому этого можно избежать, установив top в 0.

1 голос
/ 05 марта 2019

TL: DR - Просто установите top элемента с фиксированным позиционированием на 0, и он, в общем-то, будет «зафиксирован в верхней части экрана браузера».

Сначала попробуйте запустить ваш код в качестве примера, чтобы было проще ответить на ваш вопрос. Вы можете смоделировать результат с помощью Codepen (мой личный фаворит) или встроенного фрагмента кода из stackoverflow (я вижу, что вы знакомы с некоторыми инструментами, такими как выделение кода, следующим шагом будет симуляция кода, подобного * 1008). * Абед Путра сделал).

Я протестировал ваш код на CodePen и не мог понять, почему у него было это смещение, достаточно странно, когда я убрал #mission-statement-body, когда навигация вернулась наверх (браузеры справа).

Как правило, позиции типа «плавать вокруг моего браузера», такие как absolute и fixed, наследуют расположение от ближайшего relative родителя, но в вашем случае такого нет (поэтому он наследует от «бог знает что» ).

Таким образом, каждый раз, когда вы используете эти свойства позиционирования, пытайтесь установить конкретные позиции (например, top, left, bottom или right). Не полагайтесь на расположение браузера по умолчанию, потому что они всегда вас разочаруют, в Chrome это может выглядеть нормально, но в Firefox странно.

Нажмите, чтобы увидеть код на CodePen

Некоторые другие замечания о вашем коде:

  • Старайтесь не использовать id s для установки правил CSS по нескольким причинам, но в основном они предназначены для очень специфических селекторов (например, для обработки JS), и любой компонент CSS должен быть реплицируемым и расширяемым (у вас может быть 2 nav s, один фиксированный и один статический, а с id s вам придется дублировать код или делать некоторые обходные пути, не считающиеся лучшими практиками).
  • Старайтесь не использовать Helvetica, не только на большинстве компьютеров он не установлен, но они сильно отличаются от вашего дополнительного (Arial), а длина слов может быть проблемой, которую вы не увидите при разработке, как навигация, когда ломаются линии или кнопки, которые становятся большими в Helvetica, но не в Arial. (также Helvetica - платный шрифт, если вы действительно пытаетесь его использовать, вам придется его купить)
  • Я думаю, что было бы лучше использовать margin или padding на relative позиционированных элементах, а не top интервал, используемый в #mission-statement-body. Кроме того, с ними вам не нужно устанавливать position

Надеюсь, это помогло

0 голосов
/ 05 марта 2019

вы пробовали это? 

nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px solid seashell;
  position: fixed;
  width: 100%;
  z-index: 10;
  background-color: black;
  top:0;
}

Пожалуйста, проверьте это ... 

   html {
    margin: 0;
    padding: 0;
}

body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 22px;
    color: seashell;
    background-color: black;
    opacity: 0.9;
}

nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px solid seashell;
  position: fixed;
  width: 100%;
  z-index: 10;
  background-color: black;
  top:0;
}

#logo img{
    height: 50px;
}

nav ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    align-items: center;
}

nav ul li {
    text-decoration: underline;
    padding-right: 20px;
}

#mission-statement-body {
    position: relative;
    top: 100px;
    background-image: url("images/img-mission-background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 700px;
    width: 1200px;
    margin: 0 auto;
}

#mission-statement {
    text-align: center;
    background-color: black;
}
<nav>
        <div id="logo">
            <img src="images/img-tea-cozy-logo.png" />
        </div>
        <ul>
            <li>Mission</li>
            <li>Featured Tea</li>
            <li>Locations</li>
        </ul>
    </nav>

    <div id="mission-statement-body">
        <div id="mission-statement">
            <h2>Our Mission</h2>
            <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
        </div>
    </div>
...