Preventing positions of controls from disturbing

I wrote following code to display a Login frame in the center of the page. It is written on Visual Studio 2008. It is not rendered properly when the page is opened on a browser. The Text Boxes and Labels are scattered here and there with the button somewhere else. I don’t want to make use of the table and just want to use div alone.


<body>
    <form id="loginForm" runat="server">
    <div id="divMainLoginPage" runat="server">
        <asp:Image ID="imgLogo" runat="server" ImageUrl="~/Styles/ilogo.png" ImageAlign="Left" />
        <div id="divLogin" runat="server" class="divLoginClass">
            <div id="divUserName" runat="server">
                <asp:Label ID="lblUserName" ForeColor="White" runat="server">User Name:</asp:Label>
                <asp:TextBox ID="txtUserName" runat="server" MaxLength="20"></asp:TextBox><br />
            </div>
            
            <div id="divPassword" runat="server">
                <asp:Label ID="lblPassword" ForeColor="White" runat="server" >Password:</asp:Label>
                <asp:TextBox ID="txtPassword" TextMode="Password" runat="server" MaxLength="25"></asp:TextBox><br />
            </div>
            <br />
            <div id="divLoginButton" runat="server" style="text-align:right">
                <asp:Button ID="btnLogin" runat="server" Width="60" Text="Login" />
            </div>
            
        </div>
    </div>
    </form>
</body>

The CSS code is:

body
{
}

.divLoginClass
{
	width:300px; height:100px;
	background-color: Teal;
	text-align:center;
	margin:0;position:relative;
	top:281px;
	left: 364px;
}

If that code you posted above is actually what the browser sees, then no wonder: that’s not HTML.

You don’t want to use the divs. You want to use form and form control tags. If your form has a class or id on it, you don’t need any of those classes and id’s you’ve got now.

This is a good place to get started with forms: [noparse]http://www.webstandards.org/learn/tutorials/accessible-forms/beginner/[/noparse] There are 3 pages.

Here’s how I would write your form, based on what you posted above:


    <form id="loginForm" action="yourscript" method="post">
      <fieldset>
      <legend>Log in</legend>
         <label for="txtUserName">User Name: </label>
         <input type="text" id="txtUserName" name="username" maxlength="20" /><br />
         <label for="txtPassword">Password: </label>
         <input type="password" id="txtPassword" name="password" maxlength="25" /><br />
         <input type="submit" value="Login" />
      </fieldset>
    </form>

That is all you need for a proper HTML form. You can choose to swap the <br/>'s for divs if you want, but other than that, THIS is what an HTML form looks like.

Do you know how to style it with CSS?

That is ASP.NET code. One div was already by default inside the form tag.

That is ASP.NET code.

Yes, I hear people saying how awesome it is but when it generates HTML pages it sucks hard. Firstly, while you do have an actual form, ASP is rather famous for wrapping entire web pages in form tags. Since forms aren’t allowed to contain other forms, every page that actually needs a form is automatically invalid. Plus forms in forms used to break Opera.

See if you can make that ASP spit out code like I posted above. If you can, you’re on the right track.

I have written a code for a Data Entry Form by using Div. I don’t want to make use of the Table as I heard that it slows the page loading. I want to know how consistent is Div with CSS for entry forms and how ti improve further. My code is given below:


    <div id="divEntryForm" runat="server"  class="CompanyEntryForm">
            <div id="Div1" runat="server" class="label">
                <asp:Label ID="Label1" runat="server" Text="Enter Company Name" AssociatedControlID="txtCompanyName" CssClass="LabelControls"></asp:Label>
            </div>
            
            <div id="Div2" runat="server" class="value">
                <asp:TextBox ID="txtCompanyName" runat="server" CssClass="TxtStyle"></asp:TextBox>
            </div><br />
            
            <div id="Div3" runat="server" class="label">
                <asp:Label ID="Label2" runat="server" Text="Financial Year: [Starts From]" AssociatedControlID="txtFyFrom" CssClass="LabelControls"></asp:Label>
            </div>
            
            <div id="Div4" runat="server" class="value">
                <asp:TextBox ID="txtFyFrom" runat="server" CssClass="TxtStyle" AssociatedControlID="txtFyTo"></asp:TextBox>
            </div><br />

            <div id="Div6" runat="server" class="label">
                <asp:Label ID="Label3" runat="server" Text="Financial Year: [Ends]" AssociatedControlID="txtFyFrom" CssClass="LabelControls"></asp:Label>
            </div>
                        
            <div id="Div5" runat="server" class="value">
                <asp:TextBox ID="txtFyTo" runat="server" CssClass="TxtStyle"></asp:TextBox>
            </div><br />   
            
            <div id="Div7" runat="server" class="label">
                <asp:Label ID="Label4" runat="server" Text="TIN No." AssociatedControlID="txtTinNo" CssClass="LabelControls"></asp:Label>
            </div>
                        
            <div id="Div8" runat="server" class="value">
                <asp:TextBox ID="txtTinNo" runat="server" CssClass="TxtStyle"></asp:TextBox>
            </div><br />   

            <div id="Div9" runat="server" class="label">
                <asp:Label ID="Label5" runat="server" Text="Address: [Line 1]" AssociatedControlID="txtAddress1" CssClass="LabelControls"></asp:Label>
            </div>
                        
            <div id="Div10" runat="server" class="value">
                <asp:TextBox ID="txtAddress1" runat="server" CssClass="TxtStyle"></asp:TextBox>
            </div><br />   
            
            <div id="Div11" runat="server" class="label">
                <asp:Label ID="Label6" runat="server" Text="Address [Line 2]" AssociatedControlID="txtAddress2" CssClass="LabelControls"></asp:Label>
            </div>
                        
            <div id="Div12" runat="server" class="value">
                <asp:TextBox ID="txtAddress2" runat="server" CssClass="TxtStyle"></asp:TextBox>
            </div><br />   
            
            <div id="Div13" runat="server" class="label">
                <asp:Label ID="Label7" runat="server" Text="Place" AssociatedControlID="txtPlace" CssClass="LabelControls"></asp:Label>
            </div>
                        
            <div id="Div14" runat="server" class="value">
                <asp:TextBox ID="txtPlace" runat="server" CssClass="TxtStyle"></asp:TextBox>
            </div><br />   
            
                                                                   
    </div>


