CSS link hover states and horizontal nav bar width

Get Started
1

Hey all,

I have a horizontal navigation bar on a web page, based on the CSS Anthology’s example of the horizontal menu. The HTML and CSS for my attempt at this particular example are listed below:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.DTD">
<html xmlns="http:www.w3.org/1999/xhtml">
 <head>
  <title>HikeDirect</title>
  <meta http-equiv="Content-Type"
    content="text/html; charset=utf-8"/>
  <link href="nav bar test.css" rel="stylesheet" type="text/css"/>
</head!>


<div id="body">

<div id="header">

<div id="site name">

<h1>Hike Direct</h1>
</div>

<div id="tagline">
   <p>Comprehensive hiking and outdoor info and advice</p>
    </div><!-- end of div tagline --!>


</div><!-- end of div header --!>


<div id="navigation">
 <ul>
  <li><a href="hdindex.html">Home</a></li>
  <li><a href="hdarticles.html">Articles</a></li>
  <li><a href="whereto.html">Where to?</a></li>
  <li><a href="hdblog.html">Blog</a></li>
  <li><a href="directory.html">Product and merchant directory</a></li>
  <li><a href="reviews.html">Reviews</a></li>
</ul>
</div><!-- end of div navigation --!>
</html>

CSS:

#navigation {
 position: absolute;
 top: 127px; left: 0;
 padding: 1em;
 text-decoration: none;
 border: 1px dotted navy;
 font-size: 90%;
 color: navy;
 font-weight: bold;
 width: 100%;
 background-color: #ffcc33;
 }

#navigation ul {
list style: none;
padding: 0;
margin: 0;
padding top: 1em;
 }

#navigation li {
display: inline;
border: 1px solid black;
padding: 1em;
margin: 0px;
left: 0;
right: 0;
 }

#navigation a:link, #navigation a:visited; {
padding: 0em, 1em, 0em, 1em;
color:#FFFFFF;
background-color: #B51032;
text-decoration: none;
border: 1px solid #711515;
padding: 1em;
 }

#navigation a:hover {
color: #FFFFFF;
background: #711515;
padding: 1em;
margin: 0;
 }

My three main problems that I can’t seem to fix, seen in this screenshot, are:

1/ That I can’t remove the yellow spaces between the side borders of the link and dark red background of the hover state.

2/ The 2 or 3 pixel spaces between the side borders of the links and left side of the home link.

3/ Getting the links to sit flush side by side, be all the same width and to span across the width of the page.

So in other words, I want to get rid of the padding (yellow spaces) at the sides of the links in hover state, and I want the links to sit flush side by side, with no gap, be equal in width and span across the whole screen.

I’ve read some tutorials on how to get the links centre aligned and evenly distributed, but from what I understand, that would mean changing the approach from inline display to a float display and I would like to avoid this as I am not familiar with the float display. Or if float display is the only way to do this, I would appreciate suggestions on how to do it and a sample or where I can find one.

Cheers.

2

Hi svozdog. Welcome to SitePoint. :slight_smile:

To get what you want, firstly, remove the padding from here, also the right and left settings:

#navigation li {
display: inline;
border: 1px solid black;
[COLOR="Red"]padding: 1em;[/COLOR]
margin: 0px;
[COLOR="Red"]left: 0;
right: 0;[/COLOR]
}

Also, change display: inline to float: left; (I find that works better)

#navigation li {
[COLOR="Red"]float: left;[/COLOR]
border: 1px solid black;
padding: 1em;
margin: 0px;
}

Then place padding on the <a> instead, and set it to display: block to make it fill the area of the LI:

#navigation a {
display: block;
padding: 1em;
}

Also move the yellow background from the surrounding div to here:

#navigation ul {
list-style: none;
padding: 0;
margin: 0;
[COLOR="Red"]background-color: #ffcc33;
overflow: hidden;[/COLOR]
}

I also added overflow: hidden to make the UL wrap around its floated LIs (as otherwise they hang out below it and the bg color disappears).

The resulting code is below (paste this into a .html file, as the CSS is embedded in the head for testing purposes).

This may not be quite what you want so just let us know if you need further modifications. :slight_smile:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.DTD">
<html xmlns="http:www.w3.org/1999/xhtml">
<head>
<title>HikeDirect</title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/>
<style type="text/css" media="all">
#navigation {
position: absolute;
top: 127px; left: 0;
padding: 1em;
text-decoration: none;
border: 1px dotted navy;
font-size: 90%;
color: navy;
font-weight: bold;
width: 100%;
}

#navigation ul {
list-style: none;
padding: 0;
margin: 0;
background-color: #ffcc33;
overflow: hidden;
}

#navigation li {
float: left;
border: 1px solid black;
margin: 0;
}

#navigation a {
display: block;
padding: 1em;
}


#navigation a:link, #navigation a:visited; {
padding: 0em, 1em, 0em, 1em;
color:#FFFFFF;
background-color: #B51032;
text-decoration: none;
border: 1px solid #711515;
padding: 1em;
}

#navigation a:hover {
color: #FFFFFF;
background: #711515;
padding: 1em;
margin: 0;
}
</style>
</head!>


<div id="body">

<div id="header">

<div id="site name">

<h1>Hike Direct</h1>
</div>

