how to do nested lists
in [CSS]
|
Prev: Shrink-to-fit width calculation: preferred width question
Next: International Conference WWW/Internet 2010: 1st call extension until 25 June 2010
From: coltrane on 13 Jun 2010 19:20 On 6/13/2010 4:33 PM, Thomas 'PointedEars' Lahn wrote: > coltrane wrote: > >> Adrienne Boswell wrote: >>> <ul> >>> <li>something >>> <ul> >>> <li>something</li> >>> </ul> >>> </li> >>> </ul> >>> Is correct >>> >>> ul {list-style-type: bullet;} >>> ul li ul {list-style-type: square;} >> >> what you describes works. I thought that the inner<ul> should be nested >> in line items: >> >> <ul> >> <li>something</li> >> <li> >> <ul> >> <li>something else<\li> > ^^^^^ >> </ul> >> </li> >> </ul> >> >> now this definitely doesn't work. > > It would have worked had you used the correct end tag. Adrienne's > suggestion is not that different from your code; however, it is more > semantic. I strongly suggest that you indent and validate your code: > > <http://validator.w3.org/> > >> Your solution does work. I guess go with what works. > > You should *learn* how to do a thing properly, thus *know* *why* something > works, and should _not_ rely on guesses. > > > PointedEars I just threw something together quickly for the post. It is not the code I would use.
From: coltrane on 13 Jun 2010 19:21 On 6/13/2010 4:36 PM, Jukka K. Korpela wrote: > coltrane wrote: > >> I thought that the inner <ul> should be >> nested in line items: > > It _is_ nested there in the markup you quoted. > >> <li>something else<\li> > > That, in turn, is incorrect. Do you see the problem with "\" vs. the > correct "/"? > Yes I see that. It was a typo in the post. I didn't have that in my page.
From: coltrane on 13 Jun 2010 19:50 On 6/13/2010 4:33 PM, Thomas 'PointedEars' Lahn wrote: > coltrane wrote: > >> Adrienne Boswell wrote: >>> <ul> >>> <li>something >>> <ul> >>> <li>something</li> >>> </ul> >>> </li> >>> </ul> >>> Is correct >>> >>> ul {list-style-type: bullet;} >>> ul li ul {list-style-type: square;} >> >> what you describes works. I thought that the inner<ul> should be nested >> in line items: >> >> <ul> >> <li>something</li> >> <li> >> <ul> >> <li>something else<\li> > ^^^^^ >> </ul> >> </li> >> </ul> >> >> now this definitely doesn't work. > > It would have worked had you used the correct end tag. Adrienne's > suggestion is not that different from your code; however, it is more > semantic. I strongly suggest that you indent and validate your code: > > <http://validator.w3.org/> > >> Your solution does work. I guess go with what works. > > You should *learn* how to do a thing properly, thus *know* *why* something > works, and should _not_ rely on guesses. > > > PointedEars using: ul {list-style-type:circle} ul li ul {list-style-type: square;} <body> <div> <ul> <li>Item one</li> <li> <ul> <li>Sub Item One</li> </ul> </li> <li>Item two</li> <li>Item three</li> </ul> </div> </body> This does not work and from the little, very little, I know it should. Sorry about the typo and the formatting. I have seemed to have offended many. As for knowing why something works, that is why I am posting this question. I am just starting, page one, to learn CSS.
From: Thomas 'PointedEars' Lahn on 13 Jun 2010 21:16 coltrane wrote: > using: > ul {list-style-type:circle} > ul li ul {list-style-type: square;} > > <body> > <div> > <ul> > <li>Item one</li> > <li> > <ul> > <li>Sub Item One</li> > </ul> > </li> > <li>Item two</li> > <li>Item three</li> > </ul> > </div> > </body> > > This does not work "Does not work" is a useless error description. It works for me with several user agents (even though it is not semantical¹). BTW, you can lose the `li' in the selector; in Valid (X)HTML markup, a UL/ul element must have at least one child LI/li element, so that is implied. ¹ A semantical nested list as for a menu would be <ul> <li>Item one <ul> <li>Sub Item One</li> </ul> </li> <li>Item two</li> <li>Item three</li> </ul> as Adrienne already indicated. > and from the little, very little, I know it should. And it does, if these code blocks are part of Valid markup. The parent `div' element is superfluous, BTW. > Sorry about the typo and the formatting. ACK(nowledged) > I have seemed to have offended many. Well, at least not me. Do not confuse being corrected by people with having offended people. The reverse is true: If people actually took the(ir free) time to correct you and give you hints how to do better, you showed some promise :) <http://www.catb.org/~esr/faqs/smart-questions.html> > As for knowing why something works, that is why I am posting this > question. I am just starting, page one, to learn CSS. Perhaps you should start with simpler things, and get to the CSS cascade later. PointedEars -- Prototype.js was written by people who don't know javascript for people who don't know javascript. People who don't know javascript are not the best source of advice on designing systems that use javascript. -- Richard Cornford, cljs, <f806at$ail$1$8300dec7(a)news.demon.co.uk>
From: dorayme on 13 Jun 2010 21:26
In article <4c156ea1$0$22551$607ed4bc(a)cv.net>, coltrane <tendengarci(a)yahoo.com> wrote: > I have seemed to have offended > many. Why would you think this? Perhaps there are posts I am not seeing. -- dorayme |