list-item alignment in CSS

Todd Fahrner writes:

 > I want to block-indent lists by the same value as a paragraph indent, like
 > this:
 > 
 > 	   This is an indented paragraph. Blabbity blab
 > 	blab, blabbity blip. Yaddayadda woohoo, shoop-
 > 	doobie-doop. Yaddayadda woohoo, blabbity blip
 > 	shoop-doobie-doop.
 > 	   This is an indented paragraph. Blabbity blab
 > 	blab, blabbity blip. Yaddayadda woohoo, shoop-
 > 	doobie-doop.
 > 	a. This is a list item. Note that the text,
 > 	   not the marker, is aligned with the paragraph
 > 	   indent above.
 > 	b. This is a another list item. Note that the text,
 > 	   not the marker, is aligned with the paragraph
 > 	   indent above.
 > 
 > Can CSS produce this sort of layout from standard markup?

Yes.

As long as you do not require the list-item markers to be aligned with
anything, the above can be specified with:

  P { text-indent: 2em }   /* or whatever */
  OL { list-style: lower-roman }
  LI { margin-left: 2em }

 > >From http://www.w3.org/pub/WWW/TR/REC-CSS1#list-item-elements :
 > 
 > ---
 > 
 >   <STYLE TYPE="text/css">
 >     UL         { list-style: outside }
 >     UL.compact { list-style: inside }
 >   </STYLE>
 > 
 >   <UL>
 >     <LI>first list item comes first
 >     <LI>second list item comes second
 >   </UL>
 > 
 >   <UL CLASS=COMPACT>
 >     <LI>first list item comes first
 >     <LI>second list item comes second
 >   </UL>
 > 
 > The above example may be formatted as:
 > 
 >   * first list item
 >     comes first
 > 
 >   * second list item
 >     comes second
 > 
 > 
 >   * first list
 >   item comes first
 > 
 >   * second list
 >   item comes second
 > 
 > ---
 > 
 > Note the alignment of the asterisks in the ascii-rendering. The style has
 > gone from floating "outside" the block to "inside", yet it is the block,
 > rather than the marker that has shifted. This can't be right. I say this
 > should be corrected to:
 > 
 > ---
 > 
 >   * first list item
 >     comes first
 > 
 >   * second list item
 >     comes second
 > 
 > 
 >     * first list
 >     item comes first
 > 
 >     * second list
 >     item comes second

You're right. The ascii rendering is misleading as it stands (.. but
let me run it through Bert before adding it to the forthcoming errata
sheet). With the keyword value 'outside', the marker will be put
outside the box and the box will be formatted and positioned as any
other box.

With a keyword value of 'inside', the box will be posisioned used the
familiar margin/border/padding onion, and the marker will be put in
front of the content within the box.

 > Has there been any discussion or detailed specification on how lists
 > (or normal block-level elements) should be rendered when their
 > display type is set to "inline"?

If their display type is set to 'inline' they are no longer
block-level elements. For list items, this means that there will be no
list-item marker attached to the element.

E.g.:

  LI { display: inline }

  <UL>
  <LI>foo 
  <LI>bar 
  </UL>

may be rendered as:

  foo bar

The space between "foo" and "bar" is achieved by having spaces in the
HTML source (but the SGML rules on how to collapse white space around
tags may complicate matters). Alternatively, one could add some margin
and/or padding around the elements through the style sheet.

Sorry for entering the discussion so late.

-h&kon

H   å   k   o   n      W   i   u   m       L   i   e
howcome@w3.org   W o r l d   Wide  W e b  Consortium
inria §°þ#¡ª FRANCE http://www.w3.org/people/howcome

Received on Wednesday, 4 June 1997 17:49:38 UTC