well actually, I've been aware of that property and using it pretty superficially, however my in-depth knowledge of CSS for layout has been lacking...
I've been dependent on tables for that since I started developing web pages back in '96....
someone turned me on to cssZenGarden and what is possible using CSS for content, and wondered who's been doing that kind of stuff in the ASP.Net world..
I don't believe css positioning v tables for page layout is an ASP.NET thing. There are those who prefer to follow the W3C recommendations and use CSS and those that don't. Equally, there are those who can work with CSS and those that haven't got
to grips with that particular speciality yet. ASP.NET makes it more difficult to have a pure css layout, because the default rendering of most of the databound controls, and other server controls is in tables.
I use divs and css for layout because I find I get significantly lighter pages, and I don't have to fight my way through a russian doll of nested tables. I steer clear of any solution that requires cross-browser "hacks", and all my sites use a fixed width
#wrapper div.
See, now this is where people seem to suffer the greatest confusion, in my opinion. They look at the Tools panel in VS/VWD and see all these marvellous Panel Controls/DropDownLists/ListBoxes/GridViews etc and completely forget, or are oblivious to the fact
that every single one of them renders as html.
A fundamental understanding of how these things render is crucial, as is an understanding of the CSS box model, and how to apply it to block level html elements. A "panel control" is just a straightforward div. What I termed earlier as a #wrapper is a
div with a width set to whatever I want to constrain the page content. If you style the resulting div rendered by your panel control with a width attribute, you have effectively used a wrapper. You can do this from a style sheet or using inline styles.
I prefer a style sheet for cleaner separation of presentation and content.
Basically what I'm suggesting is instead of looking at your page as a collection of panel conrols, datalists, imagebuttons etc, you should think of the html that needs to be used to render your page in the way you want it. Then you can best decide which
artifacts in the Toolbox will result in what you want. The only real difference between the ones that appear under General, and the ones that appear under HTML is that the former automatically acquire a unige ID name and runat="server", so they can be manipulated
in your server-side code. Once they appear in a browser, they are identical to eachother.
So I'm guessing that I should probably use html or css tags for content and server controls (gridviews, repeaters) for data presentation?
Or is that too dogmatic and not flexible enough?
It would kind of make sense in that if I don't need a server control and all of the overhead associated with it, why use it for simply jazzing up the page?
drdexter33
Contributor
2289 Points
889 Posts
CSS UI Design/Am I in the right place?
Mar 23, 2007 06:38 PM|LINK
Hey there...
I've decided to try my hand at using absolute positioning CSS to jazz up our UI for our latest project.
Getting it to work on the other hand is making me nuts...
is this the right place to ask for examples?
thanks.
doug
Mikesdotnett...
All-Star
155635 Points
19985 Posts
Moderator
MVP
Re: CSS UI Design/Am I in the right place?
Mar 24, 2007 08:23 PM|LINK
Web Pages CMS | My Site | Twitter
drdexter33
Contributor
2289 Points
889 Posts
Re: CSS UI Design/Am I in the right place?
Mar 26, 2007 01:19 PM|LINK
sorry for being so vague...
i was just trying to find examples of CSS in the context of ASP.Net...
I think I've worked it out.
Thanks.
doug
Mikesdotnett...
All-Star
155635 Points
19985 Posts
Moderator
MVP
Re: CSS UI Design/Am I in the right place?
Mar 26, 2007 05:51 PM|LINK
Web Pages CMS | My Site | Twitter
drdexter33
Contributor
2289 Points
889 Posts
Re: CSS UI Design/Am I in the right place?
Mar 26, 2007 07:51 PM|LINK
well actually, I've been aware of that property and using it pretty superficially, however my in-depth knowledge of CSS for layout has been lacking...
I've been dependent on tables for that since I started developing web pages back in '96....
someone turned me on to cssZenGarden and what is possible using CSS for content, and wondered who's been doing that kind of stuff in the ASP.Net world..
thanks
doug
Mikesdotnett...
All-Star
155635 Points
19985 Posts
Moderator
MVP
Re: CSS UI Design/Am I in the right place?
Mar 26, 2007 08:40 PM|LINK
I don't believe css positioning v tables for page layout is an ASP.NET thing. There are those who prefer to follow the W3C recommendations and use CSS and those that don't. Equally, there are those who can work with CSS and those that haven't got to grips with that particular speciality yet. ASP.NET makes it more difficult to have a pure css layout, because the default rendering of most of the databound controls, and other server controls is in tables.
I use divs and css for layout because I find I get significantly lighter pages, and I don't have to fight my way through a russian doll of nested tables. I steer clear of any solution that requires cross-browser "hacks", and all my sites use a fixed width #wrapper div.
Web Pages CMS | My Site | Twitter
drdexter33
Contributor
2289 Points
889 Posts
Re: CSS UI Design/Am I in the right place?
Mar 26, 2007 09:40 PM|LINK
Great tips...thanks..
one more question:Say you need to create an ascx control that looks like this:
And all of the stuff needs to retain it's position when it's placed in the master page.
Currently I've got everything in a Panel control.
Would it be better to place it in a wrapper?
I decided to put it in CSS because there's some overlapping design element layers (text, photo of woman, not to mention the DataList control)
thanks again for your help..
doug
Mikesdotnett...
All-Star
155635 Points
19985 Posts
Moderator
MVP
Re: CSS UI Design/Am I in the right place?
Mar 27, 2007 07:08 AM|LINK
See, now this is where people seem to suffer the greatest confusion, in my opinion. They look at the Tools panel in VS/VWD and see all these marvellous Panel Controls/DropDownLists/ListBoxes/GridViews etc and completely forget, or are oblivious to the fact that every single one of them renders as html.
A fundamental understanding of how these things render is crucial, as is an understanding of the CSS box model, and how to apply it to block level html elements. A "panel control" is just a straightforward div. What I termed earlier as a #wrapper is a div with a width set to whatever I want to constrain the page content. If you style the resulting div rendered by your panel control with a width attribute, you have effectively used a wrapper. You can do this from a style sheet or using inline styles. I prefer a style sheet for cleaner separation of presentation and content.
Basically what I'm suggesting is instead of looking at your page as a collection of panel conrols, datalists, imagebuttons etc, you should think of the html that needs to be used to render your page in the way you want it. Then you can best decide which artifacts in the Toolbox will result in what you want. The only real difference between the ones that appear under General, and the ones that appear under HTML is that the former automatically acquire a unige ID name and runat="server", so they can be manipulated in your server-side code. Once they appear in a browser, they are identical to eachother.
Does that help focus things for you?
Web Pages CMS | My Site | Twitter
drdexter33
Contributor
2289 Points
889 Posts
Re: CSS UI Design/Am I in the right place?
Mar 27, 2007 12:56 PM|LINK
So I'm guessing that I should probably use html or css tags for content and server controls (gridviews, repeaters) for data presentation?
Or is that too dogmatic and not flexible enough?
It would kind of make sense in that if I don't need a server control and all of the overhead associated with it, why use it for simply jazzing up the page?
thanks again...
doug
mtmorgan
Member
14 Points
5 Posts
Re: CSS UI Design/Am I in the right place?
Apr 20, 2007 09:28 PM|LINK
Some good resources to get you started down the CSS pathway:
website:
books:
- CSS: The Definitive Guide, 3rd Edition
- CSS Mastery: Advanced Web Standards Solutions
- Eric Meyer on CSS: Mastering the Language of Web Design
- More Eric Meyer on CSS
- Designing with Web Standards, 2nd Edition
- Web Standards Solutions: The Markup and Style Handbook
http://www.nerdbooks.com has all of the books