html

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

  • Like i said, i have a gap around my nav bar on all my page except the main page.
  • For the main page (where the navbar is correct)
  • 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”).
  • The things is that i use the same CSS code (same ID) for all the page that contain my nav bar..
  • You shouldn’t have any of your page html inside the tag.

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.

@ng_real_ninja: There is a gap around my nav bar on all page except one #angularjs #reactjs

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

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

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

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.

Next you should put these lines in your HTML:

. Thus your second snippet has to look:

html