Проблемы с позиционированием HTML панели навигации - PullRequest
Новая
       45

Проблемы с позиционированием HTML панели навигации

1 голос
/ 04 августа 2020

Я новичок в веб-разработке, и пока я делаю навигационную панель, позиционирование отключено. Это - картина того, что происходит. Правая сторона навигационной панели, влекущая за собой ссылки / другие страницы, уходит вниз, но когда я уменьшаю правую часть lo go, они go возвращаются. Я не уверен, что происходит. Мой код выглядит следующим образом:

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Speech and Debate</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<!-- inline css styling to reset margins/padding -->
<body style="margin: 0; padding: 0">
<header style="width: 100%; height: 10vh; background: #002654; top: 2.5vh">
    <div id="green-strip"></div>
    <div class="container">
        <img src="../img/sd-logo.png" alt="logo" class="logo" width="300vw">

        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Debate</a></li>
                <li><a href="#">Speech</a></li>
                <li><a href="#">Schedule</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>

    </div>
</header>
</body>

</html>

CSS

#green-strip{
    width: 100%; height: 2.5vh;
    border-style: solid;
    border-color: #026f4d;
    background-color: #026f4d;
}

// nav bar container
.container {
    width: 100%;
    margin: 0 auto;
}

// nav bar background
// header {
//    width: 100%; height: 10vh;
//    background: #002654;
//    top: 2.5vh;
//}

// prevents container from shrinking after nav bar elements float
header::after {
    content: '';
    display: table;
    clear: both;
}

.logo {
    text-align: left;
}

nav {
    text-align: right;
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li {
    display: inline-block;
    margin-left: 2vw;
    margin-right: 2vw;

    position: relative;
}

nav ul li a {
    font-family: 'Work Sans', sans-serif;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0.05vw;
    font-smooth: 2em;
    font-size: 13px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
}

nav a:hover {
    color: #b6b8b6;
}

nav a::before {
    content: '';
    display: block;
    height: 0.35vh;
    width: 100%;
    background-color: #fff;

    position: absolute;
    top: -2vh;
    width: 0%;

    transition: all ease-in-out 250ms;
}

nav a:hover::before {
    width: 100%;
}

Спасибо очень нравится.

Ответы [ 2 ]

0 голосов
/ 04 августа 2020

Вы можете обеспечить выравнивание содержимого внутри навигации по центру, установив отображение гибкости, как сказал @somedev. 

#green-strip{
    width: 100%; height: 2.5vh;
    border-style: solid;
    border-color: #026f4d;
    background-color: #026f4d;
}

// nav bar container
.container {
    width: 100%;
    margin: 0 auto;
}

// nav bar background
// header {
//    width: 100%; height: 10vh;
//    background: #002654;
//    top: 2.5vh;
//}

// prevents container from shrinking after nav bar elements float
header::after {
    content: '';
    display: table;
    clear: both;
}

.logo {
    text-align: left;
}

nav {
    display: flex;
    text-align: right;
    justify-content: center;
}

nav img{
  position: absolute;
  left: 0;
}

nav ul {
    position: absolute;
    margin: 0;
    padding: 0;
    list-style: none;
    right: 0;
}

nav li {
    display: inline-block;
    margin-left: 2vw;
    margin-right: 2vw;

    position: relative;
}

nav ul li a {
    font-family: 'Work Sans', sans-serif;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0.05vw;
    font-smooth: 2em;
    font-size: 13px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
}

nav a:hover {
    color: #b6b8b6;
}

nav a::before {
    content: '';
    display: block;
    height: 0.35vh;
    width: 100%;
    background-color: #fff;

    position: absolute;
    top: -2vh;
    width: 0%;

    transition: all ease-in-out 250ms;
}

nav a:hover::before {
    width: 100%;
}
<!-- inline css styling to reset margins/padding -->
<body style="margin: 0; padding: 0">
<header style="width: 100%; height: 10vh; background: #002654; top: 2.5vh">
    <div id="green-strip"></div>
    <div class="container">
        <nav>
          <img src="../img/sd-logo.png" alt="logo" class="logo" width="300vw">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Debate</a></li>
                <li><a href="#">Speech</a></li>
                <li><a href="#">Schedule</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>

    </div>
</header>
0 голосов
/ 04 августа 2020

Это потому, что ваш элемент lo go имеет неправильную позицию. Попробуйте добавить это: 

.logo {
  text-align: left;
  position: absolute;
}

"position: absolute;" означает, что ваш lo go будет игнорироваться другими элементами и всегда будет там, где вы хотите, чтобы он был

Также при разработке страницы всегда рекомендуется удалить поля и отступы в очень начало файла css, например: 

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