Jump to content

Align textarea with table

stockton

By stockton
in HTML Help

Recommended Posts

stockton Advanced Member

stockton

Posted
Posted

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
https://forums.phpfreaks.com/topic/172996-align-textarea-with-table/
Share on other sites
Jnerocorp Regular Member

Jnerocorp

Posted
Posted

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>

saltedm8 Member

saltedm8

Posted
Posted

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 Regular Member

Jnerocorp

Posted
Posted

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

stockton Advanced Member

stockton

Posted
  • Author
Posted

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

Jnerocorp Regular Member

Jnerocorp

Posted
Posted

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 Member

saltedm8

Posted
Posted

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 Regular Member

Jnerocorp

Posted
Posted

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

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • 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.