Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jun 2011
    Posts
    33
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Styling an HTML list class within a class using CSS

    I have a sidebar list on a HTML page. When you are on a certain list item the active item should be a different colour from the other items.

    The final list item has its own class and I am unsure as to how to apply the active sidebar CSS styling without interfering with its existing class.

    I have attached a copy of the list along with the associated styling for all the elements below:-

    The HTML list
    Code:
    <ul class="arrowList">
    					<li><a href="index.html" title="">Home</li>
    					<li><a href="page1.html" title="">Page 1</li>
    					<li><a href="page2.html" title="">Page 2</li>
    					<li><a href="page3.html" title="">Page 3</li>
    					<li class="activeSidebarItem">Page 4</li>
    					<li class="noBottomBorder"><a href="page5.html" title="">Page 5</a></li>
    				</ul>
    The relevant CSS
    Code:
    .noBottomBorder {
    	border-bottom: none !important;
    	overflow: hidden;
    }
    
    ul.arrowList {
    		background: url('../img/sidebarGradBG.png') 0 0 repeat-x;
    	}
    
    	ul.arrowList li {
    		border-bottom: 1px solid #e1e5e9;
    		padding: 14px 20px;
    		background: url('../img/sidebarPointRed.png') 92% center no-repeat;
    	}
    	
    	li.activeSidebarItem {
    		background: url('../img/sidebarPointDark.png') 92% center no-repeat !important;
    		font-weight: bold;
    		color: #62656b;
    	}
    Can anyone help?

    Sorry for the poor use of any terminology that may exist.

    Thanks

    nevblanc79

  • #2
    Senior Coder
    Join Date
    Dec 2005
    Location
    Slovenia
    Posts
    1,960
    Thanks
    120
    Thanked 76 Times in 76 Posts
    note : you can do:

    Code:
    class = "classa classb"
    And both styles are applied to element.

    That might help you in your direction
    Found a flower or bug and don't know what it is ?
    agrozoo.net galery
    if you don't spot search button at once, there is search form:
    agrozoo.net galery search

  • #3
    New Coder
    Join Date
    Jun 2011
    Posts
    33
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks for that. It totally worked.

    However, It has now changed the entire colour of the main content.

    Do you think this is to do with the overflow:hidden in the noBottomBorder class and if so how could I go about sorting it?

    Thanks,

    nevblanc79


  •  

    Posting Permissions

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