2nd List Doesn't Work

31/03/2008, 04h34

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. The 1st list
("class="menu") is okay, but even though I attempt to declare a 2nd
(class="list") it doesn't render as a list. I thought that the
"li.list" would suffice as a 2nd class declaration, but it seems to be
ignored. What am I missing or doing wrong? TIA

<style type="text/css">
img {float:right; border:1px dotted black; margin:0px 40px 15px 20px;}
<-- not sure why I have this... -->
ul.menu {float:left; width:100%; padding:0; margin:0; list-style-
type:none;}

a {width:10em; text-decoration:none; color:white; background-
color:purple;
padding:0.2em 0.6em; border-right:1px solid white;}
a:hover {background-color:#ff3300}
p.leftmargin {margin-left: 40px}
<-- my 2 "li" controls -->
li {display:inline}
li.list {margin-left: 60px}

</style>

</head>
<body style="color: rgb(255, 255, 255); background-color: Black;"
alink="#ff6600" link="#99ff99" vlink="#990099">
<div style="text-align: center;">

<ul> <-- This list renders properly. -->
<li><a class="menu" href="RHBuilding.html">The Building</a></li>
<li><a class="menu" href="RHResidents.html">Resident Information</a>
</li>
<li><a class="menu" href="RHOwners.html">Owner Information</a></li>
<li><a class="menu" href="RHContact.html">Contact</a></li>
</ul>
</div>
<div style="text-align: center;">
<font style="color: rgb(255, 204, 0);" size="+3"><span>Regency House
</span></font><br>
<font style="color: rgb(255, 204, 0);" size="+2"><span></span></font>
</div>
<div style="text-align: center;"><font style="color: rgb(255, 204, 0);"
size="+2">
<span>The In-Town Condominium Tower<br><br>
<img src="RH55_1.jpg" height="345" width="280">
<div style="text-align: left;">
<p class="leftmargin"><font align="left" color="white" size="+1"> 
   
Regency House is a 22-story luxury condominium building located in the
heart of
the midtown Phoenix Arts District, next to the renowned Heard Museum. It
has:<br>

<ul> <-- This list doesn't work! -->
<li class="list">118 units with balconies<br></li>
<li class="list">Large heated pool<br></li>
<li class="list">Spa<br></li>
<li class="list">Underground parking<br></li>
<li class="list">24/7 security<br></li>
<li class="list">Social Room with TV, piano, bar and kitchen<br></li>
<li class="list">Fitness Center<br></li>
<li class="list">Library<br></li>
<li class="list">Valet service<br></li>
<li class="list">360° unobstructed views<br></li>
<li class="list">Light Rail station at front door<br></li>
</ul></div>
</font></p>

31/03/2008, 04h43

Michael R. Copeland wrote:

> The following code doesn't work as I want,

Post a URL.

Then visit these pages:
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/validator.html
http://www.w3.org/QA/2002/04/valid-dtd-list.html
(Use HTML 4.01 Strict)

You have a rather eclectic mix of CSS and ancient, last millennium
HTML-for-presentation in what you posted here.

--
-bts
-Friends don't let friends drive Vista

31/03/2008, 04h47

Beauregard T. Shagnasty replied to hisself:

> Michael R. Copeland wrote:
>
>> The following code doesn't work as I want,
>
> Post a URL.

Oh wait. I see you're the "Newbie" in another thread. Perhaps you could
visit this place:

http://www.000webhost.com/

Some affiliate spammers have been posting links to it in
alt.www.webmaster recently, though the service itself appears genuine.
It should certainly work for your test cases.

--
-bts
-Friends don't let friends drive Vista

31/03/2008, 05h14

"Michael R. Copeland" <mrc2323@cox.net> wrote in message
news:MPG.225a09aae788e83f9896f5@news.cox.net...
> 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 {display:inline}
> li.list {margin-left: 60px}

Have a very carefull think about what the first of the above two rules does.

--
Richard.

31/03/2008, 06h45

> > 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 {display:inline}
> > 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>
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

31/03/2008, 07h20

"Michael R. Copeland" <mrc2323@cox.net> wrote in message
news:MPG.225a286f4cd01f669896f6@news.cox.net...
>> > 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 {display:inline}
>> > 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.

31/03/2008, 11h58

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 {display:inline}

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.

31/03/2008, 04h34	#1
Michael R. Copeland Messages: n/a Hébergeur:	2nd List Doesn't Work 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. The 1st list ("class="menu") is okay, but even though I attempt to declare a 2nd (class="list") it doesn't render as a list. I thought that the "li.list" would suffice as a 2nd class declaration, but it seems to be ignored. What am I missing or doing wrong? TIA <style type="text/css"> img {float:right; border:1px dotted black; margin:0px 40px 15px 20px;} <-- not sure why I have this... --> ul.menu {float:left; width:100%; padding:0; margin:0; list-style- type:none;} a {width:10em; text-decoration:none; color:white; background- color:purple; padding:0.2em 0.6em; border-right:1px solid white;} a:hover {background-color:#ff3300} p.leftmargin {margin-left: 40px} <-- my 2 "li" controls --> li {display:inline} li.list {margin-left: 60px} </style> </head> <body style="color: rgb(255, 255, 255); background-color: Black;" alink="#ff6600" link="#99ff99" vlink="#990099"> <div style="text-align: center;"> <ul> <-- This list renders properly. --> <li><a class="menu" href="RHBuilding.html">The Building</a></li> <li><a class="menu" href="RHResidents.html">Resident Information</a> </li> <li><a class="menu" href="RHOwners.html">Owner Information</a></li> <li><a class="menu" href="RHContact.html">Contact</a></li> </ul> </div> <div style="text-align: center;"> <font style="color: rgb(255, 204, 0);" size="+3"><span>Regency House </span></font><br> <font style="color: rgb(255, 204, 0);" size="+2"><span></span></font> </div> <div style="text-align: center;"><font style="color: rgb(255, 204, 0);" size="+2"> <span>The In-Town Condominium Tower<br><br> <img src="RH55_1.jpg" height="345" width="280"> <div style="text-align: left;"> <p class="leftmargin"><font align="left" color="white" size="+1">      Regency House is a 22-story luxury condominium building located in the heart of the midtown Phoenix Arts District, next to the renowned Heard Museum. It has:<br> <ul> <-- This list doesn't work! --> <li class="list">118 units with balconies<br></li> <li class="list">Large heated pool<br></li> <li class="list">Spa<br></li> <li class="list">Underground parking<br></li> <li class="list">24/7 security<br></li> <li class="list">Social Room with TV, piano, bar and kitchen<br></li> <li class="list">Fitness Center<br></li> <li class="list">Library<br></li> <li class="list">Valet service<br></li> <li class="list">360° unobstructed views<br></li> <li class="list">Light Rail station at front door<br></li> </ul></div> </font></p>

31/03/2008, 04h43	#2
Beauregard T. Shagnasty Messages: n/a Hébergeur:	Re: 2nd List Doesn't Work Michael R. Copeland wrote: > The following code doesn't work as I want, Post a URL. Then visit these pages: http://validator.w3.org/ http://jigsaw.w3.org/css-validator/validator.html http://www.w3.org/QA/2002/04/valid-dtd-list.html (Use HTML 4.01 Strict) You have a rather eclectic mix of CSS and ancient, last millennium HTML-for-presentation in what you posted here. -- -bts -Friends don't let friends drive Vista

31/03/2008, 04h47	#3
Beauregard T. Shagnasty Messages: n/a Hébergeur:	Re: 2nd List Doesn't Work Beauregard T. Shagnasty replied to hisself: > Michael R. Copeland wrote: > >> The following code doesn't work as I want, > > Post a URL. Oh wait. I see you're the "Newbie" in another thread. Perhaps you could visit this place: http://www.000webhost.com/ Some affiliate spammers have been posting links to it in alt.www.webmaster recently, though the service itself appears genuine. It should certainly work for your test cases. -- -bts -Friends don't let friends drive Vista

31/03/2008, 05h14	#4
rf Messages: n/a Hébergeur:	Re: 2nd List Doesn't Work "Michael R. Copeland" <mrc2323@cox.net> wrote in message news:MPG.225a09aae788e83f9896f5@news.cox.net... > 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 {display:inline} > li.list {margin-left: 60px} Have a very carefull think about what the first of the above two rules does. -- Richard.

31/03/2008, 06h45	#5
Michael R. Copeland Messages: n/a Hébergeur:	Re: 2nd List Doesn't Work > > 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 {display:inline} > > 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> 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

31/03/2008, 07h20	#6
rf Messages: n/a Hébergeur:	Re: 2nd List Doesn't Work "Michael R. Copeland" <mrc2323@cox.net> wrote in message news:MPG.225a286f4cd01f669896f6@news.cox.net... >> > 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 {display:inline} >> > 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.

31/03/2008, 11h58	#7
Andy Dingley Messages: n/a Hébergeur:	Re: 2nd List Doesn't Work 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 {display:inline} 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.

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email