I come from a WinForms background and attempting to learn WebForms. I have a test page that will be experimenting with Validation and have a question on the best way to lay it out. I am using tables/css and wondering how this same layout would be done using
Div/CSS (or even if it SHOULD be done this way):
BillyM2010
Member
25 Points
35 Posts
Newbie question on laying out a table/css file as div/css (or even if I should)
Feb 13, 2012 05:50 PM|LINK
I come from a WinForms background and attempting to learn WebForms. I have a test page that will be experimenting with Validation and have a question on the best way to lay it out. I am using tables/css and wondering how this same layout would be done using Div/CSS (or even if it SHOULD be done this way):
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Layout.aspx.cs" Inherits="Layout" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Layout Test</title> <style type="text/css"> .style1 { width: 100%; height: 10px; } .style2 { font-weight: bold; } .style3 { width: 250px; } .style4 { width: 100%; height: 50px; background-color: #00FF00; font-weight: bold; } .style5 { width: 100%; height: 50px; background-color: #00FFFF; font-weight: bold; } </style> </head> <body> <form id="form1" runat="server" defaultfocus="txtName" defaultbutton="btnSubmit"> <div> <table class="style4"> <tr> <td align=center> <asp:Label ID="Label10" runat="server" Text="HEADER"></asp:Label> </td> </tr> </table> <br /> <table cellpadding="0" cellspacing="0" class="style1"> <tr class="style2"> <td class="style3"> <asp:Label ID="Label1" runat="server" Text="Description"></asp:Label></td> <td> <asp:Label ID="Label9" runat="server" Text="Value"></asp:Label></td> </tr> <tr> <td class="style3"> <asp:Label ID="Label2" runat="server" Text="Name:"></asp:Label></td> <td> <asp:TextBox ID="txtName" runat="server" Width="300px"></asp:TextBox> </td> </tr> <tr> <td class="style3"> <asp:Label ID="Label3" runat="server" Text="ID (Multiple of 5):"></asp:Label></td> <td> <asp:TextBox ID="txtID" runat="server" Width="300px"></asp:TextBox></td> </tr> <tr> <td class="style3"> <asp:Label ID="Label4" runat="server" Text="Day Off (04/01/2012 - 04/30/2010):"></asp:Label></td> <td> <asp:TextBox ID="txtDayOff" runat="server" Width="300px"></asp:TextBox></td> </tr> <tr> <td class="style3"> <asp:Label ID="Label5" runat="server" Text="Age (>= 18):"></asp:Label></td> <td> <asp:TextBox ID="txtAge" runat="server" Width="300px"></asp:TextBox></td> </tr> <tr> <td class="style3"> <asp:Label ID="Label6" runat="server" Text="Email:"></asp:Label></td> <td> <asp:TextBox ID="txtEmail" runat="server" Width="300px"></asp:TextBox></td> </tr> <tr> <td class="style3"> <asp:Label ID="Label7" runat="server" Text="Password:"></asp:Label></td> <td> <asp:TextBox ID="Password" runat="server" Width="300px"></asp:TextBox></td> </tr> <tr> <td class="style3"> <asp:Label ID="Label8" runat="server" Text="Reenter Password:"></asp:Label></td> <td> <asp:TextBox ID="txtRenterPassord" runat="server" Width="300px"></asp:TextBox></td> </tr> </table> <br /> <asp:Button ID="btnSubmit" runat="server" Text="Submit" /> <br /> <br /> <asp:CheckBox ID="cbValidateEnabled" runat="server" Checked="True" Text="Validate Enabled" /> <br /> <asp:CheckBox ID="cbClientsideValidation" runat="server" Checked="True" Text="Client-side Validation Enabled" /> <br /> <asp:CheckBox ID="cbShowSummary" runat="server" Checked="True" Text="Show Summary" /> <br /> <asp:CheckBox ID="cbShowMessageBod" runat="server" Text="Show Message Box" /> <br /> <br /> <table align="center" class="style5"> <tr> <td align="center"> FOOTER</td> </tr> </table> </div> </form> </body> </html>