SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    731
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    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.

    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

  2. #2
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,070
    Mentioned
    253 Post(s)
    Tagged
    5 Thread(s)
    Instead of type="circle" in the HTML, use list-style-type: circle in your CSS.

    See http://reference.sitepoint.com/css/list-style-type
    Take plenty of exercise walk round and round the garden
    or
    sign up now for the Isle of Jura 10K or Half Marathon!

  3. #3
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    731
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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;
    }

  4. #4
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,070
    Mentioned
    253 Post(s)
    Tagged
    5 Thread(s)
    Well in the code you've just given, you've omitted the <ul> tags, which might make a difference.
    Take plenty of exercise walk round and round the garden
    or
    sign up now for the Isle of Jura 10K or Half Marathon!

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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

  6. #6
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    731
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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;
    }

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,107
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by justlukeyou View Post
    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;
    }
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  8. #8
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    731
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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;
    }

  9. #9
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    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...
    Maleika E. A. | Rockatee | Twitter | Dribbble



  10. #10
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    731
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.

  11. #11
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    You can add the ID to that rule which will then give it a higher specificity and thus won't be overwritten.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  12. #12
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    731
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Smile

    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

  13. #13
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    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;
    }
    Maleika E. A. | Rockatee | Twitter | Dribbble



  14. #14
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    731
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Aha,

    Brilliant thanks that works a treat.

  15. #15
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •