PDA

View Full Version : Forms


LoveArtist
05-12-2008, 08:18 PM
Hi im trying to make a page where people can put in there address and phone number ect but I cant get the form boxes to line up vertically. I can do it when i put random letters in the box will move, but it wont move if i just press space. Anyone know how to get the boxes to line up?

domedia
05-12-2008, 08:48 PM
Their default alignment is to the left, they should line up, so it's something you're doing that makes them not line up. You need to show us the page for any more debugging.

Rob_Che
05-12-2008, 10:24 PM
I think I know what you're doing...
You're trying to use the space bar to move things along a line ?

It really doesn't work like that.
They need to be formatted to line up...

What's your DW knowledge? Have you used HTML / CSS and are you using tables ?

As Dom says... If you can show us the site it would be much easier... or post your code.

Rob

LoveArtist
05-12-2008, 11:36 PM
http://www.reviewyourtech.com/forms2.html

thats the site url, you see the yellow boxes, I want them to line up vertically so there left most side is right under the one above its left most side. I know it dosent really matter accept for asthetics but it would still be nice. Thanks for your help. Heres my code, i dont really know html or css im still learning.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="twoColHybLtHdr4.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColHybLtHdr #sidebar1 { padding-top: 30px; }
.twoColHybLtHdr #mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it may need to avoid several bugs */
</style>
<![endif]-->
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
</head>

<body class="twoColHybLtHdr">

<div id="container">
<div id="header">
<h1>Header</h1>
<!-- end #header --></div>
<div id="sidebar1">
<!-- end #sidebar1 -->
<ul id="MenuBar1" class="MenuBarVertical">
<li><a class="MenuBarVertical" href="inex.html">Home</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
</ul>
<ul id="MenuBar2" class="MenuBarVertical">
<li><a class="MenuBarVertical" href="feedback.html">About Us</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
<ul>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
</ul>
<ul id="MenuBar3" class="MenuBarVertical">
<li><a class="MenuBarVertical" href="feedback.html">Contact Me</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
<ul>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
</ul>
<ul id="MenuBar4" class="MenuBarVertical">
<li><a class="MenuBarVertical" href="feedback.html">Contact Me</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
<ul>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
</ul>
<ul id="MenuBar5" class="MenuBarVertical">
<li><a class="MenuBarVertical" href="feedback.html">Contact Me</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
<ul>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
</ul>
</div>
<div id="mainContent">
<h4>Operating You are Fluent With</h4>
<form id="form1" name="form1" method="post" action="">
<label>
<input type="checkbox" name="Windows XP" id="Windows XP" />
Windows XP</label>
</form>
<form id="form2" name="form2" method="post" action="">
<label>
<input type="checkbox" name="Windows Vista" id="Windows Vista" />
Windows Vista</label>
</form>
<form id="form3" name="form3" method="post" action="">
<label>
<input type="checkbox" name="Macintosh" id="Macintosh" />
Macintosh</label>
</form>
<p>Please Enter A description of your services (note please use words you want google to find example, &quot;Louisville Computer Help&quot;)</p>
<form id="form4" name="form4" method="post" action="">
<label>
<textarea name="Description" id="Description" cols="45" rows="5"></textarea>
</label>
</form>
<form id="form5" name="form5" method="post" action="">
<label>Phone Number
<input type="text" name="Phone Number" id="Phone Number" />
</label>
<p>
<label>Address
<input type="text" name="Adress" id="Adress" />
</label>
</p>
</form>
<form id="form6" name="form6" method="post" action="">
<label>City
<input type="text" name="City" id="City" />
</label>
</form>
<form id="form7" name="form7" method="post" action="">
<label>State
<input type="text" name="State" id="State" />
</label>
</form>
<form id="form8" name="form8" method="post" action="">
<label>Zip Code
<input name="Zip Code" type="text" class="twoColHybLtHdr" id="Zip Code" />
</label>
</form>
<p></p>
<form id="form9" name="form9" enctype="multipart/form-data" method="post" action="">
<label>Upload A Photo
<input type="file" name="Picture" id="Picture" />
</label>
</form>
<h1>&nbsp;</h1>
<!-- end #mainContent --></div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
<br class="clearfloat" />
<div id="footer">
<p>Footer</p>
<!-- end #footer --></div>
<!-- end #container --></div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>

domedia
05-13-2008, 02:43 PM
Put a <span> around the label texts (address, city state etc), and then set a width on them, and maybe a margin-right.

You have multiple form tags by the way. Only on form tag per form.