Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > nesting instead of id ing??

Reply
Thread Tools

nesting instead of id ing??

 
 
Tim W
Guest
Posts: n/a
 
      02-05-2013
I am looking at the site template here:
http://www.html5-templates.co.uk/arc...mps/beadysite/
The Nav menu is in the html like this:

<ul>
<li>
<h2>Menu </h2>
<ul>
<li><a href="index.html">home</a></li>
<li><a href="#">about us</a></li>
<li><a href="#">blogs</a></li>
<li><a href="#">arcade</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">links</a></li>
<li><a href="#">contact us</a></li>
<li><a href="#">forums</a></li>
</ul>
</li>
</ul>

And the Nav has no id but is selected in the css as
#sidebar li li {.... }

I realise the futility of sometimes looking for purpose and design in a
world in which meaning is almost always elusive but here is my question:
Is it normal or common this nesting of lists instead of giving them a
class or an id? I have never seen it before. And Why?

Tim W
 
Reply With Quote
 
 
 
 
richard
Guest
Posts: n/a
 
      02-06-2013
On Tue, 05 Feb 2013 22:08:29 +0000, Tim W wrote:

> I am looking at the site template here:
> http://www.html5-templates.co.uk/arc...mps/beadysite/
> The Nav menu is in the html like this:
>
> <ul>
> <li>
> <h2>Menu </h2>
> <ul>
> <li><a href="index.html">home</a></li>
> <li><a href="#">about us</a></li>
> <li><a href="#">blogs</a></li>
> <li><a href="#">arcade</a></li>
> <li><a href="#">gallery</a></li>
> <li><a href="#">links</a></li>
> <li><a href="#">contact us</a></li>
> <li><a href="#">forums</a></li>
> </ul>
> </li>
> </ul>
>
> And the Nav has no id but is selected in the css as
> #sidebar li li {.... }
>
> I realise the futility of sometimes looking for purpose and design in a
> world in which meaning is almost always elusive but here is my question:
> Is it normal or common this nesting of lists instead of giving them a
> class or an id? I have never seen it before. And Why?
>
> Tim W


this is rather common.
the container for the list has the id of #sidebar.
the css now defines further by stating that only the second level of <li>
should have this format.
You might also see something like #diebar li {}, which would give the first
level of <li> an entirely different format.

If you had another nested list in another container, this css styling
method would have no effect on that list.
 
Reply With Quote
 
 
 
 
TimW
Guest
Posts: n/a
 
      02-11-2013
On Wednesday, February 6, 2013 1:47:26 AM UTC, richard wrote:
> On Tue, 05 Feb 2013 22:08:29 +0000, Tim W wrote:
>
>
>
> > I am looking at the site template here:

>
> > http://www.html5-templates.co.uk/arc...mps/beadysite/

>
> > The Nav menu is in the html like this:

>
> >

>
> > <ul>

>
> > <li>

>
> > <h2>Menu </h2>

>
> > <ul>

>
> > <li><a href="index.html">home</a></li>

>
> > <li><a href="#">about us</a></li>

>
> > <li><a href="#">blogs</a></li>

>
> > <li><a href="#">arcade</a></li>

>
> > <li><a href="#">gallery</a></li>

>
> > <li><a href="#">links</a></li>

>
> > <li><a href="#">contact us</a></li>

>
> > <li><a href="#">forums</a></li>

>
> > </ul>

>
> > </li>

>
> > </ul>

>
> >

>
> > And the Nav has no id but is selected in the css as

>
> > #sidebar li li {.... }

>
> >

>
> > I realise the futility of sometimes looking for purpose and design in a

>
> > world in which meaning is almost always elusive but here is my question:

>
> > Is it normal or common this nesting of lists instead of giving them a

>
> > class or an id? I have never seen it before. And Why?

>
> >

>
> > Tim W

>
>
>
> this is rather common.
>
> the container for the list has the id of #sidebar.
>
> the css now defines further by stating that only the second level of <li>
>
> should have this format.
>
> You might also see something like #diebar li {}, which would give the first
>
> level of <li> an entirely different format.
>
>
>
> If you had another nested list in another container, this css styling
>
> method would have no effect on that list.


My news server has conked out again. I posted the same message three tmes because I couldn't see it appear. Now I can't really get involved in any discussion except by google. Apologies, and thanks for the reply

Tim W
 
Reply With Quote
 
Gus Richter
Guest
Posts: n/a
 
      02-11-2013
