Horizontal Navigation Bar

Report · Jul 18, 2018

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;

Report · Jul 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.

Report · Jul 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.

Report · Jul 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>

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

</body>

</html>

Report · Jul 18, 2018

The code didn't work. I tried switching it to 20 because I have 5 links, but that is when the last link moves under the first link box. Switching it to 18 works fine, but then there is a space/gap at the end when I preview it in chrome. When previewing in Firefox, the last link is always under the first. Everything always looks fine in Dreamweaver until I preview it. Thanks for your help.

Report · Jul 18, 2018

The code DID work you haven't implemented it correctly OR you have something else going on in your code stopping it working.

If you provide a link to the page in question someone will be able to see where you are going wrong. Its no good taking a bit of this and a bit of that and hoping things will work, they wont.

Report · Jul 18, 2018

I have a separate css page, and you've include html code in what you pasted. It didn't work with the addition of the html. I tried uploading only the css into my page and it gave me a vertical bar instead of keeping it horizontal.

Report · Jul 18, 2018

That's becuse Ive provided you with a fully working horizontal nav bar - css and html. You should remove any current code/css that you have which relates to the navigation.

Insert the code I provided into a new DW document save it and view it in a brwoser - you will see it works.

Report · Jul 18, 2018

It comes up vertical.

Report · Jul 18, 2018

What browser are you viewing the code in? Are you using an ancient copy of Safari by any chance?

Report · Jul 18, 2018

I had to delete something else and it seems to be working. Thanks for your help.

Report · Jul 18, 2018

amberc3152909 wrote
I had to delete something else and it seems to be working. Thanks for your help.

No problem, if you run into any more issues post back.

Adobe Community

Horizontal Navigation Bar

1 Correct answer