отсутствует часть моего меню, а иногда и большая часть моего меню - PullRequest
Новая
       5

отсутствует часть моего меню, а иногда и большая часть моего меню

0 голосов
/ 09 января 2020

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

https://imgur.com/user/NoahVP241

если бы кто-то мог помочь мне решить эти 2 проблемы, это было бы очень признательно.

вот мой код, кстати:)

мой css

    @import "compass/css3";
body {
  background-image: url("background.png");
  background-size: cover;
  background-repeat: no-repeat;
}
.headers{
  color: white;
  font-family: monospace;
}
h1 {
  font-size: 70px;
  position: absolute;
  left: 35%;
  top: 23%;
  text-shadow:
     3px  3px 0 #000,
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
  }

#ondertekst {
    position: absolute;
    left: 29%;
    top: 37%;
        font-size: 30px;
    -webkit-text-stroke: 1px black;
    -webkit-text-fill-color: white;
    -webkit-animation: fill 0.5s infinite alternate;
    }
#tekst1{
  position: absolute;
  top: 70%;
  margin-right: 95%;
}

#navbar {
  background-color: #333;
  position: fixed;
  top: -50px;
  width: 100%;
  display: block;
  transition: top 0.3s;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 15px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

My html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="testhomepage.css">
<script src="testhomepage.js"></script>
<title>Page Title</title>
</head>
<body>

<div id="navbar">
<ul>
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</ul>
</div>
<h1 class="headers">paul project</h1>
<p class="headers" id="ondertekst">PLAYFUL DATA-DRIVEN ACTIVE URBAN LIVING</p>
</style>
<p id="tekst1">Paul staat voor PLAYFUL DATA-DRIVEN ACTIVE URBAN LIVING en is bedoeld om mensen
  slim in beweging te krijgen. Dit word gedaan door bacons en en slimme app die je
  helpt en motiveert. In samenwerking met de gemeente Amsterdam zijn in het
  Amstelpark en het Oosterpark allerlei zendertjes geplaatst. Zogenaamde beacons.
   Daardoor kun je op bepaalde plekken speciale oefeningen doen of je wordt
   aangemoedigd met motiverende berichten.
</p>
</body>
</html>

my js

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("navbar").style.top = "0";
  } else {
    document.getElementById("navbar").style.top = "-50px";
  }
}

1 Ответ

0 голосов
/ 09 января 2020

Черная полоса сверху, потому что значение высоты панели навигации в javascript коде меньше, чем высота панели навигации на самом деле

также я видел, как текст перемещается по меню, поэтому я добавил z-index, чтобы вверху

и добавив z-index и left:0; и right:0;, это создаст новый стек позиций над содержимым, достаточным для удаления пробела

. Вы можете увидеть эту демонстрацию 

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("navbar").style.top = "0";
  } else {
    document.getElementById("navbar").style.top = "-75px";
  }
}
body {
  background-image: url("background.png");
  background-size: cover;
  background-repeat: no-repeat;
}
.headers{
  color: white;
  font-family: monospace;
}
h1 {
  font-size: 70px;
  position: absolute;
  left: 35%;
  top: 23%;
  text-shadow:
     3px  3px 0 #000,
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
  }

#ondertekst {
    position: absolute;
    left: 29%;
    top: 37%;
        font-size: 30px;
    -webkit-text-stroke: 1px black;
    -webkit-text-fill-color: white;
    -webkit-animation: fill 0.5s infinite alternate;
    }
#tekst1{
  position: absolute;
  top: 70%;
  margin-right: 95%;
}

#navbar {
  background-color: #333;
  position: fixed;
  top: -70px;
  left:0;
  right:0;
  width: 100%;
  display: block;
  transition: top 0.3s;
  z-index:2;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 15px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}
<div id="navbar">
<ul>
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</ul>
</div>
<h1 class="headers">paul project</h1>
<p class="headers" id="ondertekst">PLAYFUL DATA-DRIVEN ACTIVE URBAN LIVING</p>
</style>
<p id="tekst1">Paul staat voor PLAYFUL DATA-DRIVEN ACTIVE URBAN LIVING en is bedoeld om mensen
  slim in beweging te krijgen. Dit word gedaan door bacons en en slimme app die je
  helpt en motiveert. In samenwerking met de gemeente Amsterdam zijn in het
  Amstelpark en het Oosterpark allerlei zendertjes geplaatst. Zogenaamde beacons.
   Daardoor kun je op bepaalde plekken speciale oefeningen doen of je wordt
   aangemoedigd met motiverende berichten.
</p>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...