How to align text using list property with bullets?

liunx · Jan 11, 2008

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(<a class="postlink" href="http://www.inspirationtraining.nl/bulletup6.png">http://www.inspirationtraining.nl/bulletup6.png</a>); 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>Not 100% sure what you mean, but possibly:

<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
}
ul {
list-style-image: URL(<a class="postlink" href="http://www.inspirationtraining.nl/bulletup6.png">http://www.inspirationtraining.nl/bulletup6.png</a>);
list-style-position: outside;
margin: 0 0 20 20px;
}
li {
margin-left: -6px;
}
</style>
</head>

<body>

<div id="textlayer" class="text">
Animals:
<ul>
<li>cow, cow, cow, cow, cow, cow, cow, cow, cow, cow, cow, cow, cow, cow, cow, cow, cow, cow</li>
<li>horse, horse, horse, horse, horse, horse, horse, horse, horse, horse, horse, horse</li>
<li>dog</li>
</ul>
</div>
</body>
</html>Hi Dave,

No, this is not what I mean. The piece of code <span style="margin-left: -6px;"> is used in the first line to make the distance shorter between the bullet and the first word. And to make this distance shorter is the purpose of the whole thing (working with small fonts and small columns makes me loose a lot of space when the distance between the bullet and the words is so big). You put the margin-left code in the style (as far as I understand you well). But changing the value there does not affect the distance between the bullet and the words, but shifts all bullets and text together.
Is there still hope?hi,

Maybe I was not clear enough. This will do it: I would like to have the distance smaller between the bullet and all following lines behind that bullet. In the following HTML the distance between the first bullet and the line cow1 (at least in my browser) 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(<a class="postlink" href="http://www.inspirationtraining.nl/bulletup6.png">http://www.inspirationtraining.nl/bulletup6.png</a>); 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>There's no way to manuipulate the particular relationship you're after. Here's a way to get complete control over something that LOOKS like a list but isn't:

.bulleted { width:100%; }
.bullet {
width:10%;
float:left;
background-image: url(<a class="postlink" href="http://www.inspirationtraining.nl/bulletup6.png">http://www.inspirationtraining.nl/bulletup6.png</a>);
background-repeat: no-repeat;
background-position: center right;
}
.bulltext {
width:85%;
float:right;
}

Then in the body:

<div id="textlayer" class="text">
Animals:
<div class="bulleted">
<div class="bullet"></div>
<div class="bulltext">cow, cow, cow, cow, cow2, cow2, cow2, cow2, cow3, cow3, cow3, cow3, cow4, cow4, cow4, cow4, cow5, cow5</div>
</div>
<div class="bulleted">
<div class="bullet"></div>
<div class="bulltext">horse, horse, horse, horse, horse, horse, horse, horse, horse, horse, horse, horse</div>
</div>
<div class="bulleted">
<div class="bullet"></div>
<div class="bulltext">dog</div>
</div>
</div>Thanks Ray,

This will dot it. Thanks!easier than that:

.bulleted {
background: url(<a class="postlink" href="http://www.inspirationtraining.nl/bulletup6.png">http://www.inspirationtraining.nl/bulletup6.png</a>) 5px 5px no-repeat;
padding-left: 10px;
}Bravo, Dave!LOL

I discovered that one while making menus <a class="postlink" href="http://www.webdevfaqs.com/cssmenus/ppc/">http://www.webdevfaqs.com/cssmenus/ppc/</a>

How to align text using list property with bullets?

liunx

Guest