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，但是当我这样做时，主页也发生了变化并变得 slim ，因此我们看不到所有文本。我不明白为什么它在我所有的页面上都不一样。
问题是我对包含我的导航栏的所有页面使用相同的 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 - 除一个页面外，所有页面上的导航栏周围都有一个空隙，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41539399/