tags:

views:

69

answers:

2

I am writing a C++ program which allows a user to design a form and then to generate the corresponding web form.

Basically, the user gets an IDE something like Delphi, Visual Basic, etc and can position text labels, input fields, radio buttons, etc He can resize, rearrange and, when he is satisified, he instructs my program to generate and it spits out HTML (well, actually it will be PHP eventually, but let's not split hairs).

I want WYSIWYG. When the user generates, I can get the absolute position and size, etc, of each form control.

Below is the output of a crude alpha of my program. As you can see, I tried to absolutely position the single input field, but when I load the file in my browser, the input field shows up at top left.

QUESTION: how do I position the form elements absolutely, using either HTML or inlinbe CSS?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"&gt;  
<html>
<head>
<title></title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
</head>
<body>
<form action="C:\temp\aa.php" method="get"><div id="Edit1" style="position: absolute; top:128x; left: 80x; width: 121px; height: 21px;"><input type="text" name="Edit1"></div>
<div><input type="submit" name="submitButton" value="Submit"></div>
</form>
</body>
</html>
+4  A: 

You have a typo in the dimensions:

top:128x; left: 80x;

correct it to

top:128px; left: 80px;

and it will work.

When generating the HTML, I would try to put as much as possible into nicely formatted CSS classes in the document's head. Otherwise, you'll very quickly have a horrible HTML / CSS soup that is extremely hard to debug.

For example:

<style type="text/css">
 form #Edit1 { position: absolute; 
               top:    128px; 
               left:   80px; 
               width:  121px; 
               height: 21px; 
              }
</style>

...

<form action="C:\temp\aa.php" method="get">
  <div id="Edit1">
    <input type="text" name="Edit1">
  </div>

  <div>
    <input type="submit" name="submitButton" value="Submit">
  </div>

</form>

Also, be sure to give each control an ID (not just a name), so you can access them via CSS later.

Pekka
thanks! yes, two stupid "x" instead of "px". I guess I thought I has made soem other sort of mistake when it validated just fine at w3c. I can also add z-order, since the controls on the form where they are designed have a tab-order. I take your point about CSS in the header, although it will mean iterating over the components twice. Any other hints? Is absolute positioning accetpable?
Mawg
@mawg hmm, absolute positioning makes things easier at first but is generally not well regarded because it makes "flowing" layouts impossible (i.e. layouts in which elements can be "pushed" by an element changing its size dynamically) - a big change from how Windows GUI Apps are built. Absolutely positioned elements are taken out of the document flow and "float" above everything else, and scale badly to different resolutions. Check out A List Apart's articles, they have a lot of great HTML / CSS tips, for example this one on forms: http://www.alistapart.com/articles/prettyaccessibleforms/
Pekka
+1  A: 

it should be

<div id="Edit1" style="position: absolute; top:128px; left: 80px; width: 121px; height: 21px;">

you forgot the 'p' from px for top and left

harpax