Help- Aligning controls in .aspx page

R

Raj

Hi,

I have a ASP.NET project which is working fine and I need to align
controls in a .aspx page. The webform( .aspx page) has variety of
controls (labels, textboxes, radio buttons etc) and when a user resizes
the window, I would like these controls to center align in the page. Is
there a way to do this using visual studio? I did some research and
found a way using <table> <tr> <td> tags. But this is becoming
cumbersome for me because each row doesn't have the same number of
columns and relative positions of the controls on the page are lost.
Then I tried creating a table for each row. I have a feeling there
might be a better way to do all this using visual studio itself. Can
any one please point me in the right direction? Thank you!!

-Raj
 
J

Jay Douglas

Raj,

I'm not too sure how your HTML currently looks. Are you just using the
designer drag and drop in grid mode that uses absolute positioning or are
you basically putting controls down the page and using <br> and <p> tags.

If you're not using absolute positioning, try just placing all your controls
in one table cell with align center.

An example:

<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center">
Place all your controls and HTML as you already have it
</td>
</tr>
</table>
 
G

Guest

How about using <div>?

Not knowing exactly what you have and seeing it, perhaps the following might
be more useful.

<div align="center">
<asp:textBox id="whatever" runat="server"/>
</div>

You can assign each div a class and position it as required. I use divs
exclusively for layout, and use tables only for data presentation (ie,
rosters, etc.).

Another thought would be to create styles in CSS and use the CssClass
attribute of the control to put it where you want it.

Jim Hawley
 
R

Raj

Thank you Jay and Jim for your prompt responses. I am new to ASP.NET as
well as web programming. I am using designer drag and drop of visual
studio. The html part of it looks like this:
<%@ Page Language="vb" AutoEventWireup="false"
Codebehind="Forgot.aspx.vb" Inherits="OOLSignon.Forgot"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>Forgot</title>
<meta content="Microsoft Visual Studio.NET 7.0" name="GENERATOR">
<meta content="Visual Basic 7.0" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5"
name="vs_targetSchema">
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<asp:label id="lblTitle" style="Z-INDEX: 101; LEFT: 305px;
POSITION: absolute; TOP: 33px" runat="server" ForeColor="Navy"
Font-Bold="True" Font-Size="Large">Welcome to the UserID/Password
Retrieval System</asp:label>
<asp:label id="lblSSN" style="Z-INDEX: 102; LEFT: 410px; POSITION:
absolute; TOP: 96px" runat="server">SSN</asp:label>
<asp:textbox id="txtSSN" style="Z-INDEX: 103; LEFT: 462px;
POSITION: absolute; TOP: 94px" runat="server"></asp:textbox>
<asp:button id="btnLookup" style="Z-INDEX: 104; LEFT: 651px;
POSITION: absolute; TOP: 92px" tabIndex="5" runat="server" Width="95px"
Text="Find Me" Height="25px" EnableViewState="False"
CausesValidation="False"></asp:button>
<asp:label id="lblSSNMsg" style="Z-INDEX: 108; LEFT: 413px;
POSITION: absolute; TOP: 125px" runat="server" ForeColor="Red"
Width="375px" Visible="False">Error</asp:label>
<asp:label id="lblSecQuestionLbl" style="Z-INDEX: 109; LEFT: 411px;
POSITION: absolute; TOP: 156px" runat="server" Visible="False">Security
Question:</asp:label>
<asp:label id="lblSecurityQuestion" style="Z-INDEX: 105; LEFT:
529px; POSITION: absolute; TOP: 155px" runat="server"
Visible="False">Security Question</asp:label>
<asp:label id="lblAnswer" style="Z-INDEX: 110; LEFT: 413px;
POSITION: absolute; TOP: 184px" runat="server"
Visible="False">Answer:</asp:label>
<asp:textbox id="txtSecAnswer" style="Z-INDEX: 106; LEFT: 529px;
POSITION: absolute; TOP: 185px" runat="server"
Visible="False"></asp:textbox>
<asp:radiobuttonlist id="rblUserIDPasswd" style="Z-INDEX: 114;
LEFT: 412px; POSITION: absolute; TOP: 225px" runat="server"
Visible="False" AutoPostBack="True">
<asp:ListItem Value="0">Forgot User ID</asp:ListItem>
<asp:ListItem Value="1">Forgot Password</asp:ListItem>
</asp:radiobuttonlist>
<asp:label id="lblUserID" style="Z-INDEX: 113; LEFT: 413px;
POSITION: absolute; TOP: 294px" runat="server" Visible="False">User
ID:</asp:label>
<asp:textbox id="txtUserID" style="Z-INDEX: 107; LEFT: 529px;
POSITION: absolute; TOP: 292px" runat="server"
Visible="False"></asp:textbox>
<asp:button id="btnEMail" style="Z-INDEX: 112; LEFT: 506px;
POSITION: absolute; TOP: 356px" tabIndex="5" runat="server"
Width="95px" Height="25px" Visible="False" Text="EMail
Me"></asp:button>
<asp:label id="lblInfo" style="Z-INDEX: 111; LEFT: 412px; POSITION:
absolute; TOP: 401px" runat="server" ForeColor="Red"
Visible="False">Info</asp:label>
<asp:hyperlink id="hlHome" style="Z-INDEX: 115; LEFT: 524px;
POSITION: absolute; TOP: 470px" runat="server"
NavigateUrl="OOLSignon.aspx">Home</asp:hyperlink>
</form>
</body>
</HTML>

How can I change this so that the controls retain their relative
positions with respect to each other and at the same time reposition
themselves when a window is made small/large. Looks like we can't do
this in visual studio. Is that right?
Thank you for your help.
-Raj
 
T

tdavisjr

If you are using the designer drag and drop then you will be absolutely
positioning your controls. To get a more flow layout you need to use
either a table layout or a css layout. As a beginner, I would go for a
table based page layout. Do a google search for HTML Table based page
layout.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,743
Messages
2,569,478
Members
44,899
Latest member
RodneyMcAu

Latest Threads

Top