Create panel with title - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Panel

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Panel

Description

Create panel with title

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

#default-buttons-0 {<!--from  w w w  . j a  va  2 s. c o  m-->
   position: absolute;
   bottom: 15px;
   right: 15px
}

a.button-back {
   float: left;
   padding-top: 500px;
}

fieldset input.finish {
   border-style: none;
   cursor: pointer;
   padding: 3px 9px;
}

fieldset a.button-back,
a.button-next,
.finish {
   background-color: #AAA;
   color: #FFF;
   padding: 5px 10px;
   text-decoration: none;
   border-radius: 4px;
   -khtml-border-radius: 4px;
   -moz-border-radius: 4px;
   -opera-border-radius: 4px;
   -webkit-border-radius: 4px;
}

fieldset a.button-back:hover,
a.button-next:hover,
.finish:hover {
   background-color: #69C;
}

fieldset.step {
   border: 1px solid #black;
   clear: left;
   font-size: 12px;
   width: 470px;
   height: 475px;
   background-color: #D4EAFE;
   padding: 5px;
   position: relative
}

fieldset.step label {
   color: #444;
   display: block;
   font: bold 10px verdana;
   margin: 10px 0 3px 7px;
}

fieldset.step legend {
   color: #000;
   font: bold 14px verdana;
   padding: 0 2px 3px 2px;
}

fieldset.step input,
fieldset.step textarea,
fieldset.step select {
   border: 1px solid #AAA;
   font: 10px verdana;
   margin-left: 7px;
}

      </style> 
 </head> 
 <body> 
  <div class="right"> 
   <ul id="default-titles" class="stepy-titles"> 
    <form id="default"> 
     <fieldset id="default-step-0" class="step" title="Prescription"> 
      <legend>details</legend> 
      <br> 
      <span>Name</span> 
      <br> 
      <span> <br> <span>Number</span> <br> <span> <br> <span> <br> <span>Last Filled</span> 
      <br> <span> <br> <span>Refill Days</span> <br> <span> <br> <span>Would you like to be Reminded?</span>
       <input id="chkReminder" type="checkbox"> <br> <br> <p id="default-buttons-0" class="default-buttons"> 
       <a id="default-next-0" class="button-next" href="javascript:void(0);">Next &gt;</a> </p> </span> </span> </span> </span> </span> 
     </fieldset> 
    </form> 
   </ul> 
  </div>  
 </body>
</html>

Related Tutorials