"Neal" <neal@spamrcn.com> writes:
quote:

> "Haines Brown" <brownh@teufel.hartford-hwp.com> wrote in message
> news:87brq6b2ws.fsf@teufel.hartford-hwp.com... 
>
> More classes pointing to other sizes, perhaps.


?? My intent was to ask how such a class would be applied to the list
item marker. Here's a simple example:


li.list {
list-style-image: url(arrow.png);
padding: 1em;
}

<ul>
<li class="list"><a href="doc-a.html">document a</a></li>
<li class="list"><a href="doc-b.html">document b</a></li>
</ul>

Now, suppose I want to shift the relative position of marker
"arrow.png" in relation to the lines of text in the list, such as
shifting it up a bit? Or perhaps I might want to reduce its size. I
assume that to do this, "arrow.png" must somehow be assigned a class
or ID, but I don't see how.

This is why I created an artificial "list" by using <br /> to separate
ordinary lines that began with a graphic to serve as markers for the
lines.

--
Haines Brown

"Haines Brown" <brownh@teufel.hartford-hwp.com> wrote in message
news:87hdzu9xsk.fsf_-_@teufel.hartford-hwp.com...
quote:

> ?? My intent was to ask how such a class would be applied to the list
> item marker. Here's a simple example:
>
>
>         li.list {
>                 list-style-image: url(arrow.png);
>                 padding: 1em;
>         }
>
>         <ul>
>             <li class="list"><a href="doc-a.html">document a</a></li>
>             <li class="list"><a href="doc-b.html">document b</a></li>
>         </ul>
>
> Now, suppose I want to shift the relative position of marker
> "arrow.png" in relation to the lines of text in the list, such as
> shifting it up a bit? Or perhaps I might want to reduce its size. I
> assume that to do this, "arrow.png" must somehow be assigned a class
> or ID, but I don't see how.


Easiest solution (for me anyway) is to recreate the bullet graphic a little
higher or lower (higharrow.png, lowarrow.png, or what have you) and create a
class for that one.

See, basically if you want to have the item look different in the viewport,
it must therefore have a different meaning in the context of the page. So
you want to class it differently anyway. Decide what different types of
items you want in the list. Assign class based on that, then define the
class.

Why do you want different bullet styles anyway? What's the meaning you're
trying to send to the user by doing this?

I think you are telling me that there's no way to assign a class or id
to a list marker, but rather I should redesign the graphic so that it
has the desired attributes.

You ask why I would want to mess with the qualities of the marker
anyway. Well, the reason is that I needed to adjust the height of the
marker in relation to the line it marks. I find that when I try to
change the relative position of the line, it includes the marker. So I
have to so something really ugly:

li {
list-style-image: url(arrow.png);
height: 1.4em;
}
.listLine {
position: relative;
top: -0.3em;
}

<ul>
<li><a href="doc-a.html">
<span class="listLine">child a</span></a>
</li>
<li><a href="doc-b.html">
<span class="listLine">child b</span></a>
</li>
</ul>

I don't know that this is any improvement over my original approach,
which was simply to start new lines in a paragraph with a <br /> and
an image to consruct the appearance of an HTML list (I used the height
attribute to bring the lines closer together than 1 em, so don't know
why the value 1.4 works in practice.)

Here was my original approach:

<p class="links">
<img class="arrow" src="arrow.png" />
<a href="doc-a.html">child a</a>
<br />
..

--
Haines Brown
brownh@hartford-hwp.com
kb1grm@arrl.net
www.hartford-hwp.com

"Haines Brown" <brownh@teufel.hartford-hwp.com> wrote in message
news:87zndl86kn.fsf@teufel.hartford-hwp.com...
quote:

> I think you are telling me that there's no way to assign a class or id
> to a list marker, but rather I should redesign the graphic so that it
> has the desired attributes.


Well, what I'm trying to say is that the bullets on lists are supposed to
function in a particular way. The only sure and meaningful way to defeat
that is to specify a different bullet.
quote:

> You ask why I would want to mess with the qualities of the marker
> anyway. Well, the reason is that I needed to adjust the height of the
> marker in relation to the line it marks.


My next question: why do you need to change the relative position of a line?
What I'm driving at is there must be some meaning to the user as to why
you're doing this. What's the context in terms of the content that's being
presented?
quote:

> I find that when I try to
> change the relative position of the line, it includes the marker.


? In IE and Opera list items have their positions changed but the bullet
stays put. As some of your list items need to be positioned high, and some
regular, do this.

li.normal {
list-style-image: url(arrow.png);
height: 1.4em;
}
li.special {
position: relative;
top: -0.3em;
list-style-image: url(higharrow.png);
}

and the image matches. We're talking bullets here, not terribly wasteful of
bandwidth. You could have a dozen different ones and it would be noticed
only on the poorest of connections.
quote:

> So I
> have to so something really ugly:


It is a little ugly, but you are trying to do something totally
quote:

> I don't know that this is any improvement over my original approach,
> which was simply to start new lines in a paragraph with a <br /> and
> an image to consruct the appearance of an HTML list (I used the height
> attribute to bring the lines closer together than 1 em, so don't know
> why the value 1.4 works in practice.)


The improvement is that this actually is a list. If you can mark up your
text as what it actually is, and not resort to HTML witchcraft to achieve a
visual effect which should be done in the CSS, it's an improvement. And
since there's some contextual purpose for adjusting the height of a line AND
its bullet, and since a bullet is not moved with its text in the user agent,
the only option to preserve meaningful markup and create the desired visual
effect is to supply a bullet that is pre-adjusted to your visual effect. The
only ugly part is that you need to design a class for each separate type of
position modfication you plan to do - but since each element is being
positioned for a basic contextual reason, it's actually not ugly, it's
meaningful and worthwhile.

If you're not aiming toward visual layout to enhance meaning, but simply
taking a Dadaist approach to the page layout without respect to matching
design to communication of the text, then I cannot help you.
quote:

> Here was my original approach:
>
>     <p class="links">
>         <img class="arrow" src="arrow.png" />
>     <a href="doc-a.html">child a</a>
>         <br />