[thelist] re: css: formatting list item spacing: summary

DAVID FIELDS d.fields at normandale.mnscu.edu
Tue Dec 11 16:02:32 CST 2001


Adjectives fail to suffice in thanking you for your fast replies
which went something like this:
_____________________________

<Chris Blessing>
I usually end up using a table (messy, yes, but it does the job well)
with two cells: left side for an arrow/bullet image, right side for the
text.  Keeps things lookin good.
</Chris Blessing>

eeehhh ... I'm really trying to stay away from tables, most importantly
for structural reasons ... the accessible structure is more important on
this site (a community college main site) than the look. 
_____________________________

<nate koechley>
i use &#149; (a bullet) followed by as many nbsp's as you'd like. (if
you want the second line of the the item text to not wrap under the
bullet, you might do a small two-cell table.)
</nate koechley>

Yes, that would work, but it's once again not structurally meaningful
at all. I took this approach for a while, got frustrated with the second
line wrapping, and started doing tables, but forced myself out of that
habit. CSS is a necessity.
_____________________________

<Dulcie Meatheringham>
... to adjust the space between the bullet and the text you may have to
make a custom "bullet" image and reference that in your style sheet. The
image you make could be wider than a usual bullet (partially
transparent, or the same colour as the background) to edge it closer.
</Dulcie Meatheringham>

Dulcie, you've hit it exactly. It slipped my mention in my first post,
but I was planning on using an stylesheet-specified image anyway. I
tried your approach, and it's exactly what I was looking for: a
negligible increase in file size, leaving the structural aspect of the
html uncorrupted, yet allowing me to get picky about pixels
(MWOOHAHaHahaha ... heh ... hmm).
_____________________________

So the theory is like this: the bullet is set a certain distance to the
left of the list item itself, and you can't directly mess with this
distance. But when you specify an image for the bullets:
   ul { list-style: url(bullets/tricky.gif) }
the image will be centered in the default position of the usual HTML
bullet. In my case, adding 10px of transparent area to the left of the
image shifts the visible portion of the image to the right by 5px, thus
decreasing the whitespace between image-bullet and list item.

Elegance, Dulcie. Thanks again.

____________________________________
David Fields  |  http://www.spinplate.com/doc




More information about the thelist mailing list