Circular Bullet Points Inside Div

Hi,

I am trying to add circular bullet points. I have found the following HTML on a number of sites but nothing appears. Does anyone have any suggestions on how to apply circular bullet points.

					<div id="registerbenefitspagecontent">	
			<ul type=&#8221;circle&#8221;>			
	<li>Expose your work to millions of homeowners researching ideas and professionals</li>
<li>Store your entire photo portfolio for free</li>
<li><Use our online tools to communicate with clients and prospective clients</li>
	</UL>		
	</div>				

The text is just sample btw

[FONT=Verdana]Instead of type=“circle” in the HTML, use list-style-type: circle in your CSS.

See http://reference.sitepoint.com/css/list-style-type[/FONT]

Brilliant thanks, I can now add circles or another shape such as a square however the bulletpoint appears outside the DIV the List is in. (registerbenefitspagecontent)

I have tried different configurations of the HTML but that has no affect.

				<div id="registerbenefitspagecell">		
				<div id="registerbenefitspageheader">				
How can you benefit from EventVital?			
	</div>		
					<div id="registerbenefitspagecontent">			
	<li>Expose your work to millions of homeowners researching ideas and professionals</li>
<li>Store your entire photo portfolio for free</li>
<li>Use our online tools to communicate with clients and prospective clients</li>	
	</div>			
			
	</div>
#registerbenefitspagecontent{
  float:right;
   width:98%;
padding-top: 3px;
padding-bottom: 3px;
  font-family:helvetica, geneva, sans serif;
 font-size:0.9em;
}

li {
  list-style-type: disc;
}

Well in the code you’ve just given, you’ve omitted the <ul> tags, which might make a difference. :slight_smile:

it depends on what you want. LIs must always be direct children of a UL (or OL, for #s).

you could make #registerbenefitspagecontent an UL or make the LIs within #registerbenefitspagecontent DIVs.

For the former,
li {
list-style-type: disc;
list-style-type: inside;
}

for the latter:
#registerbenefitspagecontent > div {
display:list-item;
list-style-type: disc;
list-style-type: inside;
}

hope that helps

I’ve tried playing about with it, I have like this now but nothing appears. I take it I should be doing it differently?



		<div id="registerbenefitspagecontent">	
<ul>		
	<li>Expose your work to millions of homeowners researching ideas and professionals</li>
<li>Store your entire photo portfolio for free</li>
<li>Use our online tools to communicate with clients and prospective clients</li>
</ul>	
	</div>	


#registerbenefitspagecontent{
  float:right;
   width:98%;
padding-top: 3px;
padding-bottom: 3px;
  font-family:helvetica, geneva, sans serif;
 font-size:0.9em;
}

li {
  list-style-type: disc;
list-style-type: inside;
}

Do you mean no bullets appear? The HTML and CSS are fine, so chances are you have zeroed out the default UL styles with a reset. So try adding this in:

#registerbenefitspagecontent ul {
  	padding-left: 20px;
}

Hi,

Thats right no bullets appear. I added the padding which moves it across but the bullet points still do not appear.

Is there any template code for this? Is it widely used?


					<div id="registerbenefitspagecontent">	
<ul>		
	<li>Expose your work to millions of homeowners researching ideas and professionals</li>
<li>Store your entire photo portfolio for free</li>
<li>Use our online tools to communicate with clients and prospective clients</li>
</ul>	
	</div>	



#registerbenefitspagecontent{
  float:right;
   width:98%;
padding-top: 3px;
padding-bottom: 3px;
  font-family:helvetica, geneva, sans serif;
 font-size:0.9em;
}


#registerbenefitspagecontent ul {
  	padding-left: 20px;
}

li {
  list-style-type: disc;
list-style-type: inside;
}

Can you show us your entire CSS code and not just the snippet for that particular element? There might be a specificity issue where one rule overwrites the other…

Yes your right, I had this in it

ul li {
list-style: none;
}

The problem now is that I had in their to block bullet points where I dont want them which is on a form I previously had on my site.

Is there anyway I can use it optionally. So it blocks the bullet points on the form but not where I want the bullet points to appear.

You can add the ID to that rule which will then give it a higher specificity and thus won’t be overwritten.

So I should add this part here…

#registerbenefitspagecontent > div {
display:list-item;
list-style-type: disc;
list-style-type: inside;
}

Not totally sure what you mean by adding an ID. Almost there tho :slight_smile:

No, what I meant was that you can use your ID (#) to overwrite the general reset, like so:

#registerbenefitspagecontent li {
list-style-type: disc;
list-style-type: inside;
}

Aha,

Brilliant thanks that works a treat.


#registerbenefitspagecontent > div {
display:list-item;
list-style-type: disc;
list-style-type: inside;
}

was only IF you used nested divs as opposed to an UL :), as you can get any element to behave like a list item that way.