Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Align UI elements

Posted on 2012-03-18
7
Medium Priority
?
260 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
[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
  • 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
Plesk WordPress Toolkit

Plesk's WordPress Toolkit allows server administrators, resellers and customers to manage their WordPress instances, enabling a variety of development workflows for WordPress admins of all skill levels, from beginners to pros.

See why 2/3 of Plesk servers use it.

 
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

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

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

When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to count occurrences of each item in an array.

609 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