On 2/5/2013 5:08 PM, Tim W wrote:
> I am looking at the site template here:
> http://www.html5-templates.co.uk/arc...mps/beadysite/
> The Nav menu is in the html like this:
>
> <ul>
> <li>
> <h2>Menu </h2>
> <ul>
> <li><a href="index.html">home</a></li>
> <li><a href="#">about us</a></li>
> <li><a href="#">blogs</a></li>
> <li><a href="#">arcade</a></li>
> <li><a href="#">gallery</a></li>
> <li><a href="#">links</a></li>
> <li><a href="#">contact us</a></li>
> <li><a href="#">forums</a></li>
> </ul>
> </li>
> </ul>
>
> And the Nav has no id but is selected in the css as
> #sidebar li li {.... }
>
> I realise the futility of sometimes looking for purpose and design in a
> world in which meaning is almost always elusive but here is my question:
> Is it normal or common this nesting of lists instead of giving them a
> class or an id? I have never seen it before. And Why?


It is all content within (nested in) a DIV ID'd as sidebar.

#sidebar li li {..rules..}
Says:
The rule(s) shall apply to the li which is a child of another li, which
in turn is a child of the id ID'd as sidebar.
(nested in = child of = descendant of)

All CSS 2.1 selectora:
<http://www.w3.org/TR/CSS2/selector.html>

Specific to your question - descendant-selector:
<http://www.w3.org/TR/CSS2/selector.html#descendant-selectors>

--
Gus


 
Reply With Quote
 
Tim W
Guest
Posts: n/a
 
      02-12-2013
On 11/02/2013 17:13, Gus Richter wrote:
> On 2/5/2013 5:08 PM, Tim W wrote:
>> I am looking at the site template here:
>> http://www.html5-templates.co.uk/arc...mps/beadysite/
>> The Nav menu is in the html like this:
>>
>> <ul>
>> <li>
>> <h2>Menu </h2>
>> <ul>
>> <li><a href="index.html">home</a></li>
>> <li><a href="#">about us</a></li>
>> <li><a href="#">blogs</a></li>
>> <li><a href="#">arcade</a></li>
>> <li><a href="#">gallery</a></li>
>> <li><a href="#">links</a></li>
>> <li><a href="#">contact us</a></li>
>> <li><a href="#">forums</a></li>
>> </ul>
>> </li>
>> </ul>
>>
>> And the Nav has no id but is selected in the css as
>> #sidebar li li {.... }
>>
>> I realise the futility of sometimes looking for purpose and design in a
>> world in which meaning is almost always elusive but here is my question:
>> Is it normal or common this nesting of lists instead of giving them a
>> class or an id? I have never seen it before. And Why?

>
> It is all content within (nested in) a DIV ID'd as sidebar.
>
> #sidebar li li {..rules..}
> Says:
> The rule(s) shall apply to the li which is a child of another li, which
> in turn is a child of the id ID'd as sidebar.
> (nested in = child of = descendant of)
>
> All CSS 2.1 selectora:
> <http://www.w3.org/TR/CSS2/selector.html>
>
> Specific to your question - descendant-selector:
> <http://www.w3.org/TR/CSS2/selector.html#descendant-selectors>
>


Yeah I can see how it works and i can see that it does work but I can't
see why you would ever want to select the menu like that instead of just
id-ing it. Why declare a list inside alist which isn't a list when you
can just call it what it is?

Is there any reason?

Tim w
 
Reply With Quote
 
Gus Richter
Guest
Posts: n/a
 
      02-12-2013
On 2/11/2013 7:32 PM, Tim W wrote:
> Yeah I can see how it works and i can see that it does work but I can't
> see why you would ever want to select the menu like that instead of just
> id-ing it. Why declare a list inside alist which isn't a list when you
> can just call it what it is?


Show how you would do it.

--
Gus


 
Reply With Quote
 
Tim W
Guest
Posts: n/a
 
      02-12-2013
On 12/02/2013 03:23, Gus Richter wrote:
> On 2/11/2013 7:32 PM, Tim W wrote:
>> Yeah I can see how it works and i can see that it does work but I can't
>> see why you would ever want to select the menu like that instead of just
>> id-ing it. Why declare a list inside alist which isn't a list when you
>> can just call it what it is?

>
> Show how you would do it.
>


Instead of:

<ul>
<li>
<h2>Menu </h2>
<ul>
<li><a href="index.html">home</a></li>
<li><a href="#">about us</a></li>
</ul>
</li>
</ul>

Why not:

<h2>Menu </h2>
<ul id="menu">
<li><a href="index.html">home</a></li>
<li><a href="#">about us</a></li>
</ul>

which istm is easier to understand, shorter, will be simpler to find in
the css and doesn't include a list of one item


 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      02-12-2013
