neonep
Programmer
- Jun 26, 2003
- 34
Hi all,
I need to position 2 text boxes on an image. I used the div tag to accomplish this but seems like when I make the font of the browser bigger or smaller, the text boxes move around and don't show up on the place I want them to. Can you show me an example of an HTML tag that would make the boxes relative to the image and resize and move according to the image? Thanks.
i have included the code below. Just open it with a browser and press "Ctrl-" to decrease the font and "Ctrl+" to increase it and you will see the boxes moving around.
<html>
<head>
<script language="JavaScript" type="text/JavaScript">
<!--
function doT ()
{
}
//-->
</script>
</head>
<body>
<br><br><br><br>
<form name="myform">
<input type="hidden" name="at"></input>
<div id="Layer1" style="position:absolute; left:132px; top:328px; width:140px; height:14px; z-index:1">
<input name="rn" type="text" size="20" maxlength="10">
</div>
<div id="Layer2" style="position:absolute; left:315px; top:328px; width:140px; height:14px; z-index:2">
<input name="an" type="text" size="20" maxlength="10">
</div>
<table width="750px" border="0" cellspacing="1" cellpadding="1">
<tr>
<td width="20%"> </td>
<td width="30%"><div align="center">
<input type="radio" name="radiobutton" onclick="document.myform.at.value='c'">
Fixed</div></td>
<td width="30%"><div align="center">
<input type="radio" name="radiobutton" onclick="document.myform.at.value='s'">
Not fixed</div></td>
<td width="20%"> </td>
</tr>
<tr>
<td colspan="4"><div align="center"><img src="sample.gif" width="578" height="267"></div></td>
</tr>
<tr>
<td> </td>
<td colspan="2"><div align="center">
<input type="button" name="submit" value="submit" onclick="javascript:doT()">
</div></td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
I need to position 2 text boxes on an image. I used the div tag to accomplish this but seems like when I make the font of the browser bigger or smaller, the text boxes move around and don't show up on the place I want them to. Can you show me an example of an HTML tag that would make the boxes relative to the image and resize and move according to the image? Thanks.
i have included the code below. Just open it with a browser and press "Ctrl-" to decrease the font and "Ctrl+" to increase it and you will see the boxes moving around.
<html>
<head>
<script language="JavaScript" type="text/JavaScript">
<!--
function doT ()
{
}
//-->
</script>
</head>
<body>
<br><br><br><br>
<form name="myform">
<input type="hidden" name="at"></input>
<div id="Layer1" style="position:absolute; left:132px; top:328px; width:140px; height:14px; z-index:1">
<input name="rn" type="text" size="20" maxlength="10">
</div>
<div id="Layer2" style="position:absolute; left:315px; top:328px; width:140px; height:14px; z-index:2">
<input name="an" type="text" size="20" maxlength="10">
</div>
<table width="750px" border="0" cellspacing="1" cellpadding="1">
<tr>
<td width="20%"> </td>
<td width="30%"><div align="center">
<input type="radio" name="radiobutton" onclick="document.myform.at.value='c'">
Fixed</div></td>
<td width="30%"><div align="center">
<input type="radio" name="radiobutton" onclick="document.myform.at.value='s'">
Not fixed</div></td>
<td width="20%"> </td>
</tr>
<tr>
<td colspan="4"><div align="center"><img src="sample.gif" width="578" height="267"></div></td>
</tr>
<tr>
<td> </td>
<td colspan="2"><div align="center">
<input type="button" name="submit" value="submit" onclick="javascript:doT()">
</div></td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
