CODEWITHSUNDEEP
htmlcss
eden annonay
eden annonay

Reputation: 37

How to make a navigation bar in html/css that has no space with the rest of the page?

I am creating a website as a portfolio to present my path in IT but my problem is that my navigation bar has a space between the bar in itself and the rest of the page

I've tried using border,margin,width but none worked

body {
    background-color : #B31854;
}


ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #900C3F;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #740A33;
}


h1 {
    font-family : Schluber;
    color : #D7BDE2 ;
}
p {
color : #D7BDE2 ;
width:300px;
margin : auto;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="file:///F:/Site%20web/Exemple%20css.css">
<style>
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#accueil">Accueil</a></li>
  <li><a href="#monparcours">Mon Parcours</a></li>
  <li><a href="#mesprojets">Mes Projets</a></li>
  <li><a href="#contact">Contact</a></li>

</ul>



<center><h1>Bienvenue sur mon portfolio !</h1></center>




</body>
</html>

The expected result is something like the following website navbar : http://axel-chapelain.com/

the actual result is like : https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_black

Upvotes: 1

Views: 84

Answers (3)

aloisdg
aloisdg

Reputation: 23531

I think you are looking to erase the default margin of body. Try to reset it with:

body {margin:0;}

Add the rule to the top of your css.

Demo:

body {
    margin: 0; /* reset happened here */
    background-color : #B31854;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #900C3F;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #740A33;
}


h1 {
    font-family : Schluber;
    color : #D7BDE2 ;
}
p {
color : #D7BDE2 ;
width:300px;
margin : auto;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="file:///F:/Site%20web/Exemple%20css.css">
<style>
</style>
</head>
<body>
<ul>
  <li><a class="active" href="#accueil">Accueil</a></li>
  <li><a href="#monparcours">Mon Parcours</a></li>
  <li><a href="#mesprojets">Mes Projets</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>
<center><h1>Bienvenue sur mon portfolio !</h1></center>
</body>
</html>

Beside, you may want to reset more defaults. See CSS Tools: Reset CSS. More information on Stack Overflow: CSS reset - What exactly does it do? or How wide is the default <body> margin?.

If you look into the source code you will find:

html, body { /* I cut a lot of tags here */
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

Instead of full reset, you may want to normalize your css across browser. Check Normalize.css

If you look into the source code you will find:

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

I think it is worth mentioning that another working solution would be to add a negative margin to a wrapper wrapping your whole html. Please dont do that. Nobody wants to deal with this kind of hacky workaround. Dont fight the browser ; reset it.

Upvotes: 2

Remy Baas
Remy Baas

Reputation: 1

I added margin to your nav. Please see the ul class in your styles. I gave a margin-top -10 so it just goes up 10pixels the same as margin-left.

body{
    width: 100%;
}

    ul {
    margin-top: -10px;
    margin-left: -10px;

  list-style-type: none;
  overflow: hidden;
  background-color: #900C3F;
    }

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #740A33;
}


h1 {
    font-family : Schluber;
    color : #D7BDE2 ;
}
p {
color : #D7BDE2 ;
width:300px;

}

your welcome :)

Upvotes: 0

Arjun V
Arjun V

Reputation: 197

Try this code: 

body {
        background-color : #B31854;
    }


ul {
  list-style-type: none;
  overflow: hidden;
  background-color: #900C3F;
}

li {
 position:relative;
 float:left;
 left: 25%;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #740A33;
}


h1 {
    font-family : Schluber;
    color : #D7BDE2 ;
}
p {
color : #D7BDE2 ;
width:300px;
margin : auto;
}

Upvotes: 0

Related Questions