Validation CSS In ASP.NET

Validation CSS In ASP.NET

ASPX PAGE :-

<table cellpadding="0" cellspacing="30" >
            <tr>
                <td>
                    First Name:
                </td>
                <td>
                    <asp:TextBox ID="TextBox1" runat="server" />&nbsp;<asp:RequiredFieldValidator ID="RequiredFieldValidator1"
                        runat="server" CssClass="triangle-border left" ErrorMessage="FirstName Required"
                        ControlToValidate="TextBox1" ValidationGroup="submit"></asp:RequiredFieldValidator><asp:RegularExpressionValidator
                            ID="RegularExpressionValidator1" runat="server" ControlToValidate="TextBox1"
                            ValidationExpression="[a-zA-Z\s]+" CssClass="triangle-isosceles left" ErrorMessage="FName should be alphabetical"
                            Display="Dynamic" EnableClientScript="true"></asp:RegularExpressionValidator>
                </td>
            </tr>
            <tr>
                <td>
                    Last Name:
                </td>
                <td>
                    <asp:TextBox ID="TextBox2" runat="server" />&nbsp;<asp:RequiredFieldValidator ID="RequiredFieldValidator2"
                        runat="server" CssClass="triangle-border left" ErrorMessage="Last Name required"
                        ControlToValidate="TextBox2" ValidationGroup="submit"></asp:RequiredFieldValidator>
                    <asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" ControlToValidate="TextBox2"
                        ValidationExpression="[a-zA-Z\s]+" ErrorMessage="LName should be alphabetical"
                        CssClass="triangle-isosceles left" Display="Dynamic" EnableClientScript="true"></asp:RegularExpressionValidator>
                </td>
            </tr>
            <tr>
                <td>
                </td>
                <td>
                    <asp:Button ID="Button1" runat="server" Text="Submit" ValidationGroup="submit" OnClick="Button1_Click" />
                    <asp:Label ID="Label1" runat="server" Font-Bold="true" />
                </td>
            </tr>
        </table>

Make your website fully responsive by applying css on images and text

RESPONSIVE WEBSITE CSS

<div class="section group">      
        <div class="col span_1_of_3">
            <p>
                <asp:Image ID="Image1" runat="server" ImageUrl="~/Bookmarks.png" /></p>
        </div>
        <div class="col span_1_of_3">
            <p>
                <asp:Image ID="Image2" runat="server" ImageUrl="~/Bookmarks.png" /></p>
        </div>
        <div class="col span_1_of_3">
            <p>
                Before we go to a database and talk about models, though, let's first talk about
                passing information from the controller to a view. Controller classes are invoked
                in response to an incoming URL request. A controller class is where you write the
                 is a dynamic object, which means you can put whatever you want in to it; the ViewBag
                object has no defined properties until you put something inside it. The complete
                HelloWorldController.cs file looks like this:</p>
        </div>
    </div>

CSS

/*  SECTIONS  */
.section
{
    clear: both;
    padding: 0px;
    margin: 0px;
}

/*  COLUMN SETUP  */
.col
{
    display: block;
    float: left;
    margin: 1% 0 1% 1.6%;
}
.col:first-child
{
    margin-left: 0;
}


/*  GROUPING  */
.group:before, .group:after
{
    content: "";
    display: table;
}
.group:after
{
    clear: both;
}

/*  GRID OF THREE  */
/*.span_3_of_3 {
    width: 100%;
}
.span_2_of_3 {
    width: 66.1%;
}
.span_1_of_3 {
    width: 32.2%;
}*/
.span_3_of_3
{
    width: 100%;
}
.span_2_of_3
{
    width: 66.1%;
}
.span_1_of_3
{
    width: 32.2%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px)
{
    .col1
    {
        margin: 1% 0 1% 0%;
    }
    .col
    {
        margin: 1% 0 1% 0%;
    }
    .col
    {
        margin: 1% 0 1% 0%;
    }
}

@media only screen and (max-width: 480px)
{
    .span_3_of_3
    {
        width: 100%;
    }
    .span_2_of_3
    {
        width: 100%;
    }
    .span_1_of_3
    {
        width: 100%;
    }
}
img
{
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

.video embed, .video object, .video iframe
{
    width: 100%;
    height: auto;
}
/*---------------------------------------------------Page CSS---------------------------------------------------*/

.header
{
    background: url(../bg_top_img.jpg);
    height:90%;
}
.logoimage
{
    background:url(../Images/logo.png);
    margin-left:17%;
    margin-top:2%;
}
.search
{
   
}

                                               Full  Resolution   1366 x 768

                                                   Resize   800 x 600

                                                      Mobile View