SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Sep 2008
    Location
    Rudgwick, UK
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Better / Cleaner way to do this?

    Hi,

    I'm trying to work out a better way to do the following:

    Code:
    #menu ul, 
    #menu ul li ul, 
    #menu ul li ul li ul,
    #menu ul li ul li ul li ul, 
    #menu ul li ul li ul li ul li ul ,
    #menu ul li ul li ul li ul li ul li ul, 
    #menu ul li ul li ul li ul li ul li ul li ul,  
    #menu ul li ul li ul li ul li ul li ul li ul li ul, 
    #menu ul li ul li ul li ul li ul li ul li ul li ul li ul, 
    #menu ul li ul li ul li ul li ul li ul li ul li ul li ul li ul,
    #menu ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul,
    #menu ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul,
    #menu ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul,
    #menu ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul,
    #menu ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul
    
    {
    	margin-left: 0;
    	padding-left: 0;
    	display: none; /* hide them to start with */
    	list-style-type: none;
    }
    
    #menu li,
    #menu li > li, 
    #menu li li li,
    #menu li li li li,
    #menu li li li li li,
    #menu li li li li li li,
    #menu li li li li li li li,
    #menu li li li li li li li li,
    #menu li li li li li li li li li,
    #menu li li li li li li li li li li,
    #menu li li li li li li li li li li li,
    #menu li li li li li li li li li li li li,
    #menu li li li li li li li li li li li li li,
    #menu li li li li li li li li li li li li li li,
    #menu li li li li li li li li li li li li li li li
    
     {
    	padding-left: 27px; /* 18 */
    	min-height: 30px;
    }
    Its for a sitemap feature I've written, and it can have up to 10 children inside each element (all whome need the same CSS applied to them). Is there a better way to do this?

    TIA

    Andy

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,725
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    BTW, very neat formatting....but WHY??!??!?


    The C in CSS stands for cascading, selectors cascade rules down in order of specificity.

    all you really need ( if in deed you are applying the same rule to all the LIs and all the UL within #menu) is this:

    Code:
    #menu ul{
    	margin-left: 0;
    	padding-left: 0;
    	list-style-type: none;
    }
    
    #menu li {
    	padding-left: 27px; /* 18 */
    	min-height: 30px;
    }
    
    /* I would also do this since I think you are trying to make a drop down. if, for some reason,  you were trying to hide ALL ULs to start with  ( or if #menu  is the root UL) just put this declaration with the original UL rules*/
    #menu li>ul{	display: none; /* hide them to start with */}
    BTW, #menu li>li would never happen as an LI can only be a child of a UL or OL.


    hope that helps

  3. #3
    SitePoint Addict
    Join Date
    Sep 2008
    Location
    Rudgwick, UK
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Eugh, why didn't that work the last time I tried it! Worked perfectly this time - thanks

    Regarding all the sub-elements... these don't actually exist to start with (they are loaded into the page with an AJAX call.... due to the fact there are gonna be thousands of pages that it needs to store, so it wouldn't be practical to have them all loaded at the start.

    Thanks again - maybe I should have taken my coffee break

    Andy


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
  •