Circular Bullet Points Inside Div

**justlukeyou** · Jul 8, 2012 10:23

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.

Code:

					<div id="registerbenefitspagecontent">	
			<ul type=”circle”>			
	<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

**TechnoBear** · Jul 8, 2012 11:35

Instead of type="circle" in the HTML, use list-style-type: circle in your CSS.

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

**justlukeyou** · Jul 8, 2012 15:07

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.

Code:

				<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>

Code:

#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;
}

**TechnoBear** · Jul 9, 2012 04:14

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

**dresden_phoenix** · Jul 9, 2012 10:02

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

**justlukeyou** · Jul 9, 2012 13:27

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

Code:

		<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;
}

**ralph.m** · Jul 9, 2012 17:53

Originally Posted by justlukeyou

I've tried playing about with it, I have like this now but nothing appears.

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:

Code:

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

**justlukeyou** · Jul 10, 2012 12:35

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?

Code:

					<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;
}

**kohoutek** · Jul 10, 2012 13:04

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...

**justlukeyou** · Jul 10, 2012 13:26

Yes your right, I had this in it

Code:

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.

**kohoutek** · Jul 10, 2012 13:38

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

**justlukeyou** · Jul 10, 2012 13:55

So I should add this part here...

Code:

#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

**kohoutek** · Jul 10, 2012 14:32

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

Code:

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

**justlukeyou** · Jul 10, 2012 15:34

Aha,

Brilliant thanks that works a treat.

**dresden_phoenix** · Jul 10, 2012 15:55

Code:

#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.

User Tag List

Thread: Circular Bullet Points Inside Div

Thread Tools

Display

Circular Bullet Points Inside Div

Bookmarks

Bookmarks

Posting Permissions