> I basically want to use the programming power of ASP.NET with the site
> layout of CSS. Documentation weems very sparse.
>
> Anyone able to help out here?
Finally a post I'm able to answer!
Here at my work place, we've been using asp.net 2.0 since it was in
beta, and I know how hard it is to get asp to play nice with CSS. I'll
show you a few tricks I've come up with, as well as explain how I got my
CSS Zen Garden to work. As I'm developing a site for our customers to
use for *their* customers, I need the layout to be as flexible and
changeable as possible. I'll use my trusty geocities account to provide
some screen shots of what I'm doing, and I'll probably end up staying
late at work to make up for the time this cost me. ;) But it will be
worth it.
=======================
Tip 1 - Skin files
=======================
First of all, you need to half way buy into the skinning function asp
offers. I know these skin things only do inline code, but that's not
what I use it for. Instead of specifying CSS in this skin file, specify
CSS *classes*, like this:
<asp:Button CssClass="x-button" runat="server"/>
<asp:CheckBox CssClass="x-checkbox" runat="server"/>
Or this:
<asp:GridView CssClass="x-gridview" runat="server" GridLines="Vertical">
<AlternatingRowStyle CssClass="x-gv-alternating"/>
<FooterStyle CssClass="x-gv-footer"/>
<HeaderStyle CssClass="x-gv-header"/>
<PagerStyle CssClass="x-gv-pager"/>
<%--<RowStyle CssClass="x-gv-row"/>--%>
<SelectedRowStyle CssClass="x-gv-selectedrow"/>
</asp:GridView>
Doing this gives you default CSS classes for everything you can specify.
To access certain ones, refer to them as part of <div>s. Let's say you
have the following asp:
<asp:Panel CssClass="shopping-div" ID="divShopping" runat="server"
Visible="false">
<asp:Panel CssClass="category-div" ID="divCartServices"
runat="server">
<h5>New Service Subscriptions</h5>
<asp:GridView ID="gvCartServices" runat="server"
ShowHeader="false" AutoGenerateColumns="False"
DataSourceID="odsCartServices" DataKeyNames="ServiceID">
Ignoring how bad that looks with word wrap, you can now access your
gridview by the path ".shopping-div .category-div .x-gridview" (remember
it has a class "x-gridview" from my skin file), and also have that
gridview under something else, such as ".sub-content .x-gridview".
Using the CssClass (mentioned already) is also handy for styling rows
and such:
<asp:BoundField ItemStyle-CssClass="t-name" DataField="PackageName" />
=======================
Tip 2 - Extra Markup
=======================
One thing to keep in mind is that MS loves to spit tables and spans at
you. With this in mind, use a repeater instead of a dataview and a
literal instead of a label. Repeaters and literals use 0 extra markup,
whereas dataview adds a table around your info, and label adds a span.
There's not much extra I've found to get around the extra tables, so
advice from someone else is much appreciated.
=======================
Tip 3 - CSS Files
=======================
I use a master page with 2 CSS links in it:
<link rel="stylesheet" type="text/css" href="default.css" />
<link rel="stylesheet" type="text/css" runat="server"
id="ssLayout"/>
The first one is a file that includes basic fixers, like "font-size" for
IE using ems, etc, which is included in every page regardless of
anything else. The second one is generated by my C# code-behind and is
based on a drop down list I have for different layouts. This allows me
to change CSS files on the fly, which is really nice. For those that
read TJK's post about "Liquid Layouts" [1] or PIE's "In Search of the
One True Layout" (which were both published after my question of how to
get one html file to have different layouts) you can see what this drop
down lets me do. There you go: Zen Garden. :)
But wait, there's more! We have our own BasePage class(?) that we put
in our code behind instead of inheriting specifically from the default
asp.net one. Our base page thingy (I'm hopeless on C#) gets a user
preference setting from the session and inserts a third CSS file
according to which theme is preferred. This means <drum roll> that you
(the user, at least for now until our customers set a theme in stone)
can change themes AND layouts INDIVIDUALLY for the whole site with two
drop down lists, one for each change. Let me tell you, it's awesome (at
least to me lol) and I wish I could show you a live site.
==
Ok, shutting up now
==
Hopefully my rambling helped a little bit with how to get asp to play
nicer with CSS and how to do your zen garden. If you have any
questions, I'll sure try to answer.
==
Screen shots
==
(only online temporarily, for this list's eyes only). Obviously they're
not all perfected, but you can see the functionality when viewing the
same page in all screen shots using an 800xX size screen. Note to those
who want to critique the themes: These themes are what I've put together
in a short time to demonstrate what our customers can do with CSS and
are not necessarily going to be used. That said, any comments are still
welcome if you feel like giving them. :)
Theme: Default. Layout: 1
http://www.geocities.com/gotcj/temp/image1.png
Theme: Forest. Layout: 1
http://www.geocities.com/gotcj/temp/image3.png
Theme: Default. Layout: 5
http://www.geocities.com/gotcj/temp/image5.png
Theme: Golden. Layout: 5
http://www.geocities.com/gotcj/temp/image2.png
Theme: Wheat. Layout: 5
http://www.geocities.com/gotcj/temp/image4.png
~ cj
[1] http://www.tjkdesign.com/articles/liquid.asp
[2] http://www.positioniseverything.net/articles/onetruelayout
(sorry this was so long)
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
