[RESOLVED] ASP.NET Form Design

[Working.Net]

This is a best practices question. I am experiencing a lot of challenges aligning controls on a form. I was led to believe that using nested table tags was the way to do this, but I keep finding that control over column widths changes with the content of the cells, especially when you use ASP controls. The result of this is that I spent a lot of time trying to "tweak" the form and messing with each of the controls, trying various ways to control the width of the control and or the <td> cell. I have heard arguments for <div> tags and style sheets to control the layout of a form but quite frankly I have no idea how to do that. Is there a good way to do this? Perhaps you know of some whitepaper you might suggest that would help me in the right direction. Below is an example of a typical form I might be working on.

[techgnome]

What you are experiencing is exactly why tables shouldn't be used for layout. They should be used for tabular data.

if you check out a site I'm working on (http://test.arsse-radio.com), you'll find tables in only a couple spots... where the queue/history is displayed, any time a list of albums, or list of songs are displayed.

Table - http://test.arsse-radio.com/index.ph...e/viewalbum/31
Table - http://test.arsse-radio.com/index.ph...viewartist/183
Table - http://test.arsse-radio.com/index.ph...e/queuedplayed

That's because I'm displaying tablular data... but no where else is there a table, it's all done with div tags.

As for a whitepaper... um.. no.. this an evolutionary thing, and it's something you just know or don't. However - this http://www.w3schools.com/ should become your next new friend.

-tg

[motil]

Nice site tech!

also loved the jQuery work there, just one thing if I may, always use native javascript when you can, it's much faster to use document.getElementById('myid').innerHTML then $('#myid').html()/text();
and it's also a lot faster to loop with native javascript "for" then $('').each(), you can use jq element DOM just as you use javascript array for example:

var elm = $('body');
for(i = 0;i<elm.length;i++) {
alert(elm[0].innerHTML);
}

will execute much faster then

$('body').each(function() {
alert($(this).html());
});

as great as jQuery is (and it really is) native js will always win performance wise.

btw, your code is so much cleaner then my i really need to adopt this style

Great work!

[techgnome]

it's one of the reasons I'm re-doing the site... the current one is nearly 100&#37; ajax/jquery written... bleh... updates havbe been painful... the test one is clearing out nearly 90% of the js that's there. By the time I'm done, all that should be left is just what drives the blocks that show across the top. And admittedly my js skillz aren't quite all that great so using jq is making some of it easier.

Normally when I build a site, I start with pen and paper... sketch out what I want (what I think I want) Then I'll plop down a bunch of div tags, give them different colors, and then start working on a CSS to put the div tags where I want them... then and only then do I start inserting content into them, tweaking the CSS as I go, and testing ,testing, testing.

I wasn't able to see the image initially when I posted... having seen it now... I don't know that tables are a bad idea.

That said.... jsut by looking at the image real quick... I see 7 sections that could be grouped into div tags. within each div tag how ever..... hmmm... not sure... I'd probably resort to tables at that point, but it has more to do with organizing the data and less about controlling the layout specifically. At least not directly.

-tg

[gep13]

Working.Net,

I have to agree with tg.

Although you will get some hard core advocates of using Tables to control the layout of your page, I think you will find that most people will tell you that using CSS to control the layout of your page will serve you better in the long run.

Gary

[Working.Net]

