What is this extra box in my nav bar in html

Question

Here is my code below. I have this extra space in my navbar, not sure why it's there. I want only 3 boxes. Maybe, I am making this code more difficult than it should be my mistake. (I am just learning HTML ...)

    /* Navigation bar */
.nav {
    width: 510px;
    margin: auto;
    list-style: none;
}


.nav ul {

    list-style-type: none;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    /*border: : 1px solid blue;*/
    /* This is the color of the nav bar */
    background-color: grey;
    background: linear-gradient( #c7c7c7, #edeae2);
}

.nav li {
    margin: 0px;
    float: left;
}

.nav a {
    display: block;
    /* The text color */
    color: black;

    /* Sets the text to be centered in the box*/
    text-align: center;
    /* The width */
    width: 130px;
    /* How the text is positioned in the columns*/
    padding: 20px 10px 20px 10px;
    /* The font size*/
    font-size: 25px;
    /* This removes the underline remove the text */
    text-decoration: none;


}

.nav li a:hover:not(.active) {
    background-color: orange;
}

.active {
    background-color: darkorange;
}

<!-- The navigation bar is created here -->
        <div class="nav">
            <ul>
                <li><a class="active" href="index.html">Home</a></li>
                <li><a href="games.html">Games</a></li>
                <li><a href="contact.html">Contact Us</a></li>
            </ul>
    </div>

your width 510px should be divided by 3 , the main wrapper .nav has 510px and the anchor .nav a has a width of 130px + 20px padding, so you see the remaining width as fourth box — karthick, May 23 '17 at 03:46
@karthick So if I wanted a 4 box, I would divide it by 4 right? — Cmi, May 23 '17 at 12:28

alessandrio · Answer 1 · 2017-05-23T03:54:58.973

0

.nav a here ((130px + 20px)*3) Is not equal to 510px. try to assign the correct measurements

The following code will work

.nav {
  width: 510px;/*Remove this line*/
  ...
  display: table;/*<<<<<<<<Assign the required width*/
}

or

.nav ul {
  ...
  display: table;/*<<<<<<<<Assign the required width*/
}

edited May 23 '17 at 03:54

answered May 23 '17 at 03:46

alessandrio

4,282
2
29
40

score 0 · Answer 2 · answered May 23 '17 at 03:49

You should update this css part, if you need a width please assign.

.nav ul {
    display:table;
}

.nav {
    width: 510px;
    margin: auto;
    list-style: none;
}


.nav ul {

    list-style-type: none;
    display:table;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    /*border: : 1px solid blue;*/
    /* This is the color of the nav bar */
    background-color: grey;
    background: linear-gradient( #c7c7c7, #edeae2);
}

.nav li {
    margin: 0px;
    float: left;
}

.nav a {
    display: block;
    /* The text color */
    color: black;

    /* Sets the text to be centered in the box*/
    text-align: center;
    /* The width */
   /*  width: 130px; */
    /* How the text is positioned in the columns*/
    padding: 20px 10px 20px 10px;
    /* The font size*/
    font-size: 25px;
    /* This removes the underline remove the text */
    text-decoration: none;


}

.nav li a:hover:not(.active) {
    background-color: orange;
}

.active {
    background-color: darkorange;
}

        <div class="nav">
            <ul>
                <li><a class="active" href="index.html">Home</a></li>
                <li><a href="games.html">Games</a></li>
                <li><a href="contact.html">Contact Us</a></li>
            </ul>
    </div>

Bhuwan · Answer 3 · 2018-01-27T05:32:24.010

0

You can use Flexbox here. And for boxes you can use calc() here.

Stack Snippet

.nav {
  width: 510px;
  margin: auto;
  list-style: none;
}

.nav ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  background-color: grey;
  background: linear-gradient( #c7c7c7, #edeae2);
  display: flex;
}

.nav li {
  flex: 0 0 calc(100%/3);
}

.nav a {
  display: block;
  color: black;
  text-align: center;
  padding: 20px 10px 20px 10px;
  font-size: 25px;
  text-decoration: none;
  box-sizing: border-box;
}

.nav li a:hover:not(.active) {
  background-color: orange;
}

.active {
  background-color: darkorange;
}

<div class="nav">
  <ul>
    <li><a class="active" href="index.html">Home</a></li>
    <li><a href="games.html">Games</a></li>
    <li><a href="contact.html">Contact Us</a></li>
  </ul>
</div>

edited Jan 27 '18 at 05:32

answered May 23 '17 at 05:50

Bhuwan

16,525
5
34
57

But if I wanted 4 I would just need to multiple by 4 than correct? – Cmi May 23 '17 at 12:30
@Cmi : If you wanted 4 boxes then you have to divide total `nav` width by 4(i.e. no of boxes) – Bhuwan May 23 '17 at 15:05
@Cmi yeah we can use `calc()`. For 4 boxes add css `width: calc(100%/4)`. – Bhuwan May 24 '17 at 03:57

score -1 · Accepted Answer · edited Jan 26 '18 at 19:37

-1

You should add display: table on the .nav class!

This should be your final code:

/* Navigation bar */

.nav {
  /*width: 510px;*/
  margin: auto;
  list-style: none;
  display: table;
}

.nav ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  /*border: : 1px solid blue;*/
  /* This is the color of the nav bar */
  background-color: grey;
  background: linear-gradient( #c7c7c7, #edeae2);
}

.nav li {
  margin: 0px;
  float: left;
}

.nav a {
  display: block;
  /* The text color */
  color: black;
  /* Sets the text to be centered in the box*/
  text-align: center;
  /* The width */
  width: 130px;
  /* How the text is positioned in the columns*/
  padding: 20px 10px 20px 10px;
  /* The font size*/
  font-size: 25px;
  /* This removes the underline remove the text */
  text-decoration: none;
}

.nav li a:hover:not(.active) {
  background-color: orange;
}

.active {
  background-color: darkorange;
}

<!-- The navigation bar is created here -->
<div class="nav">
  <ul>
    <li><a class="active" href="index.html">Home</a></li>
    <li><a href="games.html">Games</a></li>
    <li><a href="contact.html">Contact Us</a></li>
  </ul>
</div>

edited Jan 26 '18 at 19:37

Bhuwan

16,525
5
34
57

answered May 23 '17 at 03:52

Lloyd Dominic

778
8
25

I don't know but this worked well for me, can I ask why make the display a table? On w3 it says that table "Let the element behave like a element" can you give me a better understanding
– Cmi May 23 '17 at 12:54
`display: table` is used to horizontally center an element dynamically. You can [read more of them here ...](https://colintoh.com/blog/display-table-anti-hero#dynamic-horizontal) – Lloyd Dominic May 24 '17 at 00:49
It is also used as a **clearfix**. [More of them here ...](https://stackoverflow.com/questions/8554043/what-is-a-clearfix) – Lloyd Dominic May 25 '17 at 07:12
I see thanks, I will definitely be looking at that and using it as a reference – Cmi May 25 '17 at 12:15

score -1 · Answer 5 · answered May 23 '17 at 04:52

Set your .nav width to 450px, which is the sum of your li elements

    /* Navigation bar */
.nav {
    width: 450px;
    margin: auto;
    list-style: none;
}


.nav ul {

    list-style-type: none;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    /*border: : 1px solid blue;*/
    /* This is the color of the nav bar */
    background-color: grey;
    background: linear-gradient( #c7c7c7, #edeae2);
}

.nav li {
    margin: 0px;
    float: left;
}

.nav a {
    display: block;
    /* The text color */
    color: black;

    /* Sets the text to be centered in the box*/
    text-align: center;
    /* The width */
    width: 130px;
    /* How the text is positioned in the columns*/
    padding: 20px 10px 20px 10px;
    /* The font size*/
    font-size: 25px;
    /* This removes the underline remove the text */
    text-decoration: none;


}

.nav li a:hover:not(.active) {
    background-color: orange;
}

.active {
    background-color: darkorange;
}

<!-- The navigation bar is created here -->
<div class="nav">
  <ul>
    <li><a class="active" href="index.html">Home</a></li>
    <li><a href="games.html">Games</a></li>
    <li><a href="contact.html">Contact Us</a></li>
  </ul>
</div>

What is this extra box in my nav bar in html

5 Answers5