Skip to main content
amberc3152909
amberc3152909
Participating Frequently
July 18, 2018
Answered

Horizontal Navigation Bar

  • July 18, 2018
  • 1 reply
  • 1156 views

I've created a webpage, and have a horizontal navigation bar directly under the header. In Dreamweaver, the width looks fine, but when I preview it in different browsers, the last link button is under the first or I have a gap at the end of the bar. How can I fix this?  Here is the code:

ul.nav {

list-style: none; /* this creates the top border for the links - all others are placed using a bottom border on the LI */

margin-bottom: 15px; /* this creates the space between the navigation on the content below */

height: 1.8em;

border-left: 1px #EBEBEB solid;

border-bottom: 1px #EBEBEB solid;

padding-bottom: 3px;

background-color: #3C3631;

font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;

font-size: 12pt;

text-align: center;

width: 100%;

}

ul.nav li {

border-bottom: 1px solid #666;

}

ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */

padding: 5px 5px 3px 15px;

display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */

text-decoration: none;

background-color: #3C3631;

color: #EBEBEB;

font-weight: bold;

border-right: 1px #EBEBEB solid;

float: left;

width: 18.3%;

}

ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */

background-color: #EBEBEB;

color: #000;

border-bottom: 3px #999999 solid;

border-right: 3px #999999 solid;

padding-bottom: 0px;

padding-right: 3px;

font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;

font-size: 12pt;

text-align: center;

    This topic has been closed for replies.
    Correct answer osgood_

    How many links do you have?

    If you have 5 make the li css 16.6% if you have 5 links make it 20% - number of links/100 give you the percent.

    See if the code below is close to what you need:

    <!DOCTYPE html>

    <html>

    <head>

    <meta = charset="UTF-8" />

    <title>Navigation</title>

    <style>

    .nav {

    display: flex;

    justify-content: center;

    margin: 0;

    padding: 0;

    background-color: #3C3631;

    }

    .nav li {

    width: 16.6%;

    list-style: none;

    margin: 0;

    padding: 0;

    border-right: 1px #EBEBEB solid;

    }

    .nav li a {

    text-decoration: none;

    color: #EBEBEB;

    padding: 10px;

    display: block;

    text-align: center;

    }

    </style>

    </head>

    <body>

    <ul class="nav">

    <li><a href="#">Link 1</a></li>

    <li><a href="#">Link 2</a></li>

    <li><a href="#">Link 3</a></li>

    <li><a href="#">Link 4</a></li>

    <li><a href="#">Link 5</a></li>

    <li><a href="#">Link 6</a></li>

    </ul>

    </body>

    </html>

    1 reply

    O
    osgood_
    Legend
    July 18, 2018

    I guess you have run out of space so the last link goes to the next available position which is under the first link.

    Having a width of 18.3% set on the anchor tag says you only have enough room for 5 links, add the left right padding: 5px 5px 3px 15px; and unless you have included some styling to negate the box model where padding gets added to the width your nav is likely to go bust

    width: 18.3%;

    I would remove the width and left/right padding and work from that point.

    amberc3152909
    amberc3152909Author
    Participating Frequently
    July 18, 2018

    Thanks,

    I deleted them like you said and now they are all small box scrunched up to the left. What would be the next step after this. I added the padding back and that helped a tiny bit, but now they are still set to the left and they don't have the same widths and they don't reach across the whole page.

    O
    osgood_Correct answer
    Legend
    July 18, 2018

    How many links do you have?

    If you have 5 make the li css 16.6% if you have 5 links make it 20% - number of links/100 give you the percent.

    See if the code below is close to what you need:

    <!DOCTYPE html>

    <html>

    <head>

    <meta = charset="UTF-8" />

    <title>Navigation</title>

    <style>

    .nav {

    display: flex;

    justify-content: center;

    margin: 0;

    padding: 0;

    background-color: #3C3631;

    }

    .nav li {

    width: 16.6%;

    list-style: none;

    margin: 0;

    padding: 0;

    border-right: 1px #EBEBEB solid;

    }

    .nav li a {

    text-decoration: none;

    color: #EBEBEB;

    padding: 10px;

    display: block;

    text-align: center;

    }

    </style>

    </head>

    <body>

    <ul class="nav">

    <li><a href="#">Link 1</a></li>

    <li><a href="#">Link 2</a></li>

    <li><a href="#">Link 3</a></li>

    <li><a href="#">Link 4</a></li>

    <li><a href="#">Link 5</a></li>

    <li><a href="#">Link 6</a></li>

    </ul>

    </body>

    </html>

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices