SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    134
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    list w/ images as seperators, how to make last li with no seperator?

    Hi,
    I am wondering how I would go about properly creating a list, where images are the separator, and not have either the leading or trailing last div with that image separator.

    I thought of creating basically an ending id or glass where the background attribute is set to none, and associating that with the respective li element, however it did not work.

    My CSS Code is as follows:
    Code:
    #topmenu ul {
    list-style:none;
    margin:0;
    padding:0;
    }
    
    #topmenu li {
    float:left;
    background:url(../images/topmenu_seperator.gif) center right no-repeat;
    padding:0px 4px;
    }
    #topmenu li a {
    color:#ACC61C;
    text-decoration:none;
    }
    
    #topmenu li a:hover {
    color:#ACC61C;
    text-decoration:underline;
    }
    
    .last {
    background:none;
    }
    and my html is as follows:
    Code:
    	<div id="topmenu">
        	<ul>
            	<li><a href="#" title="TITLE">Title</a></li>
                <li><a href="#" title="TITLE">Title</a></li>
                <li><a href="#" title="TITLE">Title</a></li>
                <li><a href="#" title="TITLE">Title</a></li>
                <li class="last"><a href="#" title="TITLE">Title</a></li>
            </ul>
        <!-- #topmenu ends -->
        </div>
    any insight is appreciated

  2. #2
    SitePoint Enthusiast
    Join Date
    Aug 2005
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think its a specificity issue. Try using:

    #topmenu li.last {
    background:none;
    }


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
  •