<div id="tagline">
<p>Comprehensive hiking and outdoor info and advice</p>
</div><!-- end of div tagline --!>


</div><!-- end of div header --!>


<div id="navigation">
<ul>
<li><a href="hdindex.html">Home</a></li>
<li><a href="hdarticles.html">Articles</a></li>
<li><a href="whereto.html">Where to?</a></li>
<li><a href="hdblog.html">Blog</a></li>
<li><a href="directory.html">Product and merchant directory</a></li>
<li><a href="reviews.html">Reviews</a></li>
</ul>
</div><!-- end of div navigation --!>
</html>
3

Actually, I forgot #3. Here’s another example, with the menu spanning the whole page (although the page needs to be very wide to stop the second last item wrapping, so I wouldn’t make each LI the same width if I were you:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.DTD">
<html xmlns="http:www.w3.org/1999/xhtml">
<head>
<title>HikeDirect</title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/>
<style type="text/css" media="all">

body {margin: 0;}
#navigation {
text-decoration: none;
font-size: 90%;
color: navy;
font-weight: bold;
width: 100%;
border: 1px solid black;
}

#navigation ul {
list-style: none;
padding: 0;
margin: 0;
background-color: #ffcc33;
overflow: hidden;
width: 100%;
}

#navigation li {
float: left;
margin: 0;
width: 16.6%;
}

#navigation li.last {
width: 17%;
}

#navigation a {
display: block;
line-height: 2em;
border-right: 1px solid black;
text-align: center
}

#navigation .last a {
border-right: none;
}



#navigation a:hover {
color: #FFFFFF;
background: #711515;
}
</style>
</head!>


<div id="body">

<div id="header">

<div id="site name">

<h1>Hike Direct</h1>
</div>

<div id="tagline">
<p>Comprehensive hiking and outdoor info and advice</p>
</div><!-- end of div tagline --!>


</div><!-- end of div header --!>


<div id="navigation">
<ul>
<li><a href="hdindex.html">Home</a></li>
<li><a href="hdarticles.html">Articles</a></li>
<li><a href="whereto.html">Where to?</a></li>
<li><a href="hdblog.html">Blog</a></li>
<li><a href="directory.html">Product and merchant directory</a></li>
<li class="last"><a href="reviews.html">Reviews</a></li>
</ul>
</div><!-- end of div navigation --!>
</html>
4

Instead, I would suggest something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.DTD">
<html xmlns="http:www.w3.org/1999/xhtml">
<head>
<title>HikeDirect</title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/>
<style type="text/css" media="all">

body {margin: 0;}
#navigation {
text-decoration: none;
font-size: 90%;
color: navy;
font-weight: bold;
width: 100%;
border: 1px solid black;
}

#navigation ul {
list-style: none;
padding: 0;
margin: 0;
background-color: #ffcc33;
overflow: hidden;
width: 100%;
}

#navigation li {
float: left;
margin: 0;
}

#navigation li.last {
}

#navigation a {
display: block;
line-height: 2em;
border-right: 1px solid black;
padding: 0 1em;
}





#navigation a:hover {
color: #FFFFFF;
background: #711515;
}
</style>
</head!>


<div id="body">

<div id="header">

<div id="site name">

<h1>Hike Direct</h1>
</div>

<div id="tagline">
<p>Comprehensive hiking and outdoor info and advice</p>
</div><!-- end of div tagline --!>


</div><!-- end of div header --!>


<div id="navigation">
<ul>
<li><a href="hdindex.html">Home</a></li>
<li><a href="hdarticles.html">Articles</a></li>
<li><a href="whereto.html">Where to?</a></li>
<li><a href="hdblog.html">Blog</a></li>
<li><a href="directory.html">Product and merchant directory</a></li>
<li><a href="reviews.html">Reviews</a></li>
</ul>
</div><!-- end of div navigation --!>
</html>

Also, for future reference, you had some mistakes in your CSS that you need to watch out for:

list style: none;

should be

list-style: none;

This

#navigation a:link, #navigation a:visited[COLOR="Red"];[/COLOR] {
padding: 0em[COLOR="Red"],[/COLOR] 1em[COLOR="Red"],[/COLOR] 0em[COLOR="Red"],[/COLOR] 1em;

should be

#navigation a:link, #navigation a:visited {
padding: 0 1em 0 1em;

and that last line can in fact be simplified to

padding: 0 1em;
5

Thanks for the suggestions, ralph.

That was a great help.

The 1st example basically solved my problem and by trial and error in the LI width (in px), I was able make the whole set of links span the width of the page.

The 2nd example did more or less the same thing, only it was simpler than the first as it saves the trial and error associated with adjusting the LI width with px’s, by using % of screen width.

Also, I realized after I had posted my query that the 2nd to last LI had a really long title for a link, so I shortened it to ‘products’ and that solved the wrapping problem and the uniformity of the LI width, before I had even read your suggestions.

So obviously this helped when I made the changes to have the UL spanning the width of the page, and the LI width was set to 16.6%.

I suppose the lesson there is to keep your link titles short and sweet where possible when working with horizontal nav bars.

Anyhow, your suggestions worked a treat.

Much appreciated.

6

Yes, that does make life a lot easier. Glad to be of help. :slight_smile: