Создание сетки под текущим фоном - PullRequest
0 голосов
/ 11 июня 2018

Я не уверен, как добавить сетку под текущую фоновую картинку и продолжить добавление информации.Когда я пытаюсь добавить сетку сейчас, она просто создает ее под панелью навигации, а не под текущим фоном.

/**********BODY GENERAL**********/

body {
  margin: 0;
}


/* Fix this one day */

.bg-img {
  background: url('https://images.unsplash.com/photo-1508781015212-46d58946bb05?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=39b69f4b9e54ea449f90e3d714bf9215&auto=format&fit=crop&w=1951&q=80') no-repeat center center;
  background-size: cover;
  height: 100vh;
}

strong {
  font-weight: bold;
}


/*********NAVIGATION*********/

nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 1em;
  grid-auto-rows: auto;
  text-align: center;
  align-items: center;
  background: /*rgba(255, 51, 0, .95);
	*/
  z-index: 10;
}

@media screen and (max-width: 900px) {
  nav {
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-gap: 1em;
  }
}

.menu1 {
  grid-column: 1;
}

.menu2 {
  grid-column: 2;
}

.logo {
  grid-column: 3;
  font-family: 'Montserrat', sans-serif;
  font-weight: lighter;
  font-size: 28px;
  width: 500px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  height: 7vh;
  margin-bottom: 25px;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.menu3 {
  grid-column: 4;
}

.menu4 {
  grid-column: 5;
}


/**************HOVER ANIMATION**************/

div>a {
  font-family: 'Raleway';
  text-transform: uppercase;
  text-decoration: none;
  color: #000;
  position: relative;
  font-size: 0.8rem;
}

div>a:hover {
  color: #000;
}

div>a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: -4px;
  left: 0;
  background-color: #000;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

div>a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}


/**********MAIN HEADER***********/

header {
  color: white;
  justify-content: center;
  align-content: center;
  top: 0;
  bottom: 0;
  left: 0;
}


/**********BODY*****************/

.Minfo {
  color: red;
  width: 100%;
  padding-top: 100px;
  font-family: 'Montserrat', sans-serif;
  font-weight: lighter;
}

.subtitle {
  padding-left: 4em;
  padding-top: 29em;
  font-size: 100%;
  color: #fff;
}

.title {
  font-size: 3em;
  text-align: left;
  color: #FFF;
  padding-bottom: 0px;
}

.subtext {
  padding-top: 0px;
  color: #FFF;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Centennial It's Academic</title>
  <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
  <link href="main.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400" rel="stylesheet">
</head>

<body>
  <div class="bg-img">
    <header>
      <nav class="container">
        <div class="menu1">
          <a class="navLinks" href="#home">Home</a>
        </div>
        <div class="menu2">
          <a class="navLinks" href="#upcoming">Tournaments</a>
        </div>
        <div class="logo">
          <p>It's Academic</p>
        </div>
        <div class="menu3">
          <a class="navLinks" href="#history">History</a>
        </div>
        <div class="menu4">
          <a class="navLinks" href="#faq">Contact Info</a>
        </div>
      </nav>
      <!-- This cluster  of info -->
      <div class="Minfo">
        <div class="subtitle">CENTENNIAL
          <br>
          <div class="title"> It's Academic</div>
          <br>
          <div class="subtext">Meets every Tuesday in Room 506</div>
        </div>
      </div>

    </header>
    <!--Don't even -->

  </div>

</body>

</html>

codepen (Пожалуйста, откройте в режиме полной страницы):

Пример того, как я хотел бы, чтобы это выгляделокак на этом веб-сайте, где вся информация находится под этим фоном.

1 Ответ

0 голосов
/ 11 июня 2018

Я не уверен, что вы имеете в виду.На мой взгляд, есть 2 варианта:

  1. Нажмите сетку под изображением.В этом случае просто переместите тег header из .bg-img и поместите его после.https://codepen.io/moshfeu/pen/ERWVdZ
  2. Вы хотите эффект fixed (так же, как веб-сайт, который вы прикрепили).В этом случае вам нужно использовать position: fixed в заголовке.https://codepen.io/moshfeu/pen/aKJvXW

    Элемент удален из обычного потока документов, и для элемента в макете страницы не создано места.Он расположен относительно исходного содержащего блока, установленного в окне просмотраhttps://developer.mozilla.org/en-US/docs/Web/CSS/position

...