SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Location
    Scotland
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multiiple ul within 1 page.

    I am having a complete brain freeze over this one, think I have looked at it too long, although I have yet to try it, but I know it wont work yet.

    Want to put 2 unordered lists on 1 page, they are in seperate divs and I have given each their own class as <ul class ="nav"> and <ul class = "nav1">

    So within the style sheet I would state ul as either ul.nav or ul.nav1 however do I need to do this for everything, i.e.

    a.nav
    a.nav1

    a.nav:hover
    a.nav1:hover

    and so on...

    I guess I would need to also do the same for the <li> ?

    I dont know, I just felt there was a simpler way to identify seperate lists?

    Cheers

    Lee
    Free2host.co.uk - My longest ever project at 10 years

  2. #2
    SitePoint Zealot behati's Avatar
    Join Date
    Feb 2012
    Location
    Copenhagen, Denmark
    Posts
    152
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hey there,

    I'm not sure what you're trying to do (the details) but yeah in theory assigning a class to your ul will allow you to style all the instances of unordered lists that inherit that class. I'm not sure why you have a.nav and a.nav1 - are you styling the hyperlinks (a tags) in your list? If so, you should use this markup to identify the a tags within that ul class:
    Code:
    ul.nav li a { css for all links in ul nav class goes here }
    ul.nav1 li a {css for all  links in ul nav1 class goes here }
    
    ul.nav li a:hover { css for all link mousehovesr  in the nav class ul goes here e.g: text-decoration: underline; }
    This is because your links within the unordered list will always be in a <li></li> (list item) tag (or should be, rather). So the <a> tag is within the <li> tag which is within the <ul> tag. The same goes for any other styling:
    Code:
    ul.nav li { font-weight: bold; color: Red; }
    ul.nav li { color: Blue; }
    you can even use a custom background image to replace the standard HTML list icons:

    Code:
    ul.nav { list-style: none; padding: 0; }
    ul.nav li {background-image:url( urltoimage ); }
    Finally, there is a quicker way. It all comes down to how "generalizing" you are, or how specific your css attributes need to be. For example if all the <ul> classes on the page share some attributes, you could easily define a CSS rule for all the <ul> classes - because of the way CSS "inherits" and overwrites styling, you could then specify only the unique attributes in the ul.nav and ul.nav1 class stylings, and the rest they would inherit from the general unordered list class (which in turn, you can also overwrite to suit your needs by simply creating .ul { cssrules } ).


    Hope that helps! or did I misunderstand what you are attempting?

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Location
    Scotland
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your right Behati, thats what I am doing, just had something going on in my head there was a different way to do it. Mind you, I never know what goes on in my head sometimes so what chance have you got
    Free2host.co.uk - My longest ever project at 10 years

  4. #4
    SitePoint Zealot behati's Avatar
    Join Date
    Feb 2012
    Location
    Copenhagen, Denmark
    Posts
    152
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Lee7997 View Post
    Your right Behati, thats what I am doing, just had something going on in my head there was a different way to do it. Mind you, I never know what goes on in my head sometimes so what chance have you got
    Haha, we all know the feeling.. having messed with one specific detail for some time, in the end you don't know what's up and what's down and the best thing to do is to take a break and collect your thoughts! (Which may result in missing deadlines, which then results in more stress and oh dear..... )

    PS: I edited my above post with some more examples / explanation.

  5. #5
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by behati View Post
    I'm not sure what you're trying to do (the details) but yeah in theory assigning a class to your ul will allow you to style all the instances of unordered lists that inherit that class. I'm not sure why you have a.nav and a.nav1 - are you styling the hyperlinks (a tags) in your list? If so, you should use this markup to identify the a tags within that ul class:
    Code:
    ul.nav li a { css for all links in ul nav class goes here }
    ul.nav1 li a {css for all  links in ul nav1 class goes here }
    
    ul.nav li a:hover { css for all link mousehovesr  in the nav class ul goes here e.g: text-decoration: underline; }
    This is because your links within the unordered list will always be in a <li></li> (list item) tag (or should be, rather). So the <a> tag is within the <li> tag which is within the <ul> tag.
    Not quite true - you don't need the 'li' in the CSS there. Yes, the <a> is inside the <li>, and the <li> is inside the <ul>, but it's also true that the <a> is inside the <ul>, so you can just use
    Code:
    ul.nav a {...}
    The shorter you can keep your declarations, the better. For a start, it makes them easier to maintain, update and troubleshoot - for a second, it means less work for the visitor's computer to have to do in decoding the instructions.

  6. #6
    SitePoint Zealot behati's Avatar
    Join Date
    Feb 2012
    Location
    Copenhagen, Denmark
    Posts
    152
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    Not quite true - you don't need the 'li' in the CSS there. Yes, the <a> is inside the <li>, and the <li> is inside the <ul>, but it's also true that the <a> is inside the <ul>, so you can just use
    Code:
    ul.nav a {...}
    You're absolutely right, maybe I wasn't clear on that but my point was (mentioned in the end of the post) that the CSS rules can overwrite eachother depending on how general you are while writing them, thus going "down" in inheritance (ul > li > a) or as I mentioned just generally applying (ul > any css) is different and depends on how specific you need to be. This is because in his original post he mentioned having to set rules for all the tags, and this is an example of yes and no.

    Sorry if that wasn't clear and thanks for pointing it out

  7. #7
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Location
    Scotland
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Folks. All worked fine
    Free2host.co.uk - My longest ever project at 10 years


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
  •