Click here to get back home

2nd List Doesn't Work
 Home | NewsGroups | Search | About
Login Password
Register Now!
 comp.infosystems.www.authoring.html    Post an article   get this group's latest topics as an RSS feed add this group's latest topics to your My MSN content add this group's latest topics to your My Yahoo content
Subject Author Date
2nd List Doesn't Work Michael R. Copeland 03-30-2008
Posted by rf on March 31, 2008, 2:20 am
Please log in for more thread options
>> > The following code doesn't work as I want, because the 2nd list
>> > doesn't appear as a "list" (no bullets) and requires the <br> after
>> > each
>> > item to appear as a vertical list of items.
>>
>> > li
>> > li.list {margin-left: 60px}
>>
>> Have a very carefull think about what the first of the above two rules
>> does.
>
> I did, and I tried to have 2 distinct "li" declarations: li.menu and
> li.list. When I did so, it destroyed the "li" that manipulates my
> horizontal menu at the top of the page (the "display:inline"
> declaration), and I wound up with a bulleted vertical list of the menu
> items. I couldn't figure out a way to declare 2 "li" types, and I had
> to revert to the posted code (which at least handles my menu list).
> <sigh>

Here is where a URL is mandatory for from the code you supply and the
description you give it should work. In other words: I don't believe you
:-)

li.menu {display: inline;} will *only* affect list items with class "menu".

> To respond to your answer, does it mean that the first rule applies
> to _all_ "li" rules - and that the second is a subset of it? If so, how
> _do_ I declare 2 separate and different rules for the "li"/"ul" sets
> that do different things (other than what I tried)? TIA

Yes, and the subset is those li's who specify class="list", but I would do
it differently:

<ul class=menu>
<li> ...
<li> ...

<ul class=list>
<li> ...
<li> ...

and then

.menu li {/* style rule for li elements inside anything with class "menu"*/
display: inline; ...}
.list li {/* style rule for li elements inside anything with class "list" */
...}

Saves lots of typing and bandwidth and is what selectors are designed for.

--
Richard.



Posted by Andy Dingley on March 31, 2008, 6:58 am
Please log in for more thread options
 On 31 Mar, 04:34, mrc2...@cox.net (Michael R. Copeland) wrote:
> The following code doesn't work as I want, because the 2nd list
> doesn't appear as a "list" (no bullets)

Your selector is a bit promiscuous.

> li

is well over the top! That will affect every <li>

Also this use of class attributes on every list element is excessive
> <ul>
> <li class="list">118 units with balconies<br></li>
> <li class="list">Large heated pool<br></li>

when you can use this instead:
<ul class="list" >
<li>...
<li>...
<li>...
<li>...
</ul>


To fix your selector problem, instead use something like this:

ul.menu li {display:inline; }

This should be enough to sort you out for today.



Even this won't work for all cases though. It works OK for

<ul class="menu" >
<li> ...
</ul>

<ul class="list" >
<li> ...
</ul>

but it would fail if you ever nested the lists

<ul class="menu" >
<li> ...
<li>
<ul class="second-level-menu" >
<li> ...
</ul>
</li>
</ul>

This is because
ul.menu li { ...}
is a descendant selctor, i.e. it applies to any <li> that's below the
relevant <ul>, whether it's a direct child of that <ul> or not.

You can fix this in one of two ways. Either use a child selector
ul.menu > li { ...}
so that the selector only applies to direct children
(elegant, but not reliable on all browsers though)

Or perhaps more pragmatically:

ul.menu li { ... }

ul.menu ul li {
/* revert to default styling */
display: list-item;
}

This means that only those <li> directly beneath <ul> will be changed,
the others maintain their list-item value.

The selector "ul.menu ul li" has higher specificity that "ul.menu li",
so its rules over-ride the less-specific. Understanding this behaviour
and the "cascade" is important to really understanding CSS.


PS - Whenever you set margin or padding on lists (<ul> or <li>) set
_all_16_ of their property values (4 margin, 4 padding, 2 elements).
This is because browser default styles are set up differently for
lists - some do it with margin, some do it with padding. If you want
consistency, you need to take explicit control of all of the
properties.

Similar ThreadsPosted
Does this Work? November 20, 2008, 6:11 am
Would UBB thread work for this? March 9, 2006, 2:13 pm
How to get MAP to work with mouseover April 10, 2006, 10:59 pm
CSS positioning: why does this work? May 15, 2006, 2:12 pm
favicon doesn't work in IE6 October 8, 2006, 11:48 pm
This work on your browser? January 8, 2007, 1:27 am
Does my menu work in IE7? March 29, 2007, 9:51 am
Why didn't the include work? April 6, 2007, 8:12 am
How does this work? (CDATA) May 6, 2008, 3:51 pm
Re: Why this html doesn't work? May 26, 2008, 1:38 am

Our other projects:

Art Dolls, Fairies and Mermaids - Sunnyfaces.net

Roy's Linux, Programming and Search Engines messages

1-Script XML SitemapXML Sitemap