Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   HTML (http://www.velocityreviews.com/forums/f31-html.html)
-   -   nesting instead of id ing?? (http://www.velocityreviews.com/forums/t957321-nesting-instead-of-id-ing.html)

Tim W 02-05-2013 10:08 PM

nesting instead of id ing??
 
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

richard 02-06-2013 01:47 AM

Re: nesting instead of id ing??
 
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.

TimW 02-11-2013 04:01 PM

Re: nesting instead of id ing??
 
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

Gus Richter 02-11-2013 05:13 PM

Re: nesting instead of id ing??
 
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



Tim W 02-12-2013 12:32 AM

Re: nesting instead of id ing??
 
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

Gus Richter 02-12-2013 03:23 AM

Re: nesting instead of id ing??
 
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



Tim W 02-12-2013 11:55 AM

Re: nesting instead of id ing??
 
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



Jonathan N. Little 02-12-2013 01:17 PM

Re: nesting instead of id ing??
 
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

Tim W 02-12-2013 03:22 PM

Re: nesting instead of id ing??
 
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

Gus Richter 02-12-2013 04:58 PM

Re: nesting instead of id ing??
 
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




All times are GMT. The time now is 04:51 PM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.