Progress bar layout using CSS and HTML - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Layout

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Layout

Description

Progress bar layout using CSS and HTML

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head> 
  <style type="text/css">
#container {<!--from   w  w  w. j  a va 2 s .  c  o m-->
   width:351px;
}

#main_bar {
   width:375px;
   height:36px;
   border:2px solid Chartreuse;
}

#inner_bar {
   float;left;
   width:150px;
   background:#00ff00;
   margin:-20px 0 0 5px;
}
p {
   margin-top:-34px;
   text-align:center;
}
</style> 
  <title>Lorem ipsum dolor </title> 
 </head> 
 <body> 
  <div id="container"> 
   <div id="main_bar"> 
   </div> 
   <!--#main_bar--> 
   <div id="inner_bar"> 
    <p>Lorem</p> 
   </div> 
   <!--#inner_bar--> 
   <p>Lor</p> 
  </div>  
 </body>
</html>

Related Tutorials