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

代码编辑于 2017-01-09

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

这个页面应该是这样的

这就是它在所有其他页面上的显示方式（错误）

你可以看到酒吧周围的缝隙，而且高度与 allignement 不同。我试图玩heigh和填充，但是当我这样做时，主页也会发生变化并变得苗条，所以我们看不到所有文本。我不明白为什么我所有页面上的页面都不一样。

问题是我对包含我的导航栏的所有页面使用相同的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>

您的 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>

复制下面的 HTML 以开始使用最小的引导程序文档。

<!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 个元标记必须排在 head 的第一位;任何其他 head 内容都必须排在这些标签之后

接下来，您应该将这些行放在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>

<</div> div class="one_answers">

nav 元素不应该进入头部标签内部，它进入正文内部（实际上头部标签并不代表"header"）。移动导航元素，它应该可以解决您的问题。

上述 3 个元标记必须排在 head 的第一位;任何其他 head 内容都必须排在这些标签之后

相关内容

最新更新

热门标签：