SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2009
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ul li ul li ul li a aaaaaugh

    i feel like i'm missing something with nested lists as menus.. i find myself styling the uls, the ul lis, the ul lis as, the ul li uls, the ul li ul li as, maybe even some ul ul li a il lus? and it seems kinda disorganized and doesn't quite make sense to me where which sorts of styles should go and whether they actually have to get split up like that. I think that inheritence rules also add another level of complexity. maybe i'm just botching it (have a look through my css and see if you agree perhaps). but is there a sort of rundown of general practices on that somewhere? example code is great, but hard to make generalized rules out of. if i can get this figured out i think i may write an article or something out of it.

    also i'm having a bit of a related snafu with my slowly slowly being constructed site... i used this article as a guide to set up a php driven currentpage id, but having trouble using it as flexibly as i might like.

    #menu #currentpage a{ will work,
    but i'm trying to find a combination of '#menu #currentpage ul li ul li a' so that the nested list can have a different style from the main list.. (right now i have it styled for the nested ones, which works for the most part but you can see how it breaks on the 'contact' page since that's the only top level page i have so far)

    thanks a bigton

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Well, instead of ul li ul li a can you shorten it to li li a?

    Example:
    Code css:
    #footermenu ul li ul li {padding:0px;}
     
    #footermenu li li {padding:0px;} /* same thing */
    Particularly if you have something with an ID at the top, it should be possible. Also, the inheritance really should make things easier. If this is for a navigation menu, then the colour, background, etc. stuff should stay the same, and only the odd extra bit should change (padding, border perhaps).

    Also, an ID is unique, so this is redundant:

    Code css:
    #menu ul li ul li #currentpage a{
    color:#39F;
    }
     
    /* should be: */
    #currentpage a {
    color:#39F;
    }

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    Styling nested lists is no different form styling nested divs or anything else for that matter. You just have to keep an eye on what level you are at.

    In your code you have this:

    Code:
    #menu #currentpage a {
        color:#700;
        padding-left:2px;
    }
    #menu ul li ul li #currentpage a {
        color:#39F;
    }
    You were nearly right with the second rule but the id is attached to the list and you missed it. There would need to be another level for that to work.

    It should be:

    Code:
    #menu #currentpage a {
        color:#700;
        padding-left:2px;
    }
    #menu ul li ul li#currentpage a {
        color:#39F;
    }
    However you don't need to go overboard as you only need to be one level deeper than the first rule.

    e.g.
    Code:
    #menu #currentpage a {
        color:#700;
        padding-left:2px;
    }
    #menu li li#currentpage a {
        color:#39F;
    }
    or:

    Code:
    #menu #currentpage a {
        color:#700;
        padding-left:2px;
    }
    #menu li  #currentpage a {
        color:#39F;
    }
    Whether you use ul li ul depends on whether you are targeting the ul or the list. uls will contain nested uls and lists will also contain nested lists. It all depends on what element you want to hit.

    You could say "ul li ul" but "li ul" is shorter and targets the same element because a nested ul will always be inside a list element.

    You could also say "li ul li" but "li li" would again be shorter.

    The rules would be the same for nested divs and if you said div {color :red} you would over-ride the inner element with div div {color:blue}.

    Don't let it sound more complicated than it is.

    Edit:


    too slow....Raffles beat me

  4. #4
    SitePoint Zealot
    Join Date
    Feb 2009
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the clarification there... i'd never been aware that the id had to go right on the element like that.. i had thought there could be spaces between when using ids or classes.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    i'd never been aware that the id had to go right on the element like that
    It doesn't need to be attached to the element at all but saying "li #something" is not the same as saying "li#something". "li #something" is equivalent to "li li#somwething" (assuming the second element is a list of course).

    Although ids are unique to the page you are looking to style them differently depending on where they appear so you must have a correct path to make it happen

  6. #6
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    This was trouble I had when I first went into dropdowns... the first ones I'd ever used were Stu Nichols', and it confuzled me to no end.

    What helps is using the same system and maybe the same order for every dropdown you use. I also indent children (I haven't seen anyone else do this, so it's just me, but helps me read).

    Code:
    /*top level stuff... even if it trickles down to hit sub levels*/
    ul {
      styles;
    }
    
            li {
              styles;
            }
                    li.class {
                      special styles;
                    }
    
            ul a {
              styles;
            }
                    ul a:focus, ul a:hover {
                      styles;
                    }
    
    ul ul {
      sub styles;
      usually off-screen;
    }
    
            ul ul li {
              sub li styles;
            }
    
           /*only mention if they need to be different from mains*/
            ul ul a {
              sub anchor styles;
            }
                    /*only mention if they need to be different from mains*/
                    ul ul a:focus, ul ul a:hover {
                      sub anchor styles;
                    }
    
    li:hover ul {
      subs onscreen;
    }
    
    (if you're making it keyboard accessible it gets more complicated)
    Whatever, every dropdown you find out there looks a little different, but it will make the most sense to you if you always or almost always use the same order and the same style of selector usage (if you use "ul ul" to refer to the sub ul then don't later switch to "li ul" etc).


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
  •