web form design - positioning and sizing

[soskinny]

Is there a better way to do this?

I just realized that I need to use percentages to set the width, height, left and top properties of my web controls to make my pages fit any browser window size at any screen resolution. But I have two problems:

1. Left and Top (the positioning attributes) are only available in HTML view. Can't I get these in the properties window so I can just quickly click through my form? It will take quite a while to position a lot of elements by altering tags in the HTML view. And without seeing the form, there will be a lot of trial and error.

2. Will the look of the page be silly if I use ONLY percentages? When a really small browser is opened you would see a tiny page perfectly in proportion to the window.

[mendhak]

Originally posted by soskinny
Is there a better way to do this?

I just realized that I need to use percentages to set the width, height, left and top properties of my web controls to make my pages fit any browser window size at any screen resolution. But I have two problems:

1. Left and Top (the positioning attributes) are only available in HTML view. Can't I get these in the properties window so I can just quickly click through my form? It will take quite a while to position a lot of elements by altering tags in the HTML view. And without seeing the form, there will be a lot of trial and error.

2. Will the look of the page be silly if I use ONLY percentages? When a really small browser is opened you would see a tiny page perfectly in proportion to the window.

Something escapes me. Why are you using left and top for your controls? Are you using absolute positioning?

You really don't need to. You can create a table, and multiple-nested tables if required, for the purpose of positioning your elements.

Without seeing the form, it will be trial-and-error only at first. Soon, you'll be good enough so that you don't even need to look at the page that often.

[venerable bede]

Yup. Absolute positioning sucks big time.

[mendhak]

Absolutely.

[soskinny]

Yes, I was using absolute positioning, and yes, it sucks big time. It felt so right when I was just dragging and dropping and then resizing every control, though!

How do I change absolute positioning? When I drag a control onto my web form it just sets the attribute to absolute positioning. Do I have to type over each attribute in HTML view? What is the alternative to absolute positioning?

What is my overall strategy? Based on your input, I'm thinking:

1. Design an HTML Table in the shape of my page with all rows and columns using percentages and I guess make the table invisible.

2. Place the controls in the table.

I wrote an entire database enabled application, but I'm clueless on this formatting part.

Thanks.

[mendhak]

Set the pageLayout property of the page to FlowLayout.

Your 'strategy' seems fine. You'll come across the nuances along the way, which will be just minor things.

[soskinny]

Thanks. I guess I'd better dig in.

Anything I need to know about flow layout? Will it eliminate Left and Top attributes?

[mendhak]

Yes. You will use things like topmargin and leftmargin, and CSS instead for all your alignment and positioning.

[mendhak]

1. Go to www.w3schools.com/html
and
www.w3schools.com/css

2. Take a look at www.mendhak.com/main.php html code. Save it to disk as an HTML page, delete all the javascript, and take a look at the layout of the tables. It'll give you a good idea of the way things should be.

I of course, mention mendhak.com out of sheer shameless self promotion.

[soskinny]

thanks, mendhak. I'll definitely hit all of that stuff...