PHWinfo - Afficher un message

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