Disregard that nonsense. Tables are for displaying tabular data, so if that’s what you have, use a table. To do anything else is not appropriate. Scrap that code and use a properly coded table. The code for a simple table like that has no effect on page load (except perhaps to make it faster, as you need less code. :slight_smile:

I designed an Entry Form using Div and CSS. I want to create a table-less design. But at certain intervals, the position of controls, labels and input boxes, gets disturbed.

How to keep it fixed?

Hi,

We’d need to see the html and css that you are using and then some idea of what you want to happen.:slight_smile:

Laying out forms is no different to laying out anything else apart from the in-built differences in form controls cross browser. It’s all a matter of using the right tools for the elements concerned.

Below is a sample HTML code:


    <form id="loginForm" runat="server" class="loginForm"><br />
    <div id="divMainLoginPage" runat="server" >
        <div class="label" >
            <asp:Label ID="lblUserName" runat="server" CssClass="LabelControls" AssociatedControlID="txtUserName">User Name: </asp:Label>     
        </div>
        
        <div class="value">
            <asp:TextBox ID="txtUserName" runat="server" CssClass="TxtStyle" Width="199px" AutoPostBack="false"></asp:TextBox>
        </div><br />
        
        <div class="label">
            <asp:Label ID="lblPassword" runat="server" CssClass="LabelControls" AssociatedControlID="txtPassword">Password: </asp:Label>     
        </div>
        
        <div class="value">
            <asp:TextBox ID="txtPassword" runat="server" CssClass="TxtStyle" TextMode="Password" Width="199px" AutoPostBack="false"></asp:TextBox>        
        </div><br />
</div>

The CSS code is below:


.TxtStyle
{
   font-family:Arial;
   font-size:12px;
   border:2px solid goldenrod;
   height:20px;
}

.TxtStyle2
{
   font-family:Arial;
   font-size:12px;
   border:2px solid goldenrod;
   width: 300px; 
   height:20px;
}

.LabelControls
{
	color:Black;
	text-align:left;
	position:relative;
}
/* CSS code to align Text Boxes and Labels for a Data-Entry situation */

    .row { clear: both; width: 100%; overflow: hidden; margin: 5px 0; } 
    .label { float: left; text-align: left; margin-left: 5px; width: 90px; }
    .longlabel { float: left; text-align: left; margin-left: 5px; width: 200px; } 
    .value { float: left; text-align: left; }
    .longValue { float: left; text-align: left; width: 300px; }
    
.loginForm
{
	width:310px; 
	height:220px;
	top:200px;
	right:38%;
	background-color:white;
	border: 30px solid green;  
	text-align:center;
	padding: 5px;
	margin:0;
	position:fixed;
}


Scrap that code and use a properly coded table.

It’s not a table, it’s a form. Use form tags.

Hi,

No need for all those divs or floats just keep it simple with inline-block.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.formtest {
    width:350px;
    margin:auto;
}
.formtest label {
    display:inline-block;
    vertical-align:middle;
    width:90px;
    text-align:right;
    margin:10px 0;
}
.formtest input {
    width:200px;
    margin:10px 0;
    vertical-align:middle;
}
</style>
</head>
<body>
<form  class="formtest" id="form1" method="post" action="">
    <fieldset>
    <legend>Address Details</legend>
    <label for="firstname">First Name:</label>
    <input type="text" name="firstname" id="firstname" />
    <br />
    <label for="lastname">Last Name:</label>
    <input type="text" name="lastname" id="lastname" />
    <br />
    <label for="address1">Address 1:</label>
    <input type="text" name="address1" id="address1" />
    <br />
    <label for="address2">Address 2:</label>
    <input type="text" name="address2" id="address2" />
    <br />
    <label for="address3">Address  3:</label>
    <input type="text" name="address3" id="address3" />
    <br />
    <label for="address4">Address 4:</label>
    <input type="text" name="address4" id="address4" />
    <br />
    <label for="city">City:</label>
    <input type="text" name="City" id="city" />
    <br />
    <label for="state">State:</label>
    <input type="text" name="state" id="state" />
    <br />
    <label class="zip" for="zip">Zip:</label>
    <input type="text" name="zip" id="zip" />
    <br />
    <label for="tel">Telephone:</label>
    <input type="text" name="tel" id="tel" />
    <br />
    </fieldset>
</form>
</body>
</html>


Paul has it right – his last post being EXACTLY what you should have for markup for your form…

But good luck getting that steaming pile known as ASP to actually output that. As already mentioned in this thread, what it vomits up and tries to call a form isn’t – and it’s a miracle that their convoluted bloated crap actually works in ANY browser.

Biggest (and most important) think Paul removed being the DIV for NOTHING. You should probably also NOT be setting fonts in an absurdly undersized fixed metric (12px == /FAIL/), actually be including generic fallback families on your font declarations, NOT be declaring a fixed height on it, not be trying to use position:fixed as that’s most always a disaster, as Paul mentioned NOT be using floats and use an actual fieldset… the list goes on and on.