improve the design on this asp.net form

Question

RickyG 0 Newbie Poster

14 Years Ago

Hi there Expert Designers, I am building a Web form for a medical institution, can you give me an advise in how to make this form look cool??

<%@ Master Language="C#" CodeFile="MasterPage.master.cs" Inherits="MasterPage" EnableViewState="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <script type="text/javascript">
      function OnClick1() {
          if (divCalendar.style.display == "none")
              divCalendar.style.display = "";
          else
              divCalendar.style.display = "none";
      }
        </script> 
        
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
 <title>Procedure Tracer</title>

<link rel="stylesheet" href="style.css" />
</head>
<body>
<form id="form1" runat="server">
    <div class="BackgroundGradient"> </div>
    <div class="BodyContent">

    <div class="BorderBorder"><div class="BorderBL"><div></div></div><div class="BorderBR"><div></div></div><div class="BorderTL"></div><div class="BorderTR"><div></div></div><div class="BorderT"></div><div class="BorderR"><div></div></div><div class="BorderB"><div></div></div><div class="BorderL"></div><div class="BorderC"></div><div class="Border">

        <div class="Header">
          <div class="HeaderTitle">
            <h1>Procedure Tracer</h1>
            <h2></h2>
          </div>
        </div><div class="Columns"><div class="MainColumn">
        <div class="ArticleBorder"></div>
            <asp:ContentPlaceHolder id="Content" runat="server" >

                <div>
                </div>
            </asp:ContentPlaceHolder>

        </div></div></div></div> </div>
          
    </form>
</body>
</html>



css



