How to align text using list property with bullets?

kippie · Dec 20, 2003

In the HTML below I try to get all "cows" aligned to the left side as is done in the first line. In that first line I use the code "margin-left: -6px" in orde to make the distance between the bullet and the first word smaller than the default value. But how to make that distance smaller also in the other lines? Can someone help?

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">

<style type="text/css">
.text { color: #4c5ea1; font: 11px Arial, Helvetica, sans-serif, Arial, Helvetica, sans-serif; text-align: justify; margin-top: -5px; }
#textlayer { position: relative; z-index: 12; left: 0px; top: 0px; width: 150px; height: 50px; visibility: visible }

</style>
</head>

<body>

<div id="textlayer" class="text">
Animals:
<ul style="list-style-image: URL(

http://www.inspirationtraining.nl/bulletup6.png);

list-style-position: outside; margin: 0 0 20 20px" >
<li><span style="margin-left: -6px;">cow, cow, cow, cow, cow, cow, cow, cow, cow, cow, cow, cow, cow, cow, cow, cow, cow, cow </span></li>
<li>horse, horse, horse, horse, horse, horse, horse, horse, horse, horse, horse, horse</li>
<li>dog</li>
</ul>
</div>
</body>
</html>

Kippie

philote · Dec 20, 2003

You'll have to define that style for each LI you want to apply the margin to. Either do this inside each LI tag, or define the style for the LI's in the style section in the top of your example. You can give the containing UL an id or class, then in your style do something like:

Code:

ul#someid li{
  margin-left: -6px;
}

This would apply the margin to each LI that is in a UL with an id="someid".

kippie · Dec 21, 2003

Hi Philote,

Thanks for your attention. I was probably not clear, but what you say is not what I mean. I would like to have the distance smaller between the bullet and all following lines behind that bullet. In the HTML below it's more clear. With my browser the distance between the first bullet and the line cow1 is small, but cow2 starts a bit further, and the same with the line of cow3, cow4 and cow5. I would have all cows aligned as cow1 (if that's possible at all). Here is the HTML:

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">

<style type="text/css">
.text { color: #4c5ea1; font: 11px Arial, Helvetica, sans-serif, Arial, Helvetica, sans-serif; text-align: justify; margin-top: -5px; }
#textlayer { position: relative; z-index: 12; left: 0px; top: 0px; width: 150px; height: 50px; visibility: visible }

</style>
</head>

<body>

<div id="textlayer" class="text">
Animals:
<ul style="list-style-image: URL(

http://www.inspirationtraining.nl/bulletup6.png);

list-style-position: outside; margin: 0 0 20 20px" >
<li><span style="margin-left: -6px;">cow, cow, cow, cow, cow2, cow2, cow2, cow2, cow3, cow3, cow3, cow3, cow4, cow4, cow4, cow4, cow5, cow5 </span></li>
<li>horse, horse, horse, horse, horse, horse, horse, horse, horse, horse, horse, horse</li>
<li>dog</li>
</ul>
</div>
</body>
</html>

Kippie

philote · Dec 21, 2003

Oh ok, I see what you're wanting now. I was able to get the effect you want in Mozilla by using a div instead of a span. This didn't seem to work in IE, though maybe if you tweak it a little you can get it to work.

I wouldn't count on having "cow, cow ,cow, cow" being in one line. For example, in Mozilla "cow, cow, cow" was in the first line and "cow, cow2, cow2" was in the second. This was probably because of the list being indented, but also if someone adjusts the text size in their browser it could throw this off. What you may want to do instead is have another list inside the LI, and have an LI for "cow, cow ,cow ,cow" and one for "cow2, cow2, cow2, cow2", etc. Then use styles to get rid of the bullets. It'll also probably be much easier to line up each line this way.

Yet another option is to use a two column table instead of a list. Put the bullet in the left column for each list item, and the text in the right column.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How to align text using list property with bullets?

kippie

Technical User

philote

MIS

kippie

Technical User

philote

MIS

Similar threads

Part and Inventory Search

Sponsor