Sent by Paul Novitski on 2 November 2004 11:11
At 05:51 PM 10/31/2004, Aryan wrote:
>I want to have a middle dot in an inline list and the
>only way to accomplish this so that most major browsers support it is
>to just put in those middle dots manually without the use of CSS.
Aryan,
I find this an interesting little problem. Applying the delimiters with
CSS is easy, but applying them inconsistently or asymetrically among the
list items is not.
With the delimiters appearing only between list items, you'll always have
one less delimiter than there are items:
item1 * item2 * item3 * item4 * item5
How you structure the list may depend on what you want to happen if your
list wraps around, as could occur if you allow text-resizing in a
fixed-width container. Each dot could adhere either to the following item:
item1 * item2 * item3
* item4 * item5
or to the preceding item:
item1 * item2 * item3 *
item4 * item5
The first scenario suggests list item markers or left-handed background
images as Larry suggested, but suppressed from the first item. The second
scenario suggests a right-handed background image on each LI but suppressed
from the final item.
You could do either of these by modifying your HTML markup to enable CSS to
style the list items inconsistently, e.g.:
<ul>
<li class="first">item1</li>
<li>item2</li>
<li>item3</li>
...
li { background-image("dot.jpg"); }
li.first { background-image: none; }
However, it would be great if you could come up with a solution that
allowed your HTML to remain unsullied by such presentation-driven markup.
For example, you could preceed every item with a dot consistently but then
shift the whole list with a negative margin-left so that the first item's
dot disappears past the edge of the list's container (using overflow: hidden;):
______________________________________
| |
*|item1 * item2 * item3 * item4 * item5 |
|______________________________________|
This might feel a little kludgey but it would leave your HTML pure as the
driven snow.
To take the idea further, neither of the two wrapping scenarios illustrated
above is really ideal. Simple wrapping breaks the symmetry of the
delimited list by leaving a dot hanging at the end of one row or the
beginning of the next. Ideally, the delimiters would only appear between
two ajacent items on the same row, regardless of where the list happened to
wrap:
item1 * item2 * item3
item4 * item5
Solutions could either a) allow the delimiter to appear only between two
adjacent items, or b) suppress the delimiter from the first and last items
of each row (which you can't do in HTML because you don't know where the
list will wrap). I have no good suggestions for either.
Here's an easier version, with the dots surrounding the items:
* item1 * item2 * item3 *
* item4 * item5 *
If each item has two delimiters:
* item1 *
then one could overlap adjacent items so that the right-hand dot of one
item covers up the left-hand dot of the next.
I thought I might have solved the first version when I thought of replacing
those dots with background image GIFs in which the dots are actually
transparent holes in an opaque field. If two adjacent list items
overlapped so their dots were one on top of the other, the holes would line
up and revealing the underlying color of the layer beneath the
list. However, I don't see how to arrange them so that an item with no
adjacent partner would fail to reveal the substrate. There might be
something there but I don't see it now at 2:30 in the morning...
It may seem ridiculous to spend time considering such a modest little list,
but my intuition tells me it's a low-level problem and its solutions will
fertilize other more grand designs.
Cheers,
Paul
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