body{font-family:Calibri,Arial,Helvetica,sans-serif;margin:0;background:#93EFEF;color:#000;background:#93EFEF;}
ul{margin:5px;padding-left:20px;}
.BodyContent{position:relative;left:0;top:0;width:100%;margin:0 auto 0 auto;}
.BackgroundGradient{position:absolute;left:0;top:0;width:100%;height:100%;z-index:-1000;background:url('images/BackgroundGradient.png') repeat-x;}
.Border{position:relative;z-index:1;overflow:hidden;padding:5px 5px 5px 5px;color:#000;font-size:16px;}
.Border a{color:#00152D;text-decoration:underline;}
.Border a:visited{color:#00152D;text-decoration:underline;}
.Border a:hover{color:#000;text-decoration:none;}
.BorderBorder{z-index:0;position:relative;margin:0;}
.BorderTL,.BorderTR,.BorderBL,.BorderBR,.BorderL,.BorderT,.BorderR,.BorderB,.BorderC{position:absolute;z-index:-1;overflow:hidden;}
.BorderTL,.BorderTR,.BorderBL,.BorderBR{width:7px;height:7px;}
.BorderTL{top:0;left:0;background-image:url('images/BorderCorners.png');}
.BorderTR div,.BorderBL div,.BorderBR div{height:14px;width:14px;position:absolute;z-index:-1;background-image:url('images/BorderCorners.png');}
.BorderTR div{left:-7px;}
.BorderBL div{top:-7px;}
.BorderBR div{left:-7px;top:-7px;}
.BorderTR{top:0;right:0;}
.BorderBL{bottom:0;left:0;}
.BorderBR{bottom:0;right:0;}
.BorderT,.BorderB{left:7px;right:7px;height:7px;}
.BorderT{top:0;background-image:url('images/BorderHorizontal.png');}
.BorderB{bottom:0;}
.BorderB div{position:absolute;z-index:-1;top:-7px;height:14px;width:100%;background-image:url('images/BorderHorizontal.png');}
.BorderL,.BorderR{top:7px;bottom:7px;width:7px;}
.BorderL{left:0;background-image:url('images/BorderVertical.png');}
.BorderR{right:0;}
.BorderR div{position:absolute;z-index:-1;left:-7px;width:14px;height:100%;background-image:url('images/BorderVertical.png');}
.BorderC{left:7px;top:7px;right:7px;bottom:7px;background-image:url('images/BorderCenter.png');}
.BorderBorder{width:900px;margin:10px auto;}
.Header{position:relative;background-image:url('images/Header.png');background-repeat:no-repeat;padding:0;height:150px;color:#FFF;}
.HeaderTitle{height:150px;width:900px;display:table-cell;vertical-align:Middle;color:#FFF;font-size:24px;text-decoration:none;font-style:normal;font-weight:bold;}
.HeaderTitle h1 a,.HeaderTitle h1 a:link,.HeaderTitle h1 a:visited,.HeaderTitle h1 a:hover{text-decoration:none;color:inherit;}
.HeaderTitle h1{margin:0;padding:0 8px;color:#FFF;font-family:Palatino Linotype,Book Antiqua,Palatino,serif;font-size:36px;text-decoration:none;font-style:normal;font-weight:bold;}
.HeaderTitle h2{margin:0;padding:0 8px;font-size:inherit;font-weight:inherit;}


.Columns{overflow:hidden;}
.Column1{overflow:hidden;float:right;width:20%;}
.Column2{overflow:hidden;float:right;width:20%;}
.MainColumn{overflow:hidden;}
img{border:0;}
h2{margin:0;}
blockquote{width:80%;color:#000;border:solid 1px #3B3B2B;background:#FFF;margin:0 auto;padding:15px;}
blockquote a,blockquote a:link{color:#00628B!important;text-decoration:underline;}
blockquote a:visited{color:#00628B!important;text-decoration:underline;}
blockquote a:hover{color:#000!important;text-decoration:none;}
.Article{position:relative;z-index:1;overflow:hidden;padding:15px 15px 15px 15px;color:#000;font-size:16px;}
.Article a{color:#00628B;text-decoration:underline;}
.Article a:visited{color:#00628B;text-decoration:underline;}
.Article a:hover{color:#000;text-decoration:none;}
.ArticleBorder{z-index:0;position:relative;margin:3px;}
.ArticleTL,.ArticleTR,.ArticleBL,.ArticleBR,.ArticleL,.ArticleT,.ArticleR,.ArticleB,.ArticleC{position:absolute;z-index:-1;overflow:hidden;}
.ArticleTL,.ArticleTR,.ArticleBL,.ArticleBR{width:12px;height:12px;}
.ArticleTL{top:0;left:0;background-image:url('images/ArticleCorners.png');}
.ArticleTR div,.ArticleBL div,.ArticleBR div{height:24px;width:24px;position:absolute;z-index:-1;background-image:url('images/ArticleCorners.png');}
.ArticleTR div{left:-12px;}
.ArticleBL div{top:-12px;}
.ArticleBR div{left:-12px;top:-12px;}
.ArticleTR{top:0;right:0;}
.ArticleBL{bottom:0;left:0;}
.ArticleBR{bottom:0;right:0;}
.ArticleT,.ArticleB{left:12px;right:12px;height:12px;}
.ArticleT{top:0;background-image:url('images/ArticleHorizontal.png');}
.ArticleB{bottom:0;}
.ArticleB div{position:absolute;z-index:-1;top:-12px;height:24px;width:100%;background-image:url('images/ArticleHorizontal.png');}
.ArticleL,.ArticleR{top:12px;bottom:12px;width:12px;}
.ArticleL{left:0;background-image:url('images/ArticleVertical.png');}
.ArticleR{right:0;}
.ArticleR div{position:absolute;z-index:-1;left:-12px;width:24px;height:100%;background-image:url('images/ArticleVertical.png');}
.ArticleC{left:12px;top:12px;right:12px;bottom:12px;background-image:url('images/ArticleCenter.png');}
.Article h2{color:#000;font-size:24px;text-decoration:none;font-style:normal;font-weight:bold;}
.Article h2 a,.Article h2 a:visited{color:#000;text-decoration:none;}
.Article h2 a:hover{text-decoration:underline;}
.Block{position:relative;z-index:1;overflow:hidden;padding:10px 10px 10px 10px;color:#000;font-size:16px;}
.Block a{color:#00628B;text-decoration:underline;}
.Block a:visited{color:#00628B;text-decoration:underline;}
.Block a:hover{color:#000;text-decoration:none;}
.BlockBorder{z-index:0;position:relative;margin:3px;}
.BlockTL,.BlockTR,.BlockBL,.BlockBR,.BlockL,.BlockT,.BlockR,.BlockB,.BlockC{position:absolute;z-index:-1;overflow:hidden;}
.BlockTL,.BlockTR,.BlockBL,.BlockBR{width:12px;height:12px;}
.BlockTL{top:0;left:0;background-image:url('images/BlockCorners.png');}
.BlockTR div,.BlockBL div,.BlockBR div{height:24px;width:24px;position:absolute;z-index:-1;background-image:url('images/BlockCorners.png');}
.BlockTR div{left:-12px;}
.BlockBL div{top:-12px;}
.BlockBR div{left:-12px;top:-12px;}
.BlockTR{top:0;right:0;}
.BlockBL{bottom:0;left:0;}
.BlockBR{bottom:0;right:0;}
.BlockT,.BlockB{left:12px;right:12px;height:12px;}
.BlockT{top:0;background-image:url('images/BlockHorizontal.png');}
.BlockB{bottom:0;}
.BlockB div{position:absolute;z-index:-1;top:-12px;height:24px;width:100%;background-image:url('images/BlockHorizontal.png');}
.BlockL,.BlockR{top:12px;bottom:12px;width:12px;}
.BlockL{left:0;background-image:url('images/BlockVertical.png');}

.BlockR{right:0;}
.BlockR div{position:absolute;z-index:-1;left:-12px;width:24px;height:100%;background-image:url('images/BlockVertical.png');}
.BlockC{left:12px;top:12px;right:12px;bottom:12px;background-image:url('images/BlockCenter.png');}


.BlockHeader{border:0;margin:0;background:transparent url('images/BlockHeaderAnchor.png') no-repeat top left;position:relative;overflow:hidden;height:28px;padding:0 0 0 18px;display:block;color:#FFF;font-size:16px;font-weight:bold;vertical-align:middle;}
.BlockHeader span{border:0;margin:0;background:transparent url('images/BlockHeader.png') no-repeat right top;display:block;position:relative;color:#FFF;line-height:18px;}
.BlockHeader span{padding:5px 18px 5px 0;}
.BlockHeader{margin:0 0 7px 0;}
.BlockContentBorder{position:relative;z-index:1;overflow:hidden;padding:5px 5px 5px 5px;color:#000;font-size:16px;margin:0;}
.BlockContentBorder a{color:#00628B;text-decoration:underline;}
.BlockContentBorder a:visited{color:#00628B;text-decoration:underline;}
.BlockContentBorder a:hover{color:#000;text-decoration:none;}

.Footer{color:#000;font-size:16px;text-align:Center;background:url('images/Footer.png') bottom left;overflow:hidden;padding:5px 5px;}
.Footer a{color:#00628B;text-decoration:underline;}
.Footer a:visited{color:#00628B;text-decoration:underline;}
.Footer a:hover{color:#000;text-decoration:none;}

div.procedure
{
    font-family:"Times New Roman", Arial, Sans-Serif; 
    font-size:larger;
}
div.bottom
{
    font-family:"Times New Roman", Arial, Sans-Serif; 
    font-size:large;
     text-align:right
}



.dropDownList
{
    position:relative;
    left: 1%;
}

.dropDownList2
{
    position:relative;
    left: 17%;
}

.dropDownListDept
{
    position:relative;
    left: 14%;
}

.dateFont
{
    font-family: "Times New Roman", Arial, Sans-Serif;
    font-size: 12pt;
    font-style:italic;
}

#procedureTracerTable
{
    border-collapse: collapse;
    
}

TD.tableRowHeader
{
    font-size: 24pt;
}

tr.alt
{
    background-color: #bbd2f0;
}

tr.alt2
{
    background-color: #ededed;
}
.validationFont
{
    font-family: "Arial, Helvetica", sans-serif;
    font-size: x-small;
    color: #FF0000;
}

.downButton
{
    text-align: right;
}

asp.net html-css image javascript web-design

2 Contributors
1 Reply
154 Views
1 Day Discussion Span
Latest Post 14 Years Ago Latest Post by pritaeas

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster · Answer 1 · 2010-07-28T16:21:57+00:00

Put the form online, so we can see the result. Then commenting will be much easier.