From with position: absolute - now I want to add a menu at the top_问答_开发者

From with position: absolute - now I want to add a menu at the top

开发者 https://www.devze.com 2023-01-18 17:53 出处：网络

I use a windows program to generate a form. It\'s WYSIWG, design in the windows program, view in the browser, so I am using style=position: absolute; left=X; top=Y;\" for every element on the form.

相关专题：css

I use a windows program to generate a form. It's WYSIWG, design in the windows program, view in the browser, so I am using style=position: absolute; left=X; top=Y;" for every element on the form.

Now I find that I want to add a menu across the top, effectively p开发者_如何学JAVAushing the form down my the height of the menu.

Should I just adjust the top=Y when generating the form? Or can I wrap a div round the menu, or the form, and somehow maintain the form controls' position - relative to the start of the form?

Here's an exceedingly simple example; my forms IRL are much more complex.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Input data</title>
  <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
  <meta HTTP-EQUIV="Pragma" CONTENT="no-cache">
  <meta HTTP-EQUIV="Expires" CONTENT="-1">
  <link type="text/css" rel="stylesheet" href="css/user.css">
</head>

<body style="position:relative; top=0px; left=0px;">
<form action="HTTP://localhost/a/submitted.php" method="post">

  <input type="text" name="text_input_box_2" style="top:81px; left: 89px; width: 119px; height: 20px;"class="text_iput">

  <input type="text" name="text_input_box_1" style="top:41px; left: 89px; width: 119px; height: 20px;"class="text_iput">

<div class="submit_button" style="position:absolute; top:127px; left:148px;"><input type="submit" name="submitButton" value="Submit"></div>
</form>
</body>
</html>

You can wrap a relative div around all control you have in current. The child controls will have position relative with new DIV not the form anymore.

Add menu before this div, should put the menu in a DIV (static, or relative) too.

<body>
 <form action="HTTP://localhost/a/submitted.php" method="post">
    <div id="menu">menu</div>
    <div id="wrap-div" style="position:relative">
      <!--current code from here -->
      <input type="text" name="text_input_box_2" style="top:81px; left: 89px; width: 119px; height: 20px;"class="text_iput">
      <input type="text" name="text_input_box_1" style="top:41px; left: 89px; width: 119px; height: 20px;"class="text_iput">
      <div class="submit_button" style="position:absolute; top:127px; left:148px;"><input type="submit" name="submitButton" value="Submit"></div>
   </div>
</form>
</body>

PS:

you can't use style="top:81px; left: 89px; width: 119px; height: 20px;" for body
you must specify position: for 2 buttons to make top and left have effect.
Wrap div must be relative.