CSS Question

I’m trying to create a horizontal navigation bar with rollover states. I almost have it working the way that I want. The bar has a set height, width and color. However because I didn’t want to set specific widths for my list items the very last link, when hovered over, is creating a small gap between the end of it and the end of the bar which is displaying the color of the bar. Is there a way that I’m missing to get that last link’s hover color to flow to the end of the bar without setting specific widths?

Below is my HTML & CSS:

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<title>Untitled Document</title>
		<link href="css/demo.css" rel="stylesheet" type="text/css">
		<!--[if lt IE 9]>
			<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>
	<body>
		
		<div id="wrap">
			<nav>
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">About Us</a></li>
					<li><a href="#">Corporate</a></li>
					<li><a href="#">Personal</a></li>
					<li><a href="#">Not-For-Profit</a></li>
					<li><a href="#">Business Advisory</a></li>
					<li><a href="#">Ask Us A Question</a></li>
					<li><a href="#">Contact Us</a></li>
				</ul>
			</nav>	
		</div>
	</body>
</html>
@charset "UTF-8";

/* HTML5 */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block; }

/* GENERIC ELEMENTS */
body { margin: 0; }



ul { padding:0; margin:0; }

	
/* BASICS */
#wrap {
	width: 960px; 
	margin-right: auto; 
	margin-left: auto; 
}

#wrap nav {
	margin-bottom: 10px;
	height: 40px;
	line-height: 40px;
	border: 1px solid #cccccc;
	background-color: #CCC;
}

#wrap nav ul li {
	float: left;
	list-style-type: none;
}

#wrap nav ul li a {
	display: block;
	padding-left: 20px;
	padding-right: 20px;
	color: #666666;
	text-decoration: none;
}
#wrap nav ul li a:hover {
	color: #FFF;
	background-color: #C30;
}

Are you sure the code you posted is correct? The last link (Contact us) is dropped to the next line, at least in Firefox. When I change the padding of the links to 19px it all fits.

But AFAIK there is no way to extend the width of the last link to the end of the bar without setting explicit widths to it.

Yes I’m sure the code is right. None of my versions of Firefox display the last link dropping to another line. Oh, well, this particular example was only for example purposes anyway.

That’s what I had thought but thanks for confirming it just wanted to make sure there wasn’t an option that I hadn’t thought of. :slight_smile:

HI,

Yes you can extend the last item to the end of the bar quite easily. You just have to un-float it and then set overflow:hidden which will allow it to fill the remaining space.


#wrap nav li.last{
    float:none;
    overflow:hidden;
    zoom:1.0;
}


<li class="last"><a href="#">Contact Us</a></li>

Full code:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css/demo.css" rel="stylesheet" type="text/css">
<style>
@charset "UTF-8";
/* HTML5 */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display:block;
}
/* GENERIC ELEMENTS */
body {
    margin: 0;
}
ul {
    padding:0;
    margin:0;
}
/* BASICS */
#wrap {
    width: 960px;
    margin-right: auto;
    margin-left: auto;
}
#wrap nav {
    margin-bottom: 10px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #cccccc;
    background-color: #CCC;
}
#wrap nav ul li {
    float: left;
    list-style-type: none;
}
#wrap nav ul li a {
    display: block;
    padding-left: 20px;
    padding-right: 20px;
    color: #666666;
    text-decoration: none;
}
#wrap nav ul li a:hover {
    color: #FFF;
    background-color: #C30;
}

#wrap nav li.last{
    float:none;
    overflow:hidden;
    zoom:1.0;
}
</style>
<!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
</head>
<body>
<div id="wrap">
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Corporate</a></li>
            <li><a href="#">Personal</a></li>
            <li><a href="#">Not-For-Profit</a></li>
            <li><a href="#">Business Advisory</a></li>
            <li><a href="#">Ask Us A Question</a></li>
            <li class="last"><a href="#">Contact Us</a></li>
        </ul>
    </nav>
</div>
</body>
</html>

(See how html5 leads to code bloat. You have three wrappers for that list and all you really need is the parent ul - the others are superfluous as far as styling is concerned.)

Thanks Paul!

That did the trick. I was staring at this yesterday sure there was a way to do it and when all my tinkering didn’t help I just thought it wasn’t possible. Turned out to be easy as pie. Doh!

Sorry about being wrong but on the plus side, I learned something new… Thanks Paul.

No need to apologise, I often say “I don’t think you can do that” and then someone comes a long as says “yes you can do it this way”.:slight_smile: