Solved

Align UI elements

Posted on 2012-03-18
7
254 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 250 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 250 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
This video teaches users how to migrate an existing Wordpress website to a new domain.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

733 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