Once again some great and helpful discussion. gt is there a possibility I might look at a sample of your style sheet for the arsse page (http://test.arsse-radio.com), so I can see what you are doing? I think I may need to take some time and experiment, recreate one of my forms just so I get a better understanding of how div tags and span are used instead of tables.

[SeanGrebey]

Working.Net,

I have to agree with tg.

Although you will get some hard core advocates of using Tables to control the layout of your page, I think you will find that most people will tell you that using CSS to control the layout of your page will serve you better in the long run.

Gary

My job has some annual credits at a local tech school they get every year for courses, so they used some extra ones to send me to a .NET class. As I am probably like most of you self taught, but also a sole developer, I actually picked up quite a few things I hadn't seen before. However the guy teaching the class used exclusively tables for all page layout. Strangely he also avoided using data bound controls. If he wanted to display a list of items from Northwind, he'd drop a Label on the page, and use a DataReader in a loop and dynamically write all the HTML to create the list and the links and the images and what not.

[Working.Net]

Interesting point. I find that most of the available course work doesn't deal with anything too complicated so once you get past the basics you are pretty much on your own. I am involved in an online .NET course as well, but it deals primarily with all the behind the scenes stuff. Things like designing a form are essentially non-issues because the forms that are used to demonstrate the course concepts are so simple, forms like login and basic data grids. Nothing like combining data sources from 8-10 tables, and using FormViewGrids combined with DataGrids, well you get the picture.

[gep13]

Hey,

As I am sure tg will tell you, CSS is a public part of any site, and you can easily look at it.

Right click on the page, and view source, find the link to the css file, and then download it.

Gary

[gep13]

My job has some annual credits at a local tech school they get every year for courses, so they used some extra ones to send me to a .NET class. As I am probably like most of you self taught, but also a sole developer, I actually picked up quite a few things I hadn't seen before. However the guy teaching the class used exclusively tables for all page layout. Strangely he also avoided using data bound controls. If he wanted to display a list of items from Northwind, he'd drop a Label on the page, and use a DataReader in a loop and dynamically write all the HTML to create the list and the links and the images and what not.

As I said, there are still some die hards out there, and everyone has there own opinions. My personal opinion is that using tables to control layout is a bad idea. This is backed up by the fact that some of the ASP.Net Server Controls in ASP.Net 4.0 have been completely rewritten from the ground up to specifically not use tables.

The idea of not using certain Data Bound controls is a valid one, based on the size of the corresponding ViewState and amount of spurious HTML that is generated. Again, it comes down to personal preference, and experience.

Gary

[Working.Net]

It's the experience part I'm having a little trouble with. But I'm getting there. Thanks for the discussion.

[techgnome]

What you may want to do is to experiment... that's what I use my websites for... gives me a chance to tinker with ideas I've gathered from some where else, poke holes, push buttons, see what makes things tick.

http://www.positioniseverything.net/ -- this is a great reference (well it used to be, haven't been to it in years) and was one of the instrumental sites in getting people out of tables and into CSS positioning. they have extensive articles on the do's & don'ts and the gotchas.

Another thing you can do is visit Open Source Web Design and rummage through the designs available there and pull them apart to see what makes them tick. Two of my most recent designs have come from there. I've used them as a base, then start replacing colors, images, move things around, etc.

-tg

[brucevde]

A book you might be interested in is "CSS: The missing manual" (OReilly). Having no HTML/CSS experience whatsoever, the book got me up to speed quickly when I first started using ASP.NET.

OReilly has published many books on HTML/CSS and many are available as e-books.

http://www.oreilly.com/css-html/index.html

[gep13]

Nice links tg, thanks for that!!

Gary

[techgnome]

I don't have a bookmark for it... but also look up "CSS Zen Garden" ... that's another good CSS-related site.

-tg

[gep13]

Now that site I have used:

http://www.csszengarden.com/

Gary

[techgnome]

Apparently there were a couple of posts in the middle that I missed... feel free to snag a look at the CSS for the site, by all means.

http://test.arsse-radio.com/public/css/style.css

There's a lot of repeated sections in there but that's because some of the stylings are based on IDs rather than classes (due to the js manipulations I'm doing, most things have an ID and may or may not have a class) ... and with the caveat that it's a work in progress, so I might chunk it down later - and there's sections where there's a lot commented out.)

If you browse through OSWD, you'll find the original version of the template in there.

-tg

[Working.Net]

Thanks everyone for your feedback. I took a quick look at the http://www.csszengarden.com/ site and I liked what I saw. I also liked tg's website though that is not quite what I was looking for. Looks like I'll have to spend some time familiarizing myself with css but it if helps reduce the frustration I am dealing with now it will be worth it. For now I will close this thread and start the weekend. If I have other questions I have a feeling they'll be more specific anyways. Have a great weekend everyone and thanks again for your time and feedback.

[gep13]

Sounds good!

Will keep an eye out for your other threads