Почему панель навигации для моего веб-сайта застряла в середине страницы?

ProgramBox

Почему панель навигации для моего веб-сайта застряла в середине страницы?

Post author:admin
Запись опубликована:8 апреля, 2023
Post category:Вопросы по программированию

#html #css #web

#HTML #css #веб

Вопрос:

Итак, на моем веб-сайте есть разные страницы для просмотра, а на домашней странице все в порядке. В настоящее время я добавляю эту страницу, и как только я добавил всплывающие карточки, моя панель навигации по какой-то причине переместилась в середину экрана. Я совершенно новичок в кодировании, поэтому извините, если это легко исправить. Буду признателен за любую помощь.

Вот пример:

 .container {
    display: grid;
    grid-template-columns: 1fr;
}

/* Nav Styles */
.nav-wrapper {
    display: flex;
    justify-content: space-between;
    padding: 38px;
}

.left-side {
    display: flex;
}

.nav-wrapper > .left-side > div {
    margin-right: 20px;
    font-size: 0.9m;
    text-transform:uppercase;
}

.nav-link-wrapper {
    height: 22px;
    border-bottom: 1px solid transparent;
    transition: border-bottom 0.5s;
}

.nav-link-wrapper a {
    color: #8a8a8a;
    text-decoration: none;
    transition: color 0.5s;
}

.nav-link-wrapper:hover {
    border-bottom: 1px solid black;
}

.nav-link-wrapper a:hover {
    color: black;
}

.active-nav-link {
    border-bottom: 1px solid black;
}

.active-nav-link a{
    color: black;
}

/* Cards */
body {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:url();
    overflow: hidden;
  }
  .card {
    display: grid;
    grid-template-columns: 300px;
    grid-template-rows: 210px 210px 80px;
    grid-template-areas: "image" "text" "stats";
  
    border-radius: 18px;
    background: white;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.9);
    font-family: roboto;
    text-align: center;
    
  
    transition: 0.5s ease;
    cursor: pointer;
    margin:30px;
  }
  .card-image {
    grid-area: image;
    background: url("images/princeton1.png");
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-size: cover;
  }
  
  .card-text {
    grid-area: text;
    margin: 25px;
  }
  .card-text .date {
    color: rgb(255, 7, 110);
    font-size:13px;
  }
  .card-text p {
    color: grey;
    font-size:15px;
    font-weight: 300;
  }
  .card-text h2 {
    margin-top:0px;
    font-size:28px;
  }
  .card-stats {
    grid-area: stats; 
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    background: rgb(255, 7, 110);
  }
  .card-stats .stat {
    padding:10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white;
  }
  .card-stats .border {
    border-left: 1px solid rgb(172, 26, 87);
    border-right: 1px solid rgb(172, 26, 87);
  }
  .card-stats .value{
    font-size:22px;
    font-weight: 500;
  }
  .card-stats .value sup{
    font-size:12px;
  }
  .card-stats .type{
    font-size:11px;
    font-weight: 300;
    text-transform: uppercase;
  }
  .card:hover {
    transform: scale(1.15);
    box-shadow: 5px 5px 15px rgba(0,0,0,0.6);
  }
  
  /*card2*/
  .card-image.card2 {
    background: url("img2.jpg");
    background-size: cover;
  }
  .card-text.card2 .date {
    color: rgb(255, 77, 7);
  }
  .card-stats.card2 .border {
    border-left: 1px solid rgb(185, 67, 20);
    border-right: 1px solid rgb(185, 67, 20);
  }
  .card-stats.card2 {
    background: rgb(255, 77, 7);
  }
  /*card3*/
  .card-image.card3 {
    background: url("img3.jpg");
    background-size: cover;
  }
  .card-text.card3 .date {
    color: rgb(0, 189, 63);
  }
  .card-stats.card3 .border {
    border-left: 1px solid rgb(14, 122, 50);
    border-right: 1px solid rgb(14, 122, 50);
  }
  .card-stats.card3 {
    background: rgb(0, 189, 63);
  }

 <div class="container">
        <div class="nav-wrapper">
            <div class="left-side">
                <div class="nav-link-wrapper">
                    <a href="index.html">Data Sets</a>
                </div>
                <div class="nav-link-wrapper">
                    <a href="compare.html">Compare</a>
                </div>
            </div>

            <div class="right-side">
                <div class="brand">
                    <div>A2C Common Data Sets</div>
                </div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-image"></div>
        <div class="card-text">
          <span class="date">top</span>
          <h2>One</h2>
          <p>body</p>
        </div>
        <div class="card-stats">
          <div class="stat">
            <div class="value">4<sup>m</sup></div>
            <div class="type">#</div>
          </div>
          <div class="stat border">
            <div class="value">5123</div>
            <div class="type">#</div>
          </div>
          <div class="stat">
            <div class="value">32</div>
            <div class="type">#</div>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-image card2"></div>
        <div class="card-text card2">
          <span class="date">top</span>
          <h2>Two</h2>
          <p>body</p>
        </div>
        <div class="card-stats card2">
          <div class="stat">
            <div class="value">7<sup>m</sup></div>
            <div class="type">#</div>
          </div>
          <div class="stat border">
            <div class="value">7152</div>
            <div class="type">#</div>
          </div>
          <div class="stat">
            <div class="value">21</div>
            <div class="type">#</div>
          </div>
        </div>
      </div>
      <div class="card">
          <div class="card-image card3"></div>
          <div class="card-text card3">
            <span class="date">top</span>
            <h2>Three</h2>
            <p>body</p>
          </div>
          <div class="card-stats card3">
            <div class="stat">
              <div class="value">5<sup>m</sup></div>
              <div class="type">#</div>
            </div>
            <div class="stat border">
              <div class="value">3021</div>
              <div class="type">#</div>
            </div>
            <div class="stat">
              <div clashttps://stackoverflow.com/posts/63625721/edit#s="value">15</div>
              <div class="type">#</div>
            </div>
          </div>
        </div>

