Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Senior Member
    Join Date
    Aug 2003
    Posts
    194
    Member #
    2782
    Hi Everyone,
    Maybe this seems elementary to someone out there, but as a CSS newbie I am lost trying to figure out how to fix this....

    I have a menu in CSS that has a divider line (an image) between the links. I do not want a divider line after the last menu item. How do I get rid of this?

    Here is the CSS for my menu:
    Code:
    #tabbed {
    	float:left;
    	width:800px;
    	line-height:normal;
    	padding-top: 13px;
    	padding-left: 170px;
    	height: 40px;
        }
    	  
    #tabbed ul {
    	margin:0;
    	padding:0px 0px 0;
    	list-style:none;
    	background-color: #000;
        }
    	  
    #tabbed li {
    	display:inline;
    	height: 40px;
    	padding-right: 0;
    	padding-bottom: 0;
    	padding-left: 0;
    	margin-right: 0;
    	margin-bottom: 0;
    	margin-left: 0;
            color: #666;
        }
    	  
    #tabbed a {
    	float:left;
    	margin:0;
    	padding:0 0 0 5px;
    	text-decoration:none;
    	color: #fff;
    	font-size: 11px;
            font-weight: bold;
            text-transform: uppercase;
            background: transparent url(uploads/images/vertical.gif) center right no-repeat;
        }
    	
    #tabbed a span {
    	float:left;
    	display:block;	
    	padding:5px 14px 17px 6px;
    	color:#fff;
    	margin-left: 2px;
         }
    
    #tabbed a span {
    	float:none;
    	}
       
    #tabbed a:hover span {
            color: #0066ff;
         }
    	  
    #tabbed a:hover {
    	background-position:0% -50px;
    	text-decoration: none;
            color: #0066ff;
            background: transparent url(uploads/images/vertical.gif) center right no-repeat;
         }
    	  
    #tabbed a:hover span {
    	background-position:100% -50px;
    	text-decoration: none;
            color: #0066FF;     
    }
    	  
    #special a:hover {
    	background-position:0% -50px;
    	text-decoration: none;
            color: #0066ff;
            background: transparent url(uploads/images/vertical.gif) center right no-repeat;
         }
    	  
    #special a:hover span {
    	background-position:100% -50px;
    	text-decoration: none;
         }
    	  
    #special a span {
    	float:none;
    	}
    
    #special a:hover span {
          color:#0066ff;
        }
    	  
    #special a {
    	float:left;
    	background-position:0% -50px;
    	margin:0;
    	padding:0 0 0 5px;
    	text-decoration:none;
    	color: #fff;
            background: transparent url(uploads/images/vertical.gif) center right no-repeat;
         }
    	  
    #special a span {
         float:left;
         display:block;
          background-position:100% -50px;
         padding:5px 14px 17px 6px;
         color:#fff;
         }
    Any help is immensely appreciated.

  2.  

  3. #2
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    I can't really make anything out of the CSS (we need the HTML!), but I think what you're looking for is the :last-child pseudo-class.

    Sadly it doesn't work with IE6. So you can either let IE6 have a line under the last, or you can also let jQuery change the class/style for you (using the :last-child selector as well).

    Or, the less elegant method would be to manually add an ID to the last item and override the selector in CSS. IDs have bigger priority, so that will override the class attributes, as such:

    HTML Code:
    <ul id="menu">
    <li><a href="#">Menu item</a></li>
    <li><a href="#">Foo</a></li>
    <li><a href="#">Bar</a></li>
    <li id="lastmenu"><a href="#">Last</a></li>
    </ul>
    And css:

    Code:
    ul#menu li{
      border-bottom: 1px solid red;
    }
    
    ul#menu li#lastmenu{
      border-bottom: none;
    }
    I don't know what your menu looks like, though (can you give a URL?) so I can't tell. This sample code is just the idea.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.


Remove Ads

Posting Permissions

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

Search tags for this page

how to get rid of last divider in website

Click on a term to search for related topics.
All times are GMT -6. The time now is 12:51 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com