Tim W wrote:
> On 12/02/2013 03:23, Gus Richter wrote:
>> On 2/11/2013 7:32 PM, Tim W wrote:
>>> Yeah I can see how it works and i can see that it does work but I can't
>>> see why you would ever want to select the menu like that instead of just
>>> id-ing it. Why declare a list inside alist which isn't a list when you
>>> can just call it what it is?

>>
>> Show how you would do it.
>>

>
> Instead of:
>
> <ul>
> <li>
> <h2>Menu </h2>
> <ul>
> <li><a href="index.html">home</a></li>
> <li><a href="#">about us</a></li>
> </ul>
> </li>
> </ul>
>
> Why not:
>
> <h2>Menu </h2>
> <ul id="menu">
> <li><a href="index.html">home</a></li>
> <li><a href="#">about us</a></li>
> </ul>
>
> which istm is easier to understand, shorter, will be simpler to find in
> the css and doesn't include a list of one item
>
>



Simple, because like a lot of "pro" templates it's not very *pro*. Case
in point the <br /> following the UL block element.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Tim W
Guest
Posts: n/a
 
      02-12-2013
On 12/02/2013 13:17, Jonathan N. Little wrote:
> Tim W wrote:
>> On 12/02/2013 03:23, Gus Richter wrote:
>>> On 2/11/2013 7:32 PM, Tim W wrote:
>>>> Yeah I can see how it works and i can see that it does work but I can't
>>>> see why you would ever want to select the menu like that instead of
>>>> just
>>>> id-ing it. Why declare a list inside alist which isn't a list when you
>>>> can just call it what it is?
>>>
>>> Show how you would do it.
>>>

>>
>> Instead of:
>>
>> <ul>
>> <li>
>> <h2>Menu </h2>
>> <ul>
>> <li><a href="index.html">home</a></li>
>> <li><a href="#">about us</a></li>
>> </ul>
>> </li>
>> </ul>
>>
>> Why not:
>>
>> <h2>Menu </h2>
>> <ul id="menu">
>> <li><a href="index.html">home</a></li>
>> <li><a href="#">about us</a></li>
>> </ul>
>>
>> which istm is easier to understand, shorter, will be simpler to find in
>> the css and doesn't include a list of one item
>>
>>

>
>
> Simple, because like a lot of "pro" templates it's not very *pro*. Case
> in point the <br /> following the UL block element.
>


I presume you are saying it's neater to separate elements with css than
by just bunging in a <br/> ? I am sure you are right but it's a finer
point really. This template was a bit of a muddle when I came to look at
it. Classes in the html not mentioned in the css, and classes and ids in
the css which weren't in the html, missing images, bits of redundant
junk code presumably from a previous use. But it's free.

Tim ?w
 
Reply With Quote
 
Gus Richter
Guest
Posts: n/a
 
      02-12-2013
On 2/12/2013 6:55 AM, Tim W wrote:
> On 12/02/2013 03:23, Gus Richter wrote:
>> On 2/11/2013 7:32 PM, Tim W wrote:
>>> Yeah I can see how it works and i can see that it does work but I can't
>>> see why you would ever want to select the menu like that instead of just
>>> id-ing it. Why declare a list inside alist which isn't a list when you
>>> can just call it what it is?

>>
>> Show how you would do it.
>>

>
> Instead of:
>
> <ul>
> <li>
> <h2>Menu </h2>
> <ul>
> <li><a href="index.html">home</a></li>
> <li><a href="#">about us</a></li>
> </ul>
> </li>
> </ul>
>
> Why not:
>
> <h2>Menu </h2>
> <ul id="menu">
> <li><a href="index.html">home</a></li>
> <li><a href="#">about us</a></li>
> </ul>
>
> which istm is easier to understand, shorter, will be simpler to find in
> the css and doesn't include a list of one item


I understand now what you meant. Let's assume that he started off as you
did and then decided that he wanted the extra white space after the h2.
Since there are three other h2 for which he gave zero margins, he would
have to give the Menu h2 an id in order to cancel and/or readjust to his
liking. He may then have decided that it would be just as simple/handy
to use the h2 in another list item. There are many ways to skin a cat
and as long as it works ...... but I get your point.

--
Gus


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
nesting instead of id ing Tim W HTML 0 02-06-2013 12:44 PM
nesting instead of id ing?? Tim W HTML 1 02-05-2013 11:43 PM
Module.nesting -> Kernel#nesting Trans Ruby 10 09-16-2005 12:21 AM
group nesting David K MCSE 6 12-12-2003 04:54 PM
Nesting object tags in ASP 3.0, ASP.NET & Internet Explorer DeadlyTedly ASP .Net 2 10-16-2003 08:32 AM



Advertisments