CODEWITHSUNDEEP
htmlcssnavbar
P-A Viel
P-A Viel

Reputation: 17

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

Code edited on 2017-01-09

Like i said, i have a gap around my nav bar on all my page except the main page. see the picture :

This page is how it is suppose to be

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

You can see a gap around the bar and also the heigh is not the same as the allignement. I tried to play with the heigh and padding but when i do the main page is also change and get to slim so we cant see all the text. i dont understand why it is not the same on all my page.

The things is that i use the same CSS code (same ID) for all the page that contain my nav bar.. Here is my code

For the main page (where the navbar is correct)

/*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>

And the last one is an exemple of a page where the navbar isnt correctly display:

   <!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>

Upvotes: 0

Views: 56

Answers (3)

Banzay
Banzay

Reputation: 9470

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">

The above 3 meta tags must come first in the head; any other head content must come after these tags

Next you should put these lines in your 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>

Next - you should move your nav from head into body. Thus your second snippet has to look:

<!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>

Upvotes: 0

Hiraqui
Hiraqui

Reputation: 447

The nav element is not supposed to go inside the head tag, it goes inside body (actually the head tag does not stand for "header"). Move the nav element and it should solve your problem.

Upvotes: 0

hellatan
hellatan

Reputation: 3577

your html output looks incorrect. You shouldn't have any of your page html inside the <head> tag. You need to put that all in the <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>

You also are missing the closing body and html tags in your first code snippet:

<!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>

Upvotes: 1

Related Questions