CSS Layout, Vis Studio 2005, and AJAX Tab Container

Question

In a C# Web app, VS 2005 (I am avoiding 2008 because I find the IDE to be hard to deal with), I am getting into a layout stew.

I am moving from absolute positioning toward CSS relative positioning.

I'd like to divide the screen into four blocks: top (header band), middle left (a stacked menu), middle right (content - here the AJAX tab container), and bottom (footer band), with all 4 blocks positioned relatively, but the controls in the middle right (content) block positioned absolutely relative to the top left corner of the block. A nice side benefit would be to have the IDE design window show all controls as they actually would be displayed, but I doubt this is possible. The IDE is positioning all controls inside the tab panels relative to the top left of the design window; quite a mess.

Right now, my prejudice is that CSS is good for relatively positioning blocks, artwork, text etc, but not good for input forms where it is important to line up lots of labels, text boxes, ddl's, check boxes, etc.

At any rate, my CSS is not yet up to the task - does anyone know of a good article, book, blog, etc which discusses CSS as it is implemented in ASP.NET, and which might include an example with an AJAX tab control? Any help would be appreciated.

Many thanks

Mike Thomas

Answer 1

So far as I know, there's nothing specific to ASP.NET, and you are right (at least in 2008) about it not using referenced stylesheets.

These may be of use to you, however:

http://www.positioniseverything.net/ - Position is Everything, an excellent CSS resource.

http://www.alistapart.com/topics/code/css/ - A List Apart's CSS section, advice on specific techniques.

Essentially, what you want is 4 main divs for your sight: header, footer, menu, content. Position each div as you like, and then adjust the positioning of their children, which most browsers will treat as 'position relative to my parent' (unless it's absolute, IIRC).

Answer 2

I appreciate this probably isn't the comprehensive answer you wanted but it might help...

To get the content of the right block to be absolutely positioned relative to its top left, you just need to give the container element a position: relative; style. This will turn that element into a containing block, causing all absolutely positioned child elements to be positioned against its boundaries. Heres a useful article on the subject: CSS Positioning. One of the issues with ASP.NET controls, and the AJAX Control Toolkit in particular which it sounds like you're using, is getting it to spit out valid markup. Its best to use controls that give you 100% control over markup, sometimes this means creating complex UserControls or adding small bits of nasty scripting to your aspx file.

Regarding getting the IDE to render properly, don't even bother. I haven't used the design view in VS for nearly two years, and for good reason: it sucks and is based on IE. No IDE is ever going to give you the full rendering experience that a live test will, so personally I don't bother. I know the newer MS tools have much better support for this, although its still not perfect and as reliable as a real browser (obviously you want to be using Firefox here!).

Answer 3

As Jeff says, there is nothing specific to ASP.NET with regards to how CSS is implemented. As for styling your forms with CSS have a read of these to give you some ideas:

• http://www.sitepoint.com/article/fancy-form-design-css/
• http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/
• http://www.quirksmode.org/css/forms.html

Answer 4

Many thanks for all answers - there is a lot to read here, but what I've been through so far has gotten me over the current hump. I've found it a lot easier not to use VS 2005 IDE for lining up blocks in favor of Style Master, but I am still looking at other 3rd party tools before I buy.

Many thanks, Mike Thomas