controlling bullet lists

[davikokar]

Hallo,
I'm trying to control distances in a bullet list (ul, li tags). The margin on the left and the distance between the bullet and the text.
I managed to achieve the first task with this:
ul {margin-left:12px;}
this will produce a list with a left margin of 2 pixels (considering that the distance between the text of the list and the bullet is 10px. The problem is that I'm not sure this is the right way to do it.
The second task: distance between list-text and bullet: I just cannot find out...

Does someone know?

Thanks

 

[Vragabond]

<style type="text/css">
li {
	padding-left: 100px;
}

li.out {
	padding-left: 200px;
}

li.in {
	padding-left: 10px;
}
</style>

<ul>
 <li>one</li>
 <li class="out">two</li>
 <li class="in">three</li>
 <li>four</li>
</ul>

This nicely shows how to control the distance from bullet to text. You can ident specific bullets in the same way with the margin property on the <li> elements. Your method is still ok, applying margin to the <ul> element. Last but not least, you can apply padding to <ul> element. Hope it helps.

 

[thowe]

Thank you for this post, this helped immensly!!!

~Thowe

Intermediate Dreamweaver user, learning more everyday.

 

[cLFlaVA]

also don't forget that some browsers, by default, add margin-left to <ul> objects, while others, by default, add padding-left. For this reason, when defining the styles of <ul> objects, you should include settings for both styles.

*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]

 

[pgaec]

Property Name: list-style-position
What it does

Lists can be drawn either with the contents of the element wholly indented (this is a list-style-position of outside), or with only the first line indented, and subsequent lines with the same left alignment as the marker (a list-style-position of inside).

Possible values

list-style-position can be specified as either of two keywords, inside and outside.

A position of inside makes the second and subsequent lines of a list item left aligned with the marker, not the left of the first line of text.

A position of outside is the traditional way for list items to be aligned. The text on second and subsequent lines aligns with the left of the text on the first line.
Default values

If no list-style-position is specified, the position is outside.

Example:
li{
list-style-position: inside;
}