SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to create circle of listed item and also show numbering in it.

    I have a tutorial website and i want to show listed item in form of circle and show numbers inside it.
    Last edited by Paul O'B; Nov 4, 2013 at 10:35. Reason: Link not necessary

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You can do something automatically like this for ie9+.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
    <title>Styled Counters</title>
    <style type="text/css" media="all">
    ol.brackets {
    	counter-reset: number;
    	list-style-type: none;
    }
    ol.brackets li { counter-increment: number; line-height:1.5em}
    ol.brackets li:before { 
    	content:counter(number);
    	border-radius:50%;
    	padding:2px;
    	margin:0 5px 0 0;
    	display:inline-block;
    	width:20px;
    	text-align:center;
    	background:#000;
    	color:#fff;
    	line-height:1.0;
    	font-weight:bold;
    }
    </style>
    <!--[if lte IE 8]>
    <style type="text/css">
    ol.brackets li:before { content: " (" counter(number) ") ";width:auto }
    </style>
    <![endif]-->
    </head>
    <body>
    <h1>Styling with counters: IE9+</h1>
    <ol class="brackets">
    		<li>item 1</li>
    		<li>item 2</li>
    		<li>item 3</li>
    		<li>item 4</li>
    		<li>item 5</li>
    		<li>item 6</li>
    		<li>item 7</li>
    		<li>item 8</li>
    		<li>item 9</li>
    		<li>item 10</li>
    </ol>
    </body>
    </html>
    For older browsers you'd have to do it manually and insert an element with a number inside so you can style it.

  3. #3
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What if i not do it manually for old browsers. What it will show then in old browsers.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by mickynick View Post
    What if i not do it manually for old browsers. What it will show then in old browsers.
    Hi,

    You can supply some fallbacks for IE8 and under like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
    <title>Styled Counters</title>
    <style type="text/css" media="all">
    ol.brackets {
    	counter-reset: number;
    	list-style-type: none;
    }
    ol.brackets li {
    	counter-increment: number;
    	line-height:1.5em
    }
    ol.brackets li:before {
    	content:counter(number);
    	border-radius:50%;
    	padding:2px;
    	margin:0 5px 0 0;
    	display:inline-block;
    	width:20px;
    	text-align:center;
    	background:#000;
    	color:#fff;
    	line-height:1.0;
    	font-weight:bold;
    }
    </style>
    <!--[if IE 8]>
    <style type="text/css">
    ol.brackets li:before { 
    content: " (" counter(number) ") ";
    width:auto;
    color:#000;
    background:#fff;
    }
    </style>
    <![endif]-->
    <!--[if lt IE 8]>
    <style type="text/css">
    ol.brackets {list-style:decimal;margin:0 0 0 2em}
    </style>
    <![endif]-->
    
    </head>
    <body>
    <h1>Styling with counters: IE9+</h1>
    <p>IE8 gets lists like this:<br />
    		(1) item one<br />
    		(2) item two<br />
    		IE7 and under get normal lists:<br />
    		1. item one<br />
    		2. item two<br /></p>
    <ol class="brackets">
    		<li>item 1</li>
    		<li>item 2</li>
    		<li>item 3</li>
    		<li>item 4</li>
    		<li>item 5</li>
    		<li>item 6</li>
    		<li>item 7</li>
    		<li>item 8</li>
    		<li>item 9</li>
    		<li>item 10</li>
    </ol>
    </body>
    </html>
    You may need to tweak positions for your own layout.

    IE9+ (and all other modern browsers) get the styled counters.

    IE8 gets lists like this
    (1) item one
    (2) item two

    IE7 and under get normal lists:
    1. item one
    2. item two

  5. #5
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have tried it but it is showing both listed items, styled one and also simple. How i can remove simple one.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by mickynick View Post
    I have tried it but it is showing both listed items, styled one and also simple. How i can remove simple one.
    Hi,

    You will need to show the code you are using as the demo I gave above does not exhibit this behaviour. I'm guessing that you coded the IE conditional comments incorrectly or in the incorrect place.

    Copy my demo above and test and see that it's working and then compare with the code you are using.


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
  •