Проблема с перестановкой навигационной панели - PullRequest
Новая
       32

Проблема с перестановкой навигационной панели

0 голосов
/ 18 февраля 2019

Я создавал свой сайт и заметил, что моя навигационная панель с выпадающими списками была расположена намного ниже, чем я хотел.Я быстро попытался использовать несколько различных методов, таких как поля и отступы, position: fixed и position: absolute, и установил расстояние от вершины, но это в значительной степени удалило мои выпадающие списки.Мне любопытно узнать, почему это произошло, и что я могу сделать, чтобы исправить свой код. 

h1 {
	font-size: 54px;
	font-family: 'Kalam', cursive;
	margin: 10px;
	color: white;
}
body {
	background: url("flowers.jpg") no-repeat fixed;
}


.navbar {
    overflow: hidden;
    background-color: #333;
    font-family: 'Poiret One', cursive;
	background-color: rgba(249, 197, 249, 0.5);
	width: 100%;
}

.navbar a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 16px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
    background-color: rgb(249, 197, 249);
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: rgb(249, 197, 249);
}

.dropdown:hover .dropdown-content {
    display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="Japan.css">
<link href="https://fonts.googleapis.com/css?family=Kalam" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet"> 
<title>
Japan
</title>
</head>
<body>
<h1>Japan: Land of the Rising Sun</h1>
<div style="margin-top: 110px"class="navbar">
  <a href="">Intro</a>
  <a href="">WEIRD Facts</a>
<div class="dropdown">
<button class="dropbtn">Nature
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="Fauna.htm">Fauna</a>
<a href="Flora.htm">Flora</a>
<a href="Geography.htm">Geography</a>
</div>
</div>
  <div class="dropdown">
    <button class="dropbtn">Culture
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="Cuisine.html">Cuisine</a>
      <a href="Clothing.html">Clothing</a>
      <a href="Traditions.html">Traditions</a>
	  <a href="Sports.html">Sports</a>
	  <a href="Holidays.html">Holidays</a>
    </div>
  </div> 
</div>
</body>
</html>

Ответы [ 3 ]

0 голосов
/ 18 февраля 2019

Попробуйте добавить файл normalize.css или reset.css, который даст вам точку для запуска в каждом проекте с одинаковыми стилями в каждом браузере:

https://necolas.github.io/normalize.css/

0 голосов
/ 18 февраля 2019

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

документы по начальной загрузке

Я думаю, что HTML-код ниже - это то, что вы хотите сделать.(минус ваш стиль вне курса)

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

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

  <style>
    .bd-placeholder-img {
      font-size: 1.125rem;
      text-anchor: middle;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    
    @media (min-width: 768px) {
      .bd-placeholder-img-lg {
        font-size: 3.5rem;
      }
    }
  </style>
  <title>
    Japan
  </title>
</head>

<body>
  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Intro<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">WEIRD Facts<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Nature</a>
          <div class="dropdown-menu" aria-labelledby="dropdown01">
            <a class="dropdown-item" href="Fauna.htm">Fauna</a>
            <a class="dropdown-item" href="Flora.htm">Flora</a>
            <a class="dropdown-item" href="Geography.htm">Geography</a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Culture</a>
          <div class="dropdown-menu" aria-labelledby="dropdown01">
            <a class="dropdown-item" href="Cuisine.html">Cuisine</a>
            <a class="dropdown-item" href="Clothing.html">Clothing</a>
            <a class="dropdown-item" href="Traditions.html">Traditions</a>
            <a class="dropdown-item" href="Sports.html">Sports</a>
            <a class="dropdown-item" href="Holidays.html">Holidays</a>
          </div>
        </li>
      </ul>
    </div>
  </nav>

  <main role="main">
    <div class="jumbotron">
      <div class="container">
        <h1 class="d-flex align-items-stretch align-self-stretch">Japan: Land of the Rising Sun</h1>
        <p>


          Mauris egestas pretium mollis. Sed auctor, massa id feugiat bibendum, magna ante cursus erat, sit amet tristique neque lorem ac lacus. Sed sit amet eros et erat sagittis aliquam eget non tortor. In facilisis, ligula dictum feugiat volutpat, massa neque
          suscipit magna, eu blandit nulla leo sed nibh. In fermentum sem lacus, sit amet vulputate ex auctor sit amet. Nulla varius libero sit amet est luctus eleifend. Duis eu nibh et mi porta tempus et a libero. Maecenas dolor risus, ultricies sit
          amet eleifend a, venenatis et ipsum. Aenean purus tellus, pulvinar auctor lectus eu, sodales luctus elit. Suspendisse pharetra mattis justo, id bibendum sem aliquet a. Integer suscipit eu elit tincidunt tempor. Sed placerat rhoncus nisl, eget
          semper lectus feugiat eu. Vivamus eget felis sed est elementum ullamcorper quis sit amet orci. Praesent vel diam vel velit tempor varius. Nunc et mi eget purus egestas congue quis a tellus. Sed interdum sapien lectus, sed tincidunt dolor blandit
          a. Fusce lobortis tempus libero sed vestibulum. Donec fringilla lectus nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur a ex ut felis dictum commodo. Integer consectetur elit vitae mattis
          volutpat. Cras tincidunt ex id justo sodales commodo. Maecenas id accumsan orci. Morbi id nibh sit amet nibh rutrum elementum sed ac sem. Integer efficitur ac diam ac tempus. Sed in venenatis metus. Aliquam consectetur purus id enim dictum,
          sed tempor est iaculis. Suspendisse maximus libero id erat dictum blandit. Duis tincidunt maximus tortor, aliquet posuere quam faucibus vitae.
        </p>

      </div>
    </div>
  </main>
</body>
</html>
0 голосов
/ 18 февраля 2019

у вас есть интервал из-за нежелательного поля и тега h1 выше navbar

, поэтому вам нужно удалить поле из класса navbar и переместить h1 ниже navbar

см. демо ниже 

h1 {
	font-size: 54px;
	font-family: 'Kalam', cursive;
	margin: 10px;
	color: #333;
}
body {
	background: url("flowers.jpg") no-repeat fixed;
margin: 0;
}


.navbar {
    overflow: hidden;
    background-color: #333;
    font-family: 'Poiret One', cursive;
	background-color: rgba(249, 197, 249, 0.5);
	width: 100%;
}

.navbar a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 16px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
    background-color: rgb(249, 197, 249);
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: rgb(249, 197, 249);
}

.dropdown:hover .dropdown-content {
    display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="Japan.css">
<link href="https://fonts.googleapis.com/css?family=Kalam" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet"> 
<title>
Japan
</title>
</head>
<body>

<h1>Japan: Land of the Rising Sun</h1>

<div class="navbar">
  <a href="">Intro</a>
  <a href="">WEIRD Facts</a>
<div class="dropdown">
<button class="dropbtn">Nature
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="Fauna.htm">Fauna</a>
<a href="Flora.htm">Flora</a>
<a href="Geography.htm">Geography</a>
</div>
</div>
  <div class="dropdown">
    <button class="dropbtn">Culture
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="Cuisine.html">Cuisine</a>
      <a href="Clothing.html">Clothing</a>
      <a href="Traditions.html">Traditions</a>
	  <a href="Sports.html">Sports</a>
	  <a href="Holidays.html">Holidays</a>
    </div>
  </div> 
</div>



</body>
</html>
...