Highlighted

Horizontal Navigation Bar

New Here ,
Jul 18, 2018

Copy link to clipboard

Copied

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;

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>

Views

314

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Horizontal Navigation Bar

New Here ,
Jul 18, 2018

Copy link to clipboard

Copied

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;

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>

Views

315

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 18, 2018 0
LEGEND ,
Jul 18, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 18, 2018 0
New Here ,
Jul 18, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 18, 2018 0
LEGEND ,
Jul 18, 2018

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 18, 2018 0
New Here ,
Jul 18, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 18, 2018 0
LEGEND ,
Jul 18, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 18, 2018 0
New Here ,
Jul 18, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 18, 2018 0
LEGEND ,
Jul 18, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 18, 2018 0
New Here ,
Jul 18, 2018

Copy link to clipboard

Copied

It comes up vertical.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 18, 2018 0
LEGEND ,
Jul 18, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 18, 2018 0
New Here ,
Jul 18, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 18, 2018 0
osgood_ LATEST
LEGEND ,
Jul 18, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 18, 2018 0