Ответ №1:

Добро пожаловать в Stackoverflow,

Ну, вы почти на месте, позвольте мне немного переписать ваш код;

 .container {
    display: grid;
    grid-template-columns: 1fr;
}

/* Nav Styles */
.nav-wrapper {
    display: flex;
    justify-content: space-between;
    padding: 38px;
}

.left-side {
    display: flex;
}

.nav-wrapper > .left-side > div {
    margin-right: 20px;
    font-size: 0.9m;
    text-transform:uppercase;
}

.nav-link-wrapper {
    height: 22px;
    border-bottom: 1px solid transparent;
    transition: border-bottom 0.5s;
}

.nav-link-wrapper a {
    color: #8a8a8a;
    text-decoration: none;
    transition: color 0.5s;
}

.nav-link-wrapper:hover {
    border-bottom: 1px solid black;
}

.nav-link-wrapper a:hover {
    color: black;
}

.active-nav-link {
    border-bottom: 1px solid black;
}

.active-nav-link a{
    color: black;
}

/* Cards */
body {
    background:url();
  }
  .flex {
  display: flex;
  }
  .card {
    display: grid;
    grid-template-columns: 300px;
    grid-template-rows: 210px 210px 80px;
    grid-template-areas: "image" "text" "stats";
  
    border-radius: 18px;
    background: white;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.9);
    font-family: roboto;
    text-align: center;
    
  
    transition: 0.5s ease;
    cursor: pointer;
    margin:30px;
  }
  .card-image {
    grid-area: image;
    background: url("images/princeton1.png");
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-size: cover;
  }
  
  .card-text {
    grid-area: text;
    margin: 25px;
  }
  .card-text .date {
    color: rgb(255, 7, 110);
    font-size:13px;
  }
  .card-text p {
    color: grey;
    font-size:15px;
    font-weight: 300;
  }
  .card-text h2 {
    margin-top:0px;
    font-size:28px;
  }
  .card-stats {
    grid-area: stats; 
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    background: rgb(255, 7, 110);
  }
  .card-stats .stat {
    padding:10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white;
  }
  .card-stats .border {
    border-left: 1px solid rgb(172, 26, 87);
    border-right: 1px solid rgb(172, 26, 87);
  }
  .card-stats .value{
    font-size:22px;
    font-weight: 500;
  }
  .card-stats .value sup{
    font-size:12px;
  }
  .card-stats .type{
    font-size:11px;
    font-weight: 300;
    text-transform: uppercase;
  }
  .card:hover {
    transform: scale(1.15);
    box-shadow: 5px 5px 15px rgba(0,0,0,0.6);
  }
  
  /*card2*/
  .card-image.card2 {
    background: url("img2.jpg");
    background-size: cover;
  }
  .card-text.card2 .date {
    color: rgb(255, 77, 7);
  }
  .card-stats.card2 .border {
    border-left: 1px solid rgb(185, 67, 20);
    border-right: 1px solid rgb(185, 67, 20);
  }
  .card-stats.card2 {
    background: rgb(255, 77, 7);
  }
  /*card3*/
  .card-image.card3 {
    background: url("img3.jpg");
    background-size: cover;
  }
  .card-text.card3 .date {
    color: rgb(0, 189, 63);
  }
  .card-stats.card3 .border {
    border-left: 1px solid rgb(14, 122, 50);
    border-right: 1px solid rgb(14, 122, 50);
  }
  .card-stats.card3 {
    background: rgb(0, 189, 63);
  }

 <div class="container">
        <div class="nav-wrapper">
            <div class="left-side">
                <div class="nav-link-wrapper">
                    <a href="index.html">Data Sets</a>
                </div>
                <div class="nav-link-wrapper">
                    <a href="compare.html">Compare</a>
                </div>
            </div>

            <div class="right-side">
                <div class="brand">
                    <div>A2C Common Data Sets</div>
                </div>
            </div>
        </div>
    </div>
    <div class="flex">
    <div class="card">
        <div class="card-image"></div>
        <div class="card-text">
          <span class="date">top</span>
          <h2>One</h2>
          <p>body</p>
        </div>
        <div class="card-stats">
          <div class="stat">
            <div class="value">4<sup>m</sup></div>
            <div class="type">#</div>
          </div>
          <div class="stat border">
            <div class="value">5123</div>
            <div class="type">#</div>
          </div>
          <div class="stat">
            <div class="value">32</div>
            <div class="type">#</div>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-image card2"></div>
        <div class="card-text card2">
          <span class="date">top</span>
          <h2>Two</h2>
          <p>body</p>
        </div>
        <div class="card-stats card2">
          <div class="stat">
            <div class="value">7<sup>m</sup></div>
            <div class="type">#</div>
          </div>
          <div class="stat border">
            <div class="value">7152</div>
            <div class="type">#</div>
          </div>
          <div class="stat">
            <div class="value">21</div>
            <div class="type">#</div>
          </div>
        </div>
      </div>
      <div class="card">
          <div class="card-image card3"></div>
          <div class="card-text card3">
            <span class="date">top</span>
            <h2>Three</h2>
            <p>body</p>
          </div>
          <div class="card-stats card3">
            <div class="stat">
              <div class="value">5<sup>m</sup></div>
              <div class="type">#</div>
            </div>
            <div class="stat border">
              <div class="value">3021</div>
              <div class="type">#</div>
            </div>
            <div class="stat">
              <div class="value">15</div>
              <div class="type">#</div>
            </div>
          </div>
        </div>
