Изображение находится на панели навигации ul - PullRequest
Новая
       2

Изображение находится на панели навигации ul

0 голосов
/ 18 марта 2020

Я в некотором роде новичок в программировании, и я делаю школьный проект, я шаг за шагом сделал "панель навигации ul" из w3schools, а затем я попытался поместить видео на страницу, но видео вроде испортило мою навигацию bar, есть идеи, как сделать нижнюю часть панели навигации фиксированной, чтобы, когда я вставляю img или video, это не сработало? Спасибо!

Код: 

<!DOCTYPE html>
<html lang='cs'>
  <head>
    <style>
    body {margin:0;}
h1 {
 font-family: "Comic Sans MS", cursive, sans-serif;
}
li {
 font-family: "Comic Sans MS", cursive, sans-serif;
}    
ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  overflow: auto;
  background-color: #7092be;
  position: sticky;
  top: 75px;
  width: 100%;
}

li {
  float: left;
}
li {
  border-right: 1px solid #bbb;
}

li:last-child {
  border-right: none;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #496fa0;
  }
.active {
  background-color: #bdcce1;
}

.center { margin: 0width: 480px; }
</style>
    <title></title>
    <meta charset='utf-8'>
    <meta name='description' content=''>
    <meta name='keywords' content=''>
    <meta name='author' content=''>
    <meta name='robots' content='all'>

  </head>
    <body>
    <h1> Vtipy na den</h1>
     <ul>
  <li><a href="index.html">Domov</a></li>
  <li><a href="ctyri.html">Najdu co neznám</a></li>
  <li><a href="obrazky.html">Obrázky</a></li>
  <li><a class="active" href="videjko.html">Video vtip</a></li>
  <li><a href="tabulky.html">Tabulky</a></li>


     <div>   
        <video class='center' width="640" height="480" controls autoplay>
  <source src="vtip1.mp4" type="video/mp4">
  <source src="vtip1.mp4" type="video/ogg">
        Your browser does not support the video tag.
        </video>
        </div>

    </body>
</html>

вот эта страница

https://i.stack.imgur.com/35sSc.png

Ответы [ 2 ]

0 голосов
/ 18 марта 2020

Я подобрал для вас ваш код и исправил проблему. Вы просто забыли закрыть свой тег ul, вам нужно закрыть теги для отображения нового элемента уровня блока, если только вы не решили использовать для него display flex, вы также можете дать имена своим DIVs и создать новый DIV для каждого раздела страницы для принудительного применения элемента уровня блока. 

body {
  margin: 0;
}

h1 {
  font-family: "Comic Sans MS", cursive, sans-serif;
}

li {
  font-family: "Comic Sans MS", cursive, sans-serif;
}

ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  overflow: auto;
  background-color: #7092be;
  position: sticky;
  top: 75px;
  width: 100%;
}

li {
  float: left;
}

li {
  border-right: 1px solid #bbb;
}

li:last-child {
  border-right: none;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #496fa0;
}

.active {
  background-color: #bdcce1;
}

.center {
  margin: 0width: 480px;
}
<!DOCTYPE html>
<html lang='cs'>

<head>

    <title>Page title</title>
    <meta charset='utf-8'>
    <meta name='description' content=''>
    <meta name='keywords' content=''>
    <meta name='author' content=''>
    <meta name='robots' content='all'>

</head>

<body>
    <h1> Vtipy na den</h1>
    <ul>
        <li><a href="index.html">Domov</a></li>
        <li><a href="ctyri.html">Najdu co neznám</a></li>
        <li><a href="obrazky.html">Obrázky</a></li>
        <li><a class="active" href="videjko.html">Video vtip</a></li>
        <li><a href="tabulky.html">Tabulky</a></li>
    </ul>
        <div>
            <video class='center' width="640" height="480" controls autoplay>
                <source src="vtip1.mp4" type="video/mp4">
                <source src="vtip1.mp4" type="video/ogg"> Your browser does not support the video tag.
            </video>
        </div>

</body>

</html>
0 голосов
/ 18 марта 2020

Вы не закрыли свой тег ul после последнего </li>

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...