2nd List Doesn't Work

#1

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

urple;
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>

#2

"Michael R. Copeland" <mrc2323 (AT) cox (DOT) net> wrote

Quote:

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.

#3

Quote:

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

#4

"Michael R. Copeland" <mrc2323 (AT) cox (DOT) net> wrote

Quote:

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".

Quote:

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.

#5

On 31 Mar, 04:34, mrc2... (AT) cox (DOT) net (Michael R. Copeland) wrote:

Quote:

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.

Quote:

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

Quote:

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.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

2nd List Doesn't Work

HTML Writing HTML for the Web (comp.infosystems.www.authoring.html)

2nd List Doesn't Work - 03-30-2008 , 10:34 PM

Re: 2nd List Doesn't Work - 03-30-2008 , 11:14 PM

Re: 2nd List Doesn't Work - 03-31-2008 , 12:45 AM

Re: 2nd List Doesn't Work - 03-31-2008 , 01:20 AM

Re: 2nd List Doesn't Work - 03-31-2008 , 05:58 AM