CSS Question

**yukino_girl** · May 19, 2011 13:12

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:

Code HTML4Strict:

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

Code CSS:

@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;
}

**Hueij** · May 19, 2011 15:39

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.

**yukino_girl** · May 19, 2011 16:22

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.

Originally Posted by Hueij

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.

**Paul O'B** · May 20, 2011 00:21

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.

Code:

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

Code:

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

Full code:

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

**yukino_girl** · May 20, 2011 09:33

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!

Originally Posted by Paul O'B

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.

Code:

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

**Hueij** · May 21, 2011 13:22

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

**Paul O'B** · May 22, 2011 03:37

Originally Posted by Hueij

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

User Tag List

Thread: CSS Question

Thread Tools

Display

CSS Question

Bookmarks

Bookmarks

Posting Permissions