Multiiple ul within 1 page.

[Lee7997]

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

[behati]

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:

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:

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:

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?

[Lee7997]

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

[behati]

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.

[Stevie D]

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:

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

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.

[behati]

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

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

[Lee7997]

Thanks Folks. All worked fine