PDA

View Full Version : aligning text fields with their text labels


pethon
11-05-2006, 05:53 PM
how do i nicely align a text label with its box like for e.g, on here

http://webleicester.com/registration_page.php

i want to allign it like:


Name: [Text box here]
*Age: [Test box here]


but mine keeps coming like


Name: [Text box here]
Age: [Test box here]

vkw91
11-05-2006, 07:36 PM
I know this is cheating and there might be a better way to do it, but i pad mine out with dots to get it even and colour them white :D

davidj
11-05-2006, 08:24 PM
firstly are you using css or tables to define and style your pages??

if you are using tables then simply set the alignment of the <td> to right

secondly this is for vkw91..

aligning using text spacers is a big no-no. This is not cheating its just doing it wrong

its like this... I know if i put the effort in and determination i could build a chair out of vegtables. It would function as a chair and would possibly look like a chair but someone is going to ask the question... why didnt you make it out of wood.

so vkw91... Why didnt you make it out of wood????????? !!!

pethon
11-05-2006, 08:50 PM
firstly are you using css or tables to define and style your pages??

if you are using tables then simply set the alignment of the <td> to right

secondly this is for vkw91..

aligning using text spacers is a big no-no. This is not cheating its just doing it wrong

its like this... I know if i put the effort in and determination i could build a chair out of vegtables. It would function as a chair and would possibly look like a chair but someone is going to ask the question... why didnt you make it out of wood.

so vkw91... Why didnt you make it out of wood????????? !!!

im not using any css style sheet. im just using the default dreamweaver settings. i think dreamweaver puts in style tags on each page. (i dont know how to create the css stuff)
should i insert a table on the page, and put the form inside this table? then align it right?

domedia
11-05-2006, 09:54 PM
im not using any css style sheet. im just using the default dreamweaver settings. This doesn't make any sense really, how you did it was david's question. :)
Can you show us your code so we can see what's actually going on?

pethon
11-06-2006, 06:19 PM
<?php
require_once("php_classes/class_db.php");
//require_once("php_classes/class_registration.php");

DB::_connect();
?>

<!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=iso-8859-1">
<title>Collectors Unite</title>
<style type="text/css">
<!--
.style6 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 24px;
}
.style11 {
font-size: 9px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.style14 {
color: #000000;
font-size: 24px;
}
.style15 {font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; }
.style16 {
color: #0033CC;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.style32 {color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; }
.style35 {color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; }
.style40 {
font-family: "Bauhaus 93";
font-size: 18px;
}
.style46 {font-size: 10px}
#Layer1 {
position:absolute;
left:406px;
top:442px;
width:53px;
height:38px;
z-index:1;
}
body {
background-color: #003399;
}
.style54 {color: #333333}
.style55 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000;}
#Layer2 {
position:absolute;
left:160px;
top:367px;
width:213px;
height:117px;
z-index:1;
}
#Layer3 {
position:absolute;
left:652px;
top:297px;
width:348px;
height:211px;
z-index:1;
}
#Layer4 {
position:absolute;
left:80px;
top:325px;
width:181px;
height:123px;
z-index:2;
}
#Layer5 {
position:absolute;
left:0px;
top:0px;
width:694px;
height:439px;
z-index:2;
}
#Layer6 {
position:absolute;
left:0px;
top:0px;
width:122px;
height:377px;
z-index:2;
}
#Layer7 {
position:absolute;
left:93px;
top:353px;
width:186px;
height:170px;
z-index:3;
}
.style57 {color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; }
-->
</style>
</head>

<body>
<DIV>
<table width="70%" border="1" align="center" cellpadding="15" cellspacing="0" bordercolor="#FFFFFF">
<tr>
<td><div align="center" class="style6">
<div align="left"><span class="style14">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="780" height="192">
<param name="movie" value="flash.swf">
<param name="quality" value="high">
<embed src="flash.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="780" height="192"></embed>
</object>
</span></div>
</div>
<div align="center" class="style15">

</div>
<table width="287" height="31" border="1" align="left" cellspacing="0" bordercolor="#0099CC" bgcolor="#0099CC">
<tr>
<td width="543"><div align="right" class="style16">
<div align="left" class="style32"><span class="style40">Collectors Unite - Registration.. </span></div>
</div></td>
</tr>
</table>
<table width="491" height="31" border="1" cellspacing="0" bordercolor="#0099CC" bgcolor="#CCCCCC">
<tr>
<td><div align="right"><span class="style35"><span class="style54">home (index.html) | log in (index.html) | forum (forum.php) | search (search.php)</span> </span></div></td>
</tr>
</table>


<table width="780" height="224" border="1" cellspacing="0" bordercolor="#0099CC" bgcolor="#0099CC">
<tr>
<td height="222"><form name="form1" method="post" action="<?php echo $PHP_SELF; ?>">
<label>
<div align="center"><span class="style57">To fully register you must first fill out this intial screen. The username you provide here, will be your permanent username which you will use to access the services on this site.</span>



<span class="style35">

Username:</span>


<input name="txt_Username" type="text" id="txt_Username">


<span class="style35">Email address:</span>

<input name="txt_Email" type="text" id="txt_Email" value="">


<span class="style35">Password:</span>
<input name="txt_Password" type="text" id="txt_Password">


<span class="style35">Confirm password: </span>
<input name="txt_ConfirmPassword" type="text" id="txt_ConfirmPassword">




<input name="frmRegistration_Submit" type="submit" class="style11" id="frmRegistration_Submit" value="SIGN UP">
</div>
</label>
tyhtfhfghgfhgf
<p align="center">
<label></label>
</p>
</form> </td>
</tr>
</table>


<table width="433" height="31" border="1" align="left" cellspacing="0" bordercolor="#CCCCCC" bgcolor="#CCCCCC">
<tr>
<td><div align="left" class="style11">
<div align="left"> <span class="style46">Copyright &copy; 2006-2007 Collectors Unite Inc. All rights reserved. </span></div>
</div></td>
</tr>
</table>
<table width="347" height="31" border="1" cellspacing="0" bordercolor="#CCCCCC" bgcolor="#CCCCCC">
<tr>
<td><div align="right"><span class="style55">about us (fdhgdhgfh) | affiliates (ghghgfh) | FAQ (ghghgh) | link4 (ghgfhgfh)</span> </div></td>
</tr>
</table></td>
</tr>
</table>
</DIV>
<DIV></DIV>
</body>
</html>

davidj
11-06-2006, 09:30 PM
Wooa....

your a mistery pethon!

your coding advanced PHP in the form of classes but your CSS is in the page your building and not in a CSS linked page?

also its like a <div><table> bomb has gone off in your page. You have 3 nested <divs> with <table> inside??

domedia
11-07-2006, 01:54 AM
ah davidj was actually right in his forst post , do this:
>if you are using tables then simply set the alignment of the <td> to right

pethon
11-07-2006, 09:07 PM
Wooa....

your a mistery pethon!

your coding advanced PHP in the form of classes but your CSS is in the page your building and not in a CSS linked page?

also its like a <div><table> bomb has gone off in your page. You have 3 nested <divs> with <table> inside??

yeah i know.

with the CSS your talking about, do i ony need 1 CSS file on my webserver? and make all my other files link to this CSS file?

davidj
11-07-2006, 10:01 PM
yes thats the best way

are you well adversed in the dark side of PHP (Classes) or are you just starting out with them?

HeadAche
11-09-2006, 09:11 AM
Download the IE Developer Toolbar or the Developer Toolbar for Firefox. Both these have options to hightlight tables, table cells and divs so you can see visually how somone has build their pages.

The way I normally build forms is make a table with 1 cell, add a form into that table cell, then nest another table inside these. Then with this second table I just divide it into rows and cells and add my fields. Easy.

vkw91
11-21-2006, 04:32 PM
so vkw91... Why didnt you make it out of wood????????? !!!

Because it would mean killing a tree!

I did imply when i said "its probably cheating" that it was probably wrong.

davidj
11-21-2006, 06:30 PM
only joking vkw91 :lol:

but yes it was cheating in a really really wrong kinda way

but thats what were here for...to point it out! :) and hopfully put it right

domedia
11-22-2006, 12:18 AM
This is a very simple outline of how I usually do it, which I think is exactly what Headache was talking about:
<table>
<tr>
<td>Username:</td>
<td><input name="txt_Username" type="text" id="txt_Username"></td>
</tr>
<tr>
<td>Email address:</td>
<td><input name="txt_Email" type="text" id="txt_Email" value=""></td>
</tr>
<tr>
<td>Password:</td>
<td><input name="txt_Password" type="text" id="txt_Password"></td>
</tr>
<tr>
<td>Confirm password:</td>
<td><input name="txt_ConfirmPassword" type="text" id="txt_ConfirmPassword"></td>
</tr>
<tr>
<td colspan="2"><input name="frmRegistration_Submit" type="submit" class="style11" id="frmRegistration_Submit" value="SIGN UP"></td>
</tr>
</table>