Solved

Position ASP Labels and ASP Textboxes, using CSS

Posted on 2008-06-19
2
2,546 Views
Last Modified: 2010-04-21
Greetings all

I am busy looking at how to position Asp Textboxes and Asp Labels within my page:

1.  With regard to position them underneath each other, I could do one of two things (the only ways that I
     know) - see Snippet 1 & 2.  Are these ok? Are there others?

2. With positioning on the same line, I'm not sure how I get the spacing right, unless I used a style property
    and say left=123px". This doesn't soudn like the best option! Are there btter ways?


In advance, thanks!!

   allanmark
SNIPPET 1:
 
	<asp:Panel ID="pnlLoggedIn" runat="server">
            <asp:Label ID="lblUsername" runat="server"></asp:Label>
	    <br/>
            <asp:Label ID="Label2" runat="server">New password: </asp:Label>
            <asp:TextBox ID="txtPassword" runat="server"></asp:TextBox>
	    <br/>
            <asp:Label ID="Label3" runat="server">Comform password:</asp:Label>        
        </asp:Panel>
 
 
SNIPPET 2:
 
<ul id="newUsers">
<li>First Name:  <asp:textbox runat="server" id="txtFirstName"/>
<li>Last Name: <asp:textbox runat="server" id="txtLastName"/>
<li>Username: <asp:textbox runat="server" id="txtUserName"/>
<li>Password: <asp:textbox runat="server" id="txtPassword"/>
</ul>

Open in new window

0
Comment
Question by:allanmark
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 3

Accepted Solution

by:
joeylu earned 200 total points
ID: 21824358
Using <br /> is the most simpliest way to make each label underneath each other. However, if you need to line up your lable vertically, there are common way to accomplish:

1: Using <div>.. As you mentioned in your post, Put each of your asp label and textbox into each DIV tag, something like
<div style="left: 100px; Top: 50; Position: absolute;">
<asp:Label ID="lblUsername" runat="server"></asp:Label>
</div>
<div style="left: 100px; Top: 75; Position: absolute;">
<asp:Label ID="Label2" runat="server">New password: </asp:Label>
</div>
<div style="left: 175px; Top: 75; Position: absolute;">
<asp:TextBox ID="txtPassword" runat="server"></asp:TextBox>
</div>
<div style="left: 100px; Top: 100; Position: absolute;">
<asp:Label ID="Label3" runat="server">Comform password:</asp:Label>
</div>

This could line up all your controls to any where you want. Remeber, If you can always put a handle div tag and putting them into any Table cell or other DIV tag you like.
Something in CSS like:
div.divHandle {
 position:relative;
}
then in your web form:
<div class="divHandle">
....above code...
</div>


2: The other solution is an old fashion way. Using Table. I attached the code at Code Snippet, Copy and paste it to your web form, you should get the picture
<table width="400" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="150">User Name:</td>
    <td><asp:TextBox ID="txtPassword" runat="server"></asp:TextBox></td>
  </tr>
  <tr>
    <td>New Password:</td>
    <td><asp:TextBox ID="txtPassword" runat="server"></asp:TextBox></td>
  </tr>
  <tr>
    <td>Confirm Password:</td>
    <td><asp:TextBox ID="txtPassword" runat="server"></asp:TextBox></td>
  </tr>
</table>

Open in new window

0
 

Author Closing Comment

by:allanmark
ID: 31468702
Many thanks!!!
0

Featured Post

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

724 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question