Align textarea with table

stockton · September 3, 2009

In the following script I need/want to alter the field called "TopicBody" to align with the table that appears above it.

No matter whether I tried div or span positioning but I cannot get it working correctly.

Please tell me why.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Add help</title>
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="Mon, 22 Jul 2000 11:12:01 GMT"
<!-- Put IE into quirks mode -->
<title><?php echo HOSTDESCRIPTOR ?>: HelpPage</title>
<link rel="stylesheet" type="text/css" href="CSS/Help.css" />
<link rel="stylesheet" href="/CSS/custom-theme/jquery-ui-1.7.1.custom.css"/>
<link rel="stylesheet" href="/CSS/SiteWide.css"/>
<script type="text/javascript" src="/JavaScripts/DWjQuery.js"></script>
<script type="text/javascript" src="/JavaScripts/CL/ComponentLoader.js"></script>
<script type="text/javascript">
$(document).ready( function()
    {
    //load the standard headers.
    $("#header").LoadComponent("<? echo STANDARD_HEADER;?>");
    });
</script>

</head>
<body bgcolor="#eeeeee">
<div id="container">
<center>
<h2>Amend/Delete Help Record</h2><br>
<form id="HelpUD" name="HelpUD" action="HelpUpdate.php?UID=<?php echo $ID ?>" method=post enctype="multipart/form-data">
<table style="hidden">
<tr><td>Record Type:</td>
<td><input type='text' readonly id="RecordType" name="RecordType" value="<?php echo $ParentString ?>" >
</td></tr>
<tr><td>Topic Title:</td>
<td><input type="text" id="TopicTitle" name="TopicTitle" value="<?php echo $TopicName ?>" maxlength="25">
</td></tr>
<tr><td>Parent:</td>
<td><input type='text' id="Parent" name="Parent" value="<?php echo $Parent ?>" />
</td></tr>
</center>
</table>

Topic Body:
<textarea cols="60" rows="10" id="TopicBody" name="TopicBody" value="<?php echo $Topic ?> ></textarea>

<p><font color=red><?php echo $Message ?></font></p>
<input type=button value="Back" onclick="BackClick()" />
<input type=button value="Delete" onclick="DeleteHelp()" />
<input type=button value="Update" onclick="UpdateClick()" />
</form>
</div>
<div id="header">
        loading...
</div>

</body>
</html>

stockton · September 4, 2009

I am attempting to get a page similar to http://www.stockton.co.za/Screenshot.png

Please help.

Jnerocorp · September 5, 2009

Could you please leave the link to ur site also I fixed a small error that was causing some of the code to display inside of the text area here is the new code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Add help</title>
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="Mon, 22 Jul 2000 11:12:01 GMT"
<!-- Put IE into quirks mode -->
<title><?php echo HOSTDESCRIPTOR ?>: HelpPage</title>
<link rel="stylesheet" type="text/css" href="CSS/Help.css" />
<link rel="stylesheet" href="/CSS/custom-theme/jquery-ui-1.7.1.custom.css"/>
<link rel="stylesheet" href="/CSS/SiteWide.css"/>
<script type="text/javascript" src="/JavaScripts/DWjQuery.js"></script>
<script type="text/javascript" src="/JavaScripts/CL/ComponentLoader.js"></script>
<script type="text/javascript">
$(document).ready( function()
    {
    //load the standard headers.
    $("#header").LoadComponent("<? echo STANDARD_HEADER;?>");
    });
</script>

</head>
<body bgcolor="#eeeeee">
<div id="container">
<center>
<h2>Amend/Delete Help Record</h2><br>
<form id="HelpUD" name="HelpUD" action="HelpUpdate.php?UID=<?php echo $ID ?>" method=post enctype="multipart/form-data">
<table style="hidden">
<tr><td>Record Type:</td>
<td><input type='text' readonly id="RecordType" name="RecordType" value="<?php echo $ParentString ?>" >
</td></tr>
<tr><td>Topic Title:</td>
<td><input type="text" id="TopicTitle" name="TopicTitle" value="<?php echo $TopicName ?>" maxlength="25">
</td></tr>
<tr><td>Parent:</td>
<td><input type='text' id="Parent" name="Parent" value="<?php echo $Parent ?>" />
</td></tr>
</center>
</table>

