Почему мой верхний колонтитул отображается в верхней части моей страницы? - PullRequest
Новая
       13

Почему мой верхний колонтитул отображается в верхней части моей страницы?

0 голосов
/ 20 марта 2019

У меня действительно простой код, но каким-то образом нижний колонтитул отображается в верхней части моей страницы. Как видите, я не использую поплавки, обертки, сетки или что-то еще. Вы можете найти код прямо под этим текстом. Может ли кто-нибудь помочь мне понять, почему это происходит и как я могу предотвратить это в будущем? Заранее спасибо! 

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<style type="text/css">

body {
      margin:0px;
     }


main {
      margin: 1cm auto;
      width: 50%;
      padding: 1cm;
      border: 1px solid black;
     }


 nav {
     border: 1px solid black;
     }
</style>
</head>

<body>
<footer> Service Networking </footer>

<nav>
   <label>Name: <input type="text" name="name"> </label>
   <label>Surname: <input type="text" name="surname"> </label>
</nav>

<main>
   <h1> Welcome! </h1>
   <p> This is your first page </p>
</main>
</body>

</html>

Ответы [ 5 ]

1 голос
/ 20 марта 2019 
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<style type="text/css">

body {
      margin:0px;
     }


main {
      margin: 1cm auto;
      width: 50%;
      padding: 1cm;
      border: 1px solid black;
     }


 nav {
     border: 1px solid black;
     }
</style>
</head>

<body>

<nav>
   <label>Name: <input type="text" name="name"> </label>
   <label>Surname: <input type="text" name="surname"> </label>
</nav>

<main>
   <h1> Welcome! </h1>
   <p> This is your first page </p>
</main>

 <footer> Service Networking </footer>
</body>


</html>

Вы использовали <footer>, до nav и main.

0 голосов
/ 20 марта 2019

Поскольку ваш первый элемент внутри <body> равен footer, HTML будет представлен построчно.

Нижний колонтитул - это семантический тег, который введен в HTML 5. Семантические элементы - это просто теги сзначение.

Таким образом, ваш тег footer является элементом уровня блока и поэтому имеет свойство display:block.

Аналогично, если вы используете элемент заголовка в качестве последнего элемента перед телом, то также содержимое заголовкабудет отображаться в нижней части, поскольку это семантический тег (тег со значением, который помогает как браузеру, так и человеку понимать содержимое тега).

Вы можете иметь несколько тегов раздела нижнего колонтитула, пока он не станет значимым длябраузер и человек.

Демонстрация: https://jsfiddle.net/akshaymhatre89/ekvgLxcy/11/

<header>
  <h1>Header</h1>
</header>
<hr>
<main>
  <section>
    <header>
      <h2>Section header</h2>
    </header>
    <article>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ex minima magnam 
    </article>
    <footer>
      <p>End of article</p>
    </footer>
  </section>
</main>
<hr>
<footer>
  &copy; Copyright :-)
</footer>

Другие статьи по теме:

0 голосов
/ 20 марта 2019

Потому что вы ставите тег нижнего колонтитула перед тегом nav и основным тегом.Переместите его до конца. 

body {
      margin:0px;
     }


main {
      margin: 1cm auto;
      width: 50%;
      padding: 1cm;
      border: 1px solid black;
     }


 nav {
     border: 1px solid black;
     }
     
    footer{
    border: 1px solid green;
    }
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">

</head>

<body>


<nav>
   <label>Name: <input type="text" name="name"> </label>
   <label>Surname: <input type="text" name="surname"> </label>
</nav>

<main>
   <h1> Welcome! </h1>
   <p> This is your first page </p>
</main>

<footer> Service Networking </footer>
</body>

</html>
0 голосов
/ 20 марта 2019 

body {
      margin:0px;
     }


main {
      margin: 1cm auto;
      width: 50%;
      padding: 1cm;
      border: 1px solid black;
     }


 nav {
     border: 1px solid black;
     }         
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
</head>

<body>

<nav>
   <label>Name: <input type="text" name="name"> </label>
   <label>Surname: <input type="text" name="surname"> </label>
</nav>

<main>
   <h1> Welcome! </h1>
   <p> This is your first page </p>
</main>
<footer> Service Networking </footer>
</body>

</html>
0 голосов
/ 20 марта 2019

Попробуйте разместить теги нижнего колонтитула после основных тегов.

...