Solved

Align UI elements

Posted on 2012-03-18
7
251 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
LVL 11

Expert Comment

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

Expert Comment

by:LZ1
Comment Utility
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
Comment Utility
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
Comment Utility
Thanks, everyone!
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

772 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now