Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Feb 2007
    Posts
    77
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Question Want to create progress bar like attached image

    How to achieve this output using HTML,css using images?

    Thanks in advance
    Attached Thumbnails Attached Thumbnails Want to create progress bar like attached image-pat.jpg   Want to create progress bar like attached image-pat1.jpg  

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,677
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    In modern browsers you can achieve that without images.
    Something like that:
    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" xml:lang="en" lang="en">
    	<head>
    		<title></title>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
    		<meta name="description" content="" />
    		<meta name="keywords" content="" />
    		<style type="text/css">
    		#container {padding: 50px;}
    		ul {
    			margin: 0;
    			padding: 0;
    			list-style: none;
    			font: 12px/1.2 Arial, Helvetica, Sans-serif;
    			color: #999;
    		}
    		li {
    			position: relative;
    			float: left;
    			width: 100px;
    			text-align: center;
    		}
    		li:before, li:after {
    			content: '';
    			position: absolute;
    		}
    		li:before {
    			width: 20px;
    			height: 20px;
    			background-color: #999;
    			border-radius: 25px;
    			top: -23px;
    			left: 50%;
    			margin-left: -10px;
    			z-index: 10
    		}
    		li:after {
    			width: 100%;
    			height: 3px;
    			background-color: #999;
    			left: -50%;
    			top: -15px;
    		}
    		li:first-child:after {content: none;}
    		li.active {color: #085B4B;}
    		li.active:before,li.active:after {background-color: #085B4B;}
    		</style>
    	</head>
    	<body>
    		<div id="container">
    			<ul>
    				<li class="active">item 1</li>
    				<li class="active">item 2</li>
    				<li>item 3</li>
    				<li>item 4</li>
    				<li>item 5</li>
    			</ul>
    		</div>
    	</body>
    </html>

  • Users who have thanked VIPStephan for this post:

    prajwala (11-15-2013)

  • #3
    New Coder
    Join Date
    Feb 2007
    Posts
    77
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Thank you for your code
    But I want this to be displayed on IE8/9,ff and chrome.
    In IE8 it doesn't work.For that, i guess i need to use images.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,677
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    I haven’t looked at it in IE 8 but I suppose the only problem is the rounded corners. Yes, you can easily replace the background color with an image or use something like CSS3PIE. But I think images are better in this case.

  • #5
    New Coder
    Join Date
    Feb 2007
    Posts
    77
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Can we achieve the same result using corner.js?


  •  

    Posting Permissions

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