positioning widgets

Is there a tool one can use to generate a layout like this?

.aw-system-control {position: absolute}

#box {left: 0px; top: 0px; width: 398px; height: 432px; border: 1px solid #999; background: #ece9d8; position: absolute;}
#tabs {left: 6px; top: 6px; width: 386px; height: 22px;}
#frame {left: 6px; top: 28px; width: 386px; height: 362px; border: 1px solid #999; background: #f9f8f4; position: absolute;}

#group1 {left: 21px; top: 40px; width: 357px; height: 100px;}
#label1 {left: 70px; top: 60px; width: 300px; height: 16px;}
#label2 {left: 35px; top: 63px; width: 30px; height: 16px;}
#label3 {left: 71px; top: 82px; width: 50px; height: 16px;}
#input1 {left: 135px; top: 81px; width: 230px; height: 20px;}
#button1 {left: 112px; top: 108px; width: 82px;}
#button2 {left: 198px; top: 108px; width: 82px;}
#button3 {left: 284px; top: 108px; width: 82px;}

#group2 {left: 21px; top: 150px; width: 357px; height: 86px;}
#label4 {left: 70px; top: 167px; width: 310px; height: 28px;}
#label5 {left: 35px; top: 170px; width: 30px; height: 16px;}
#button4 {left: 95px; top: 204px; width: 95px;}
#button5 {left: 198px; top: 204px; width: 82px;}
#button6 {left: 284px; top: 204px; width: 82px;}

#group3 {left: 21px; top: 247px; width: 357px; height: 95px;}
#label6 {left: 70px; top: 265px; width: 310px; height: 28px;}
#label7 {left: 35px; top: 268px; width: 30px; height: 16px;}
#label8 {left: 71px; top: 305px; width: 150px; height: 16px;}
#input2 {left: 240px; top: 304px; width: 39px; height: 20px;}
#button7 {left: 284px; top: 302px; width: 82px;}

#button8 {left: 20px; top: 350px; width: 85px;}
#button9 {left: 111px; top: 350px; width: 85px;}
#button10{left: 202px; top: 350px; width: 85px;}
#button11{left: 293px; top: 350px; width: 85px;}

#button12{left: 154px; top: 400px; width: 75px;}
#button13{left: 236px; top: 400px; width: 75px;}
#button14{left: 318px; top: 400px; width: 75px;}

#label9 {left: 70px; top: 60px; width: 300px; height: 16px;}

Not yet, this example was created manually.

Somebody should write a GUI Builder in JS :)

Could you do this dialog w/ the Panels? I'll buy the source code today so I can get along wo/ documentation & posting questions so much.

the code writed by macromedia dreamweaver 8 is like that:

<style type="text/css">

</style>
</head>

<body>
<div id="Layer1"></div>
</body>

You can use the .setId method , and after, .refresh method.

Forum search