Topic Body:
<textarea cols="60" rows="10" id="TopicBody" name="TopicBody" value='<?php echo "$Topic" ?>'> </textarea>

<p><font color=red><?php echo $Message ?></font></p>
<input type=button value="Back" onclick="BackClick()" />
<input type=button value="Delete" onclick="DeleteHelp()" />
<input type=button value="Update" onclick="UpdateClick()" />
</form>
</div>
<div id="header">
        loading...
</div>

</body>
</html>

stockton · September 6, 2009

Sorry I should have said it is at http://www.stockton.co.za/HelpUD.php and what I want it to look like is at http://www.stockton.co.za/Screenshot.png

saltedm8 · September 6, 2009

Geee I hate tables.. css is allot simpler

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Add help</title>
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="Mon, 22 Jul 2000 11:12:01 GMT"
<!-- Put IE into quirks mode -->
<title><?php echo HOSTDESCRIPTOR ?>: HelpPage</title>
<link rel="stylesheet" type="text/css" href="CSS/Help.css" />
<link rel="stylesheet" href="/CSS/custom-theme/jquery-ui-1.7.1.custom.css"/>
<link rel="stylesheet" href="/CSS/SiteWide.css"/>
<script type="text/javascript" src="/JavaScripts/DWjQuery.js"></script>
<script type="text/javascript" src="/JavaScripts/CL/ComponentLoader.js"></script>
<script type="text/javascript">
$(document).ready( function()
    {
    //load the standard headers.
    $("#header").LoadComponent("<? echo STANDARD_HEADER;?>");
    });
</script>

</head>
<body bgcolor="#eeeeee">
<div id="container">
<center>
<h2>Amend/Delete Help Record</h2><br>
<form id="HelpUD" name="HelpUD" action="HelpUpdate.php?UID=<?php echo $ID ?>" method=post enctype="multipart/form-data">
<table style="hidden">
<tr>
<td>Record Type:</td>
<td><input type='text' readonly id="RecordType" name="RecordType" value="<?php echo $ParentString ?>" ></td>
</tr>
<tr>
<td>Topic Title:</td>
<td><input type="text" id="TopicTitle" name="TopicTitle" value="<?php echo $TopicName ?>" maxlength="25"></td>
</tr>
<tr>
<td>Parent:</td>
<td><input type='text' id="Parent" name="Parent" value="<?php echo $Parent ?>" /></td>
</tr>
<tr>
<td>Topic Body:
  <table width="80" height="155" border="0">
    <tr>
      <td width="74"> </td>
    </tr>
  </table></td>
<td><textarea cols="60" rows="10" id="TopicBody" name="TopicBody" value='<?php echo "$Topic" ?>'> </textarea></td>
</tr>

</table>
<p><font color=red><?php echo $Message ?></font></p>
<input type=button value="Back" onclick="BackClick()" />
<input type=button value="Delete" onclick="DeleteHelp()" />
<input type=button value="Update" onclick="UpdateClick()" />
</form>
</div>
<div id="header">
        loading...
</div>

</body>
</html>

I cheated a little

Jnerocorp · September 6, 2009

try this


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Add help</title>
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="Mon, 22 Jul 2000 11:12:01 GMT"
<!-- Put IE into quirks mode -->
<title><?php echo HOSTDESCRIPTOR ?>: HelpPage</title>
<style type="text/css">
div {
position:fixed;
top:20px;
right:250px;
}
</style>
<link rel="stylesheet" type="text/css" href="CSS/Help.css" />
<link rel="stylesheet" href="/CSS/custom-theme/jquery-ui-1.7.1.custom.css"/>
<link rel="stylesheet" href="/CSS/SiteWide.css"/>
<script type="text/javascript" src="/JavaScripts/DWjQuery.js"></script>
<script type="text/javascript" src="/JavaScripts/CL/ComponentLoader.js"></script>
<script type="text/javascript">
$(document).ready( function()
    {
    //load the standard headers.
    $("#header").LoadComponent("<? echo STANDARD_HEADER;?>");
    });
