SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: CSS Question

  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

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

  2. #2
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Arnhem, The Netherlands
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


    Quote Originally Posted by Hueij View Post
    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.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,795
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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.)

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

    Quote Originally Posted by Paul O'B View Post
    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;
    }

  6. #6
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Arnhem, The Netherlands
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry about being wrong but on the plus side, I learned something new... Thanks Paul.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,795
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by Hueij View Post
    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".


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •