Разместите nav над баннером CSS - PullRequest
Новая
       15

Разместите nav над баннером CSS

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

1 Я новичок в html и css, и мне не удается разместить панель навигации над баннером. Я хочу, чтобы панель навигации находилась прямо над изображением баннера. Может ли быть так, что класс inner-container, в который я его поместил, влияет на то, как я его позиционирую?

Так выглядит страница 

* {
    margin: 0;
    height: 100%;
}

body {
    width: 100%;
}

.img-container {
    background-image: url(restaurants.jpg);
    height: 80%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.inner-container {
    text-align: center;
    position: absolute;
    width: 100%;
    color: #f2f2f2;
    height: auto;
    margin-top: 200px;
}

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

ul li {
    float: left;
    width: 426px;
    height: 60px;
    background-color: black;
    opacity: .8;
    line-height: 50px;
    text-align: center;
    font-size: 25px;
}

ul li a {
    text-decoration: none;
    color: white;
    display: block;
}

ul li a:hover {
    background-color: red;
}

h1 {
    font-size: 6em;
    font-family: sans-serif;
}

h2 {
    margin-top: -17px;
    font-family: sans-serif;
    font-size: 1.7em;
    text-align: center;
    font-weight: 300;
}

a {
    margin-top: 0px;
    font-size: 1em;
    font-family: sans-serif;
}

@media only screen and (max-width: 920) {
    .inner-container {
        margin-top: 100px;
    }
}
<!DOCTYPE html>
<html>

<head>
  <title>All ABout The Buffalo</title>
  <link href="IntroBanner.css" rel="stylesheet" type="text/css">
</head>

<body>




  <div class="img-container">
    <div class="inner-container">



      <h1>All ABout The Buffalo</h1>
      <h2>Where Chicken Is Just The Tip of The Iceberg.</h2>
      <div class="menue">
        <ul>
          <li><a href="Intro.html" class="active">Home</a></li>
          <li><a href="Gallery.html">Gallery</a></li>
          <li><a href="Contact.html">Contact</a></li>
        </ul>
      </div>



    </div>

  </div>



  <p>Heeeeeyyyy</p>


</body>

</html>
...