</script>

</head>
<body bgcolor="#eeeeee">

	<div>
	<h2>Amend/Delete Help Record</h2><br>

<form enctype="multipart/form-data" method="post" action="HelpUpdate.php?UID=" id="helpud">

	<table>
	<tbody><tr><td>Record Type:</td>
	<td><input id="recordtype" readonly="readonly" value="" type="text">
	</td></tr>
	<tr><td>Topic Title:</td>
	<td><input id="TopicTitle" name="TopicTitle" value="" maxlength="25" type="text">
	</td></tr>
	<tr><td>Parent:</td>
	<td><input id="Parent" name="Parent" value="" type="text">
	</td></tr>


	<tr><td><p>Topic Body:</p></td>
	<td><textarea value="" id="topicbody" rows="10" cols="60"></textarea></td>
	</tr></tbody>
	</table>

	<center>
	<p><font color="red"></font></p>
	<input value="Back" onclick="BackClick()" type="button">
	<input value="Delete" onclick="DeleteHelp()" type="button">
	<input value="Update" onclick="UpdateClick()" type="button">
	</center>
	<div id="header">loading...
	</div>
	</form></div>

	</body>
	</html>

danm you beat me to posting it ... I did the same using css

saltedm8 · September 6, 2009

then yours is the better one lol

stockton · September 6, 2009

Thank you but now we have the loading... appearing at the top right rather than the bottom left ??

See http://www.stockton.co.za/HelpUD3.php

So that I may learn a little more please explain to me the method used.

Does the css cause all text within the div to be aligned at top:20px; right:250px;?

stockton · September 6, 2009

and for those that may be interested saltedm8's version is @ http://www.stockton.co.za/HelpUD4.php & Jnerocorp's is @ http://www.stockton.co.za/HelpUD3.php

Jnerocorp · September 6, 2009

Yes I aligned the DIV box down 20px (top) and when using the right: 250px what it does it it buts the DIV all the way to the right and then pushes 250px left its confusing but it works

Hope this was helpful .... Is there anything else you need help with?

stockton · September 6, 2009

Unfortunately yes.

The loading... text now appearing at the top right rather than the bottom left ??

Jnerocorp · September 6, 2009

Here this should fix it I just had the loading piece not in the right spot of the div


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Add help</title>
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="Mon, 22 Jul 2000 11:12:01 GMT"
<!-- Put IE into quirks mode -->
<title><?php echo HOSTDESCRIPTOR ?>: HelpPage</title>
<style type="text/css">
div {
position:fixed;
top:20px;
right:250px;
}
</style>
<link rel="stylesheet" type="text/css" href="CSS/Help.css" />
<link rel="stylesheet" href="/CSS/custom-theme/jquery-ui-1.7.1.custom.css"/>
<link rel="stylesheet" href="/CSS/SiteWide.css"/>
<script type="text/javascript" src="/JavaScripts/DWjQuery.js"></script>
<script type="text/javascript" src="/JavaScripts/CL/ComponentLoader.js"></script>
<script type="text/javascript">
$(document).ready( function()
    {
    //load the standard headers.
    $("#header").LoadComponent("<? echo STANDARD_HEADER;?>");
    });
</script>

</head>
<body bgcolor="#eeeeee">

      <div>
      <h2>Amend/Delete Help Record</h2><br>
      
