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
Solved

Align UI elements

Posted on 2012-03-18
7
253 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 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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
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 Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
$q.all is slower or not  in  Angularjs 2 22
Hide un-named HTML Label with CSS 14 36
CSS SASS 4 34
Is sending authentication through SOAP secure? 3 16
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

839 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