除一个页面外，所有页面上的导航栏周围都有一个空隙

Question

2017-01-09 编辑的代码

就像我说的，除了主页之外，我所有页面的导航栏周围都有一个空隙。看图片：

This page is how it is suppose to be

This is how it appear (wrong) on all the other page

你可以看到酒吧周围有一个空隙，而且高度与对齐方式不一样。我尝试使用 heigh 和 padding，但是当我这样做时，主页也会发生变化并变薄，所以我们看不到所有文本。我不明白为什么它在我所有的页面上都不一样。

问题是我对包含我的导航栏的所有页面使用相同的 CSS 代码（相同的 ID）。这是我的代码

对于主页（导航栏正确的地方）

/*background main page*/
#bodyprincipal_background {
 background-image: url("Grèce_background_1.jpg");
 background-size: cover;
 background-color:#f1f1f1
}
/*background other pages*/
#image_background_general {
 background-image: url("grèce_background_texte_testeve1.jpg");
 background-size: cover;
}

/*nav bar uper right*/
#navbar_principal  {
 list-style-type: none;
    margin: 0;
    padding: 10px;
    overflow: hidden;
 background-color:#333 ;
 height: 60px;
}

#cat_navbar  {
 float: right;
}

#nom_navbar  {
 float: left;
}
#button_navbar {
  text-align: center;
     list-style-type: none;
  color: #99b3ff;
     margin: 0;
     padding: 8px ;
  display: block;
  text-decoration: none;
  background-color:#333 ;
  font-family: arial;
  font-size: 14px;
  /*#99b3ff*/
} 

#button_navbar:hover {
    background-color: #666666;
}

#button_nom  {
 color:#99b3ff;
 padding: 8px;
 font-weight: bold;
 font-size: 16px;
 font-family: arial;
}
/* End of nav bar*/


<!-- begin snippet: js hide: false console: true babel: false -->

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<title> Bienvenu sur E-Démocratie !</title>
</head>

<body id="bodyprincipal_background">
<nav id="nav1">
<ul id="navbar_principal">
 <li id="nom_navbar"><p id="button_nom">E-Démocratie </p>
 <li id="cat_navbar"><a id="button_navbar" href="connexion.php">Connexion</a></li>
 <li id="cat_navbar"><a id="button_navbar" href="apropos.php">À propos</a></li>
 <li id="cat_navbar"><a id="button_navbar" href="contacte.php">Contacte</a></li>
 <li id="cat_navbar"><a id="button_navbar" href="accueil.php">Accueil</a></li>
</ul> 
</nav>
<h2 id="nom_accueil"> Bienvenu sur E-Démocratie ! </h1>
<h3 id="accueil_titre_2"> Revenons au fondement de la démocratie, par le peuple, pour le peuple.</h2>

<p id="description_accueil">
Notre site web vise à informez la population de façon neutre sur les enjeux de notre société.<br> 
Pourquoi ? : Le savoir c'est le pouvoir, informe toi et prends les choses en mains. </p>

<br>
<br>

<div id="etape1"> 
<p id="etape1">
"content"
</p>
</html>

最后一个是导航栏显示不正确的页面示例：

   <!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

<body id="image_background_general">

<nav id="nav1">
 <ul id="navbar_principal">
  <li id="nom_navbar"><p id="button_nom">E-Démocratie </p>
  <li id="cat_navbar"><a id="button_navbar" href="connexion.php">Connexion</a></li>
  <li id="cat_navbar"><a id="button_navbar" href="apropos.php">À propos</a></li>
  <li id="cat_navbar"><a id="button_navbar" href="contacte.php">Contacte</a></li>
  <li id="cat_navbar"><a id="button_navbar" href="accueil.php">Accueil</a></li>
 </ul> 
</nav>

<h2 id="nom1"> Pour nous contacter </h2>
</body>
</html>

Answer 1

您的 html 输出看起来不正确。您不应在 <head> 标记内包含任何页面 html。您需要将其全部放在 <body> 中。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <title> Pour nous contacter </title>
</head>
<body id="image_background_general">
    <nav id="nav1">
        <ul id="navbar_principal">
            <li id="nom_navbar"><p id="button_nom">E-Démocratie </p>
            <li id="cat_navbar"><a id="button_navbar" href="connexion.php">Connexion</a></li>
            <li id="cat_navbar"><a id="button_navbar" href="apropos.php">À propos</a></li>
            <li id="cat_navbar"><a id="button_navbar" href="contacte.php">Contacte</a></li>
            <li id="cat_navbar"><a id="button_navbar" href="accueil.php">Accueil</a></li>
        </ul>
    </nav>
    <h1 id="nom1"> Pour nous contacter </h1>
</body>
</html>

您的第一个代码片段中还缺少结束正文和 html 标记：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">   </script>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <title> Bienvenu sur E-Démocratie !</title>
</head>
<body id="bodyprincipal_background">
    <nav id="nav1">
        <ul id="navbar_principal">
            <li id="nom_navbar"><p id="button_nom">E-Démocratie </p>
            <li id="cat_navbar"><a id="button_navbar" href="connexion.php">Connexion</a></li>
            <li id="cat_navbar"><a id="button_navbar" href="apropos.php">À propos</a></li>
            <li id="cat_navbar"><a id="button_navbar" href="contacte.php">Contacte</a></li>
            <li id="cat_navbar"><a id="button_navbar" href="accueil.php">Accueil</a></li>
        </ul> 
    </nav>
    <h1 id="nom_accueil"> Bienvenu sur E-Démocratie ! </h1>
    <h2 id="accueil_titre_2"> Revenons au fondement de la démocratie, par le peuple, pour le peuple.</h2>
    <p id="description_accueil">Page content</p>
</body>
</html>

Answer 2

Copy the HTML below to begin working with a minimal Bootstrap document.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

以上3个meta标签必须排在最前面；任何其他头部内容必须在这些标签

之后

接下来你应该把这些行放在你的 HTML:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

接下来 - 您应该将 nav 从 head 移动到 body。因此，您的第二个代码段必须如下所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
<title> Pour nous contacter </title>
</head>
<body id="image_background_general">
<nav id="nav1">
<ul id="navbar_principal">
    <li id="nom_navbar"><p id="button_nom">E-Démocratie </p>
    <li id="cat_navbar"><a id="button_navbar" href="connexion.php">Connexion</a></li>
    <li id="cat_navbar"><a id="button_navbar" href="apropos.php">À propos</a></li>
    <li id="cat_navbar"><a id="button_navbar" href="contacte.php">Contacte</a></li>
    <li id="cat_navbar"><a id="button_navbar" href="accueil.php">Accueil</a></li>
</ul> 
</nav>
<h1 id="nom1"> Pour nous contacter </h1>
</body>
</html>

Answer 3

nav 元素不应该放在 head 标签内，它应该放在 body 内（实际上 head 标签不代表 "header"）。移动导航元素，它应该可以解决您的问题。

除一个页面外，所有页面上的导航栏周围都有一个空隙

There is a gap around my nav bar on all page except one

html

css

navbar

以上3个meta标签必须排在最前面；任何其他头部内容必须在这些标签