?
Solved

Align UI elements

Posted on 2012-03-18
7
Medium Priority
?
261 Views
Last Modified: 2012-03-19
Please let me know how I can align all elements (text box, radio button) on the same margin, in a form. The text labels preceding the corresponding UI element should be right aligned.

For ex:
https://edit.yahoo.com/registration?.intl=us&.lang=en-US&.pd=ym_ver%253D0%2526c%253D%2526ivt%253D%2526sg%253D&new=1&.done=http%3A//mail.yahoo.com&.src=ym&.v=0&.u=bqld73h7mdlm6&partner=&.partner=&pkg=&stepid=&.p=&promo=&.last=

Thanks!
0
Comment
Question by:dshrenik
  • 3
  • 3
7 Comments
 
LVL 11

Accepted Solution

by:
SANDY_SK earned 1000 total points
ID: 37737090
Does this help

<STYLE type="text/css">

.alignLeft{
	TEXT-ALIGN:left;
}


.alignRight{
	TEXT-ALIGN:right;
}
</STYLE>

<TABLE>
	<TR>
		<TD class="alignRight"> Name :</TD>
		<TD  class="alignLeft"> <input Type="text" Name="name" ></TD>
	</TR>
	<TR>
		<TD class="alignRight"> Age :</TD>
		<TD class="alignLeft"> <input Type="text" Name="age" size=3></TD>
	</TR>
	<TR>
		<TD class="alignRight"> Gender :</TD>
		<TD  class="alignLeft">
			<input Type="radio" Name="gender"> Male
			<input Type="radio" Name="gender"> Female
		</TD>
	</TR>
</TABLE>

Open in new window

0
 
LVL 30

Expert Comment

by:LZ1
ID: 37737348
Please don't use tables to lay this out.  You can do it more semantically this way:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
	#wrapper{width:980px;position:relative;margin:0 auto;}
	#formContainer{width:500px;margin:0 auto;position:relative;}
	fieldset{float:left;clear:both;width:500px;padding:10px;}
	label{float:left;width:250px;text-align:right;margin-right:10px;}
	input{float:left;width:200px;}

</style>
</head>

<body>
	<div id="wrapper">
  	<div id="formContainer">
    	<form>
      	<fieldset>
        	<label>Name:</label>
          <input type="text" id="name">
      	</fieldset>
        
      	<fieldset>
        	<label>Address:</label>
          <input type="text" id="Address">
      	</fieldset>

      	<fieldset>
        	<label>City:</label>
          <input type="text" id="City">
      	</fieldset>

      	<fieldset>
        	<label>State:</label>
          <input type="text" id="State">
      	</fieldset>
      
      	<fieldset>
        	<label>Zip Code:</label>
          <input type="text" id="Zip">
      	</fieldset>
      
      </form>    
    </div><!--end formContainer -->
	</div><!--end wrapper -->

</body>
</html>

Open in new window

0
 
LVL 30

Assisted Solution

by:LZ1
LZ1 earned 1000 total points
ID: 37737355
I forgot to include radio buttons and checkboxes:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
	#wrapper{width:980px;position:relative;margin:0 auto;}
	#formContainer{width:500px;margin:0 auto;position:relative;}
	fieldset{float:left;clear:both;width:500px;padding:10px;}
	label{float:left;width:250px;text-align:right;margin-right:10px;}
	input{float:left;}

</style>
</head>

<body>
	<div id="wrapper">
  	<div id="formContainer">
    	<form>
      	<fieldset>
        	<label>Name:</label>
          <input type="text" id="name">
      	</fieldset>
        
      	<fieldset>
        	<label>Address:</label>
          <input type="text" id="Address">
      	</fieldset>

      	<fieldset>
        	<label>City:</label>
          <input type="text" id="City">
      	</fieldset>

      	<fieldset>
        	<label>State:</label>
          <input type="text" id="State">
      	</fieldset>
      
      	<fieldset>
        	<label>Zip Code:</label>
          <input type="text" id="Zip">
      	</fieldset>
        
        <fieldset>
        	<label>Radio Button1</label>
          <input type="radio">
			
        	<label>Radio Button2</label>
          <input type="radio">

        	<label>Radio Button3</label>
          <input type="radio">
        </fieldset>
        <fieldset>
      		<label>Checkbox 1</label>
          <input type="checkbox">
        </fieldset>
      </form>    
    </div><!--end formContainer -->
	</div><!--end wrapper -->

</body>
</html>

Open in new window

0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 11

Expert Comment

by:SANDY_SK
ID: 37737363
Just out of curiosity, what is wrong with tables??
0
 
LVL 30

Expert Comment

by:LZ1
ID: 37737392
When laying out tabular data(spreadsheet-like), nothing at all. Even when using forms it's acceptable in some situations.  

However, a little CSS and semantic HTML and you can give much better results and allow for much greater control over the elements in the long run.

If you want to find out more about tables vs css just Google:  tables vs css layout

The debate can get hot and heated and in some cases offensive.  Don't say I didn't warn you. :)
0
 
LVL 11

Expert Comment

by:SANDY_SK
ID: 37737424
Hmmm... fair enough......

and as you say i am pretty sure there are enough people to debate on both sides of the topic..
0
 

Author Comment

by:dshrenik
ID: 37738750
Thanks, everyone!
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

750 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