<form enctype="multipart/form-data" method="post" action="HelpUpdate.php?UID=" id="helpud">
      
      <table>
      <tbody><tr><td>Record Type:</td>
      <td><input id="recordtype" readonly="readonly" value="" type="text">
      </td></tr>
      <tr><td>Topic Title:</td>
      <td><input id="TopicTitle" name="TopicTitle" value="" maxlength="25" type="text">
      </td></tr>
      <tr><td>Parent:</td>
      <td><input id="Parent" name="Parent" value="" type="text">
      </td></tr>
      
      
      <tr><td><p>Topic Body:</p></td>
      <td><textarea value="" id="topicbody" rows="10" cols="60"></textarea></td>
      </tr></tbody>
      </table>
      
      <center>
      <p><font color="red"></font></p>
      <input value="Back" onclick="BackClick()" type="button">
      <input value="Delete" onclick="DeleteHelp()" type="button">
      <input value="Update" onclick="UpdateClick()" type="button">
      </center>
      loading...
      </div>
      </form></div>

      </div>
      </body>
      </html>

saltedm8 · September 6, 2009

I am going to show you a very very simple form.. just for future reference ( this is how it should be done properly )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>
<style type="text/css">
<!--

.one {margin: 0 0 0 58px;}
.two {margin: 0 0 0 37px;}
.three {margin: 0 0 0 22px;}
.four {margin: 0 0 0 38px;}
.five {margin: 0 0 0 165px;}
-->
</style>
</head>

<body>



<form id="form1" method="post" action="">
  <p>
    <label class="one">id:
      <input type="text" name="id" id="id" />
    </label>
  </p>
  <p>
    <label class="two">name:
      <input type="text" name="name" id="name" />
    </label>
  </p>
  <p>
    <label class="three">address:
      <input type="text" name="address" id="address" />
    </label>
  </p>
  <p>
    <label class="four">email:
      <input type="text" name="email" id="email" />
    </label>
  </p>
  <p>
    <label>
      <input class="five" type="submit" name="submit" id="submit" value="Submit" />
    </label>
  </p>
</form>
</body>
</html>

do you see how easy it is with css ?.. you can even use the <form> and <input> tags to position it etc etc for example

input ( blah: whatever ; }
form { blah: whatever; }

Jnerocorp · September 6, 2009

I played around with your code saltedm8 and I lined everything up perfectly.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>
<style type="text/css">
<!--

.one {margin: 0 0 0 20px;}
.two {margin: 0 0 0 20px;}
.three {margin: 0 0 0 20px;}
.four {margin: 0 0 0 20px;}
.five {margin: 0 0 0 194px;}
-->
</style>
</head>

<body>
<form id="form1" method="post" action="">
  <p>
    <label class="one">         id:
      <input type="text" name="id" id="id" />
    </label>
  </p>
  <p>
    <label class="two">    name:
      <input type="text" name="name" id="name" />
    </label>
  </p>
  <p>
    <label class="three">address:
      <input type="text" name="address" id="address" />
    </label>
  </p>
  <p>
    <label class="four">   email:
      <input type="text" name="email" id="email" />
    </label>
  </p>
  <p>
    <label>
      <input class="five" type="submit" name="submit" id="submit" value="Submit" />
    </label>
  </p>
</form>
</body>
</html>

Heres what I did

I used the same margin codes you used but I used the code to perfectly aling. What do u think of this method

saltedm8 · September 6, 2009

using is not 100% ideal as all you really had to do was adjust the margins in the css, but its a very big improvement on tables.. congrats.. nice one.. keep practising

Jnerocorp · September 6, 2009

yea im pretty much a noob to CSS HTML and PHPbut i am still learning ... saltedm8 I sent u a PM

saltedm8 · September 6, 2009

sorry, only just spotted your message.. the pm system is not very clear here... replied

Jnerocorp · September 6, 2009

ok i accepted u but it says ur offline

saltedm8 · September 6, 2009

sorry, I stay hidden, I am here, but am constently bombarded unless I hide a bit hehe.. just say hello, I will answer lol

Sign In

Align textarea with table

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information