Jump to content

Align textarea with table


stockton

Recommended Posts

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> 

Link to comment
Share on other sites

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> 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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; }

Link to comment
Share on other sites

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

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.