</div>

Что я сделал: я удалил все значения css в теле, вы не должны использовать их там вместо фонового URL. Второй — это упаковка ваших карточек в div, который называется class flex. И в css я добавил .flex и присвоил этому значение display:flex, чтобы ваши карточки снова отображались правильным образом.

Дайте мне знать, если это то, что вы ищете, иначе я немного изменю это.

1. Да, большое вам спасибо, это именно то, что я искал! Последние два часа я потратил на то, чтобы разобраться в этом, и вы принесли мне такое облегчение. Хорошего дня!

2. Убедитесь, что если мой ответ правильный, установите флажок на зеленый и также повысьте его. Моя репутация от этого вырастет :). Рад, что это сработало, кстати. Счастливого кодирования 😉

Ответ №2:

Пытались удалить «justify-content: пробел между;»?

Ответ №3:

Извините, что это заняло время. Я проверил это на мобильном макете в браузере safari webkit.

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Harvard</title>
    <link href="https://fonts.googleapis.com/css2?family=Oswaldamp;display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles1.css">
<style>
body {
    width: 100vw;
    height: 100vh;
    padding: 0;
    margin: 0;
    display: block;
    position: relative;
    box-sizing: border-box;
  }
.container {
width: 100vw;
height: 100vh;
display: block;
position: relative;
overflow: hidden;
overflow: scroll;
}
.wrapper {
width: 1200px;
padding: auto;
padding-top: 9vh;
display: flex;
flex-direction: row;
position: relative;
justify-content: center;
box-shadow: inset 0 0 5px red;
}
/* BOX-SHADOW is only for layout guide */
.nav-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 5vh;
    position: absolute;
    top: 0px;
    left: 0;
    box-shadow: inset 0 0 5px purple;
}

.right-side, .left-side {
    display: flex;
    justify-content: space-around;
    width: 186px;
    box-shadow: inset 0 0 5px green;
}

.nav-wrapper > .left-side > div {
    font-size: 0.9m;
    text-transform:uppercase;
}

.nav-link-wrapper {
    height: 22px;
    border-bottom: 1px solid transparent;
    transition: border-bottom 0.5s;
}

.nav-link-wrapper a {
    color: #8a8a8a;
    text-decoration: none;
    transition: color 0.5s;
}

.nav-link-wrapper:hover {
    border-bottom: 1px solid black;
}

.nav-link-wrapper a:hover {
    color: black;
}

.active-nav-link {
    border-bottom: 1px solid black;
}

