CWC index .

CSS in Lists

A question came up about changing the style in an unordered list that was within a table. Here are a couple of examples.

Style is within a div placed around the unordered list. Place the ul inside a div with the background you want (at least this works in IE6 and Opera6 for me):

style in an unordered list within a table

...style for list placed in a <div> tag...

A Blue List

  • list item #1
  • list item #2
  • list item #3

Code (between the dotted lines) for Blue List inside the td cell :

-------------------------dotted line-------------------------
<head>
<style type="text/css">
table.white {background:#fff;color:#300;}
.blue {background:transparent;color:#00f;}
.bluebk {background:#00f;color:#ffc;}
.red {background:transparent;color:#f00;}
.redbk {background:#f00;color:#ffc;}
.grn {background:transparent;color:#090;}
.grnbk {background:#090;color:#ffc;}
.cppr {background:#transparent;color:#900;}
</style>
</head>
[...]
<div class="bluebk"> 
<ul> 
<li>list item #1</li> 
<li>list item #2</li> 
<li>list item #3</li> 
</ul> 
</div>
-------------------------dotted line-------------------------

OR

you can put the style elements in the ul tag. This, however, means that the bullet may not have the same colour background as the list item. The bullets will be the same colour of the text in the listed items. (at least that is what appears in IE6 and Opera6):

style in an unordered list within a table

...style for list placed in the <ul> tag...

A Red List

  • list item #1
  • list item #2
  • list item #3

Code (between the dotted lines) for Red List inside the td cell:

-------------------------dotted line-------------------------
<head>
<style type="text/css">
table.white {background:#fff;color:#300;}
.blue {background:transparent;color:#00f;}
.bluebk {background:#00f;color:#ffc;}
.red {background:transparent;color:#f00;}
.redbk {background:#f00;color:#ffc;}
.grn {background:transparent;color:#090;}
.grnbk {background:#090;color:#ffc;}
.cppr {background:#transparent;color:#900;}
</style>
</head>
[...]
<ul class="redbk"> 
<li>list item #1</li> 
<li>list item #2</li> 
<li>list item #3</li> 
</ul> 
-------------------------dotted line-------------------------

OR

and I don't know if this is kosher or not, you can have different colours for the list items (but, again, not the background around the bullet part of the list in IE6 or Opera6) by putting the style in the li tag:

style in an unordered list within a table

...style for list placed in the <li> tag...

Multicoloured List

  • list item #1
  • list item #2
  • list item #3

Code (between the dotted lines) for Multicoloured List inside the td cell:

-------------------------dotted line-------------------------
<head>
<style type="text/css">
table.white {background:#fff;color:#300;}
.blue {background:transparent;color:#00f;}
.bluebk {background:#00f;color:#ffc;}
.red {background:transparent;color:#f00;}
.redbk {background:#f00;color:#ffc;}
.grn {background:transparent;color:#090;}
.grnbk {background:#090;color:#ffc;}
.cppr {background:#transparent;color:#900;}
</style>
</head>
[...]
<ul> 
<li class="bluebk">list item #1</li> 
<li class="redbk">list item #2</li> 
<li class="grnbk">list item #3</li> 
</ul> 
-------------------------dotted line-------------------------

OR

style in an unordered list within a table

...style for list placed in the <ul> tag and inside the <li> area...

Multicoloured List2

  • list item #1
  • list item #2
  • list item #3
  • list item #4

Code (between the dotted lines) for Multicoloured List2 inside the td cell:

-------------------------dotted line-------------------------
<head>
<style type="text/css">
table.white {background:#fff;color:#300;}
.blue {background:transparent;color:#00f;}
.bluebk {background:#00f;color:#ffc;}
.red {background:transparent;color:#f00;}
.redbk {background:#f00;color:#ffc;}
.ylbk {background:#ffc;color:#300;}
.grn {background:transparent;color:#090;}
.grnbk {background:#090;color:#ffc;}
.cppr {background:#transparent;color:#900;}
</style>
</head>
[...]
<ul class="cppr"> 
<li><span class="ylbk">list item #2</span></li> 
<li><span class="bluebk">list item #2</span></li> 
<li><span class="redbk">list item #2</span></li>  
<li><span class="grnbk">list item #2</span></li>  
</ul> 
-------------------------dotted line-------------------------

OR

style in an unordered list within a table

...style for list placed in the <li> tag and inside the <li> area...

Multicoloured List3

  • list item #1
  • list item #2
  • list item #3
  • list item #4
  • list item #5

Code (between the dotted lines) for Multicoloured List3 inside the td cell:

-------------------------dotted line-------------------------
<head>
<style type="text/css">
table.white {background:#fff;color:#300;}
.blue {background:transparent;color:#00f;}
.bluebk {background:#00f;color:#ffc;}
.red {background:transparent;color:#f00;}
.redbk {background:#f00;color:#ffc;}
.ylbk {background:#ffc;color:#300;}
.grn {background:transparent;color:#090;}
.grnbk {background:#090;color:#ffc;}
.cppr {background:#transparent;color:#900;}
</style>
</head>
[...]
<ul> 
<li>list item #1</li> 
<li class="grn"><span class="ylbk">list item #2</span></li> 
<li class="cppr"><span class="bluebk">list item #3</span></li> 
<li class="red"><span class="redbk">list item #4</span></li>
<li class="blue"><span class="grnbk">list item #5</span></li> 
</ul>
-------------------------dotted line-------------------------
 

© llizard 2003, 2007

CWC reference pages . ASCII-art . illustrations and gif animations . llinks to ridiculously useless sites . home page