Example of Design Box using CSS

  
 
 


Images must be in RoundedImages Folder. It is very simple design for shape.


<html>
<body margin="2px">
<STYLE>
BODY { SCROLLBAR-FACE-COLOR: #edf0d9; SCROLLBAR-HIGHLIGHT-COLOR: #edf0d9; SCROLLBAR-SHADOW-COLOR: #cccccc; SCROLLBAR-3DLIGHT-COLOR: #808080; SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-TRACK-COLOR: #808080; SCROLLBAR-DARKSHADOW-COLOR: #e6f2ff }
.subtitle
{
 FONT-SIZE: 10pt;
 COLOR: #ffffff;
 font-weight:bold;
    FONT-STYLE: normal;
    padding-top:2;
    padding-bottom:2;
    FONT-FAMILY: Verdana, Arial, Arial, Helvetica;
}
td
{
 FONT-FAMILY: Verdana, Arial, Arial, Helvetica;
 font-size:12;
 font-weigth:bold;
}
.spacing
{
 padding:2;
}
.graybgfill
{
 background-color: #919191;
}
.bluebgfill
{
 background-color: #86bdf5;
}
</style>
<table cellSpacing="0" cellPadding="5" width="50%" align="center" border="0">
 <tr>
  <td bgcolor="#6699cc">
   <table width="100%" cellspacing="0" cellpadding="0">
    <tr>
     <td align="left" valign="top" bgcolor="#FFFFFF"><img src="RoundedImages/ctl.gif" bgcolor="#FFFFFF"></td>
     <td bgcolor="#FFFFFF"></td>
     <td align="right" valign="top" bgcolor="#FFFFFF"><img src="RoundedImages/ctr.gif"></td>
    </tr>
    <tr>
     <td align="left" valign="top" bgcolor="#FFFFFF" colspan="3" height="50">
     </td>
    </tr>
    <tr>
     <td align="left" valign="bottom" bgcolor="#FFFFFF"><img src="RoundedImages/cbl.gif" bgcolor="#FFFFFF"></td>
     <td bgcolor="#FFFFFF"></td>
     <td align="right" valign="bottom" bgcolor="#FFFFFF"><img src="RoundedImages/cbr.gif"></td>
    </tr>
   </table>
  <td>
 </tr>
</table>
<br>
<table cellSpacing="0" cellPadding="0" width="50%" align="center" border="0">
 <tr>
  <td style="WIDTH: 2%" vAlign="top" align="left" bgColor="#86bdf5"><IMG height="11" src="RoundedImages\Hctl.gif" width="11"></td>
  <td class="subtitle" align="center" bgColor="#86bdf5">
  Sub Title</td>
  <td style="WIDTH: 2%" vAlign="top" align="right" bgColor="#86bdf5"><IMG height="11" src="RoundedImages\Hctr.gif" width="11"></td>
 </tr>
 <tr>
  <td class="bluebgfill" vAlign="top" align="left" colSpan="3">
   <table style="WIDTH: 100%" cellSpacing="0" cellPadding="1" border="0">
    <tr>
     <td class="bluebgfill">
      <table style="WIDTH: 100%" cellSpacing="0" cellPadding="0" border="0">
       <tr>
        <td bgColor="#ffffff">
        <!-- Add rows and columns for this table According to the screen design -->
        <table cellSpacing="2" cellPadding="1" width="100%" border="0">
         <tr id="trDept">
          <td class="FooterLabelMandatory" align="right" width="30%" colSpan="1" rowSpan="1">
          Name&nbsp;<br>
          </td>
          <td class="spacing" align="left" width="65%" colSpan="1" rowSpan="1"><input name="txtAcronymName" type="text" maxlength="50" id="txtAcronymName" class="TextControl" style="width:200px;" />&nbsp;</td>
         </tr>
         <tr id="trDept">
          <td class="FooterLabelMandatory" align="right" width="30%" colSpan="1" rowSpan="1">
          Age&nbsp;<br>
          </td>
          <td class="spacing" align="left" width="65%" colSpan="1" rowSpan="1"><input name="txtAcronymName" type="text" maxlength="50" id="txtAcronymName" class="TextControl" style="width:200px;" />&nbsp;</td>
         </tr>
        </table>
        <!-- Ends Here --></td>
       </tr>
      </table>
     </td>
    </tr>
   </table>
  </td>
 </tr>
</table>
</body>
</html>


This HTML Page looks like,

00:17 | Category: | 0 comments

Comments (0)

Post a Comment