.active-nav-link a{
    color: black;
}


.card {
    display: grid;
    grid-template-columns: 300px;
    grid-template-rows: 210px 210px 80px;
    grid-template-areas: "image" "text" "stats";
  
    border-radius: 18px;
    background: white;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.9);
    font-family: roboto;
    text-align: center;
    
  
    transition: 0.5s ease;
    cursor: pointer;
    margin:30px;
  }
  .card-image {
    grid-area: image;
    background: url("images/princeton1.png");
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-size: cover;
  }
  
  .card-text {
    grid-area: text;
    margin: 25px;
  }
  .card-text .date {
    color: rgb(255, 7, 110);
    font-size:13px;
  }
  .card-text p {
    color: grey;
    font-size:15px;
    font-weight: 300;
  }
  .card-text h2 {
    margin-top:0px;
    font-size:28px;
  }
  .card-stats {
    grid-area: stats; 
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    background: rgb(255, 7, 110);
  }
  .card-stats .stat {
    padding:10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white;
  }
  .card-stats .border {
    border-left: 1px solid rgb(172, 26, 87);
    border-right: 1px solid rgb(172, 26, 87);
  }
  .card-stats .value{
    font-size:22px;
    font-weight: 500;
  }
  .card-stats .value sup{
    font-size:12px;
  }
  .card-stats .type{
    font-size:11px;
    font-weight: 300;
    text-transform: uppercase;
  }
  .card:hover {
    transform: scale(1.15);
    box-shadow: 5px 5px 15px rgba(0,0,0,0.6);
  }
  
  /*card2*/
  .card-image.card2 {
    background: url("img2.jpg");
    background-size: cover;
  }
  .card-text.card2 .date {
    color: rgb(255, 77, 7);
  }
  .card-stats.card2 .border {
    border-left: 1px solid rgb(185, 67, 20);
    border-right: 1px solid rgb(185, 67, 20);
  }
  .card-stats.card2 {
    background: rgb(255, 77, 7);
  }
  /*card3*/
  .card-image.card3 {
    background: url("img3.jpg");
    background-size: cover;
  }
  .card-text.card3 .date {
    color: rgb(0, 189, 63);
  }
  .card-stats.card3 .border {
    border-left: 1px solid rgb(14, 122, 50);
    border-right: 1px solid rgb(14, 122, 50);
  }
  .card-stats.card3 {
    background: rgb(0, 189, 63);
  }
</style>
</head>
<body>

<span class="container">
<span class="wrapper">


        <div class="nav-wrapper">
            <div class="left-side">
                <div class="nav-link-wrapper">
                    <a href="index.html">Data Sets</a>
                </div>
                <div class="nav-link-wrapper">
                    <a href="compare.html">Compare</a>
                </div>
            </div>
            <div class="right-side">
                <div class="brand">
                    <div>A2C Common Data Sets</div>
                </div>
            </div>
        </div>

<div class="card"><!--card-->
        <div class="card-image"></div>
        <div class="card-text">
          <span class="date">top</span>
          <h2>One</h2>
          <p>body</p>
        </div>
        <div class="card-stats">
          <div class="stat">
            <div class="value">4<sup>m</sup></div>
            <div class="type">#</div>
          </div>
          <div class="stat border">
            <div class="value">5123</div>
            <div class="type">#</div>
          </div>
          <div class="stat">
            <div class="value">32</div>
            <div class="type">#</div>
          </div>
        </div>
      </div><!--card-->
      <div class="card"><!--card-->
        <div class="card-image card2"></div>
        <div class="card-text card2">
          <span class="date">top</span>
          <h2>Two</h2>
          <p>body</p>
        </div>
        <div class="card-stats card2">
          <div class="stat">
            <div class="value">7<sup>m</sup></div>
            <div class="type">#</div>
          </div>
          <div class="stat border">
            <div class="value">7152</div>
            <div class="type">#</div>
          </div>
          <div class="stat">
            <div class="value">21</div>
            <div class="type">#</div>
          </div>
        </div>
      </div><!--card-->
      <div class="card"><!--card-->
          <div class="card-image card3"></div>
          <div class="card-text card3">
            <span class="date">top</span>
            <h2>Three</h2>
            <p>body</p>
          </div>
          <div class="card-stats card3">
            <div class="stat">
              <div class="value">5<sup>m</sup></div>
              <div class="type">#</div>
            </div>
            <div class="stat border">
              <div class="value">3021</div>
              <div class="type">#</div>
            </div>
            <div class="stat">
              <div class="value">15</div>
              <div class="type">#</div>
            </div>
          </div>
        </div><!--card-->
</span>
</span>
</body>
</html>