CodeVerge.Net Beta


   Item Entry   Register  Login  
Microsoft News
Asp.Net Forums
IBM Software
Borland Forums
Adobe Forums
Novell Forums




Can Reply:  No Members Can Edit: No Online: Yes
Zone: > Asp.Net Forum > microsoft_downloads.css_friendly_control_adapters Tags:
Item Type: Date Entered: 1/2/2007 5:25:59 PM Date Modified: Subscribers: 0 Subscribe Alert
Rate It:
NR
XPoints: N/A Replies: 2 Views: 84 Favorited: 0 Favorite
3 Items, 1 Pages 1 |< << Go >> >|
"mxmissile" <>
NewsGroup User
ASP Menu and CssClass Property1/2/2007 5:25:59 PM

0

If I set the CssClass property for my menu, the class='...' attribute does not show up in the output:

<StaticMenuItemStyle CssClass="NavStaticMenuItem" />
<DynamicMenuItemStyle CssClass="NavDynamicMenuItem" />

What am I doing wrong, or do the adapters just not support that.  Or is there a better way?


http://www.heliosfx.com
"Russ Helfand"
NewsGroup User
Re: ASP Menu and CssClass Property1/4/2007 7:44:11 PM

0

I admire the way your phrased your final questions.  It is clear that you are open to thinking about things differently than you have in the past. And that's exactly what you have to do when you start using the CSS Friendly adapters.

Rather than thinking about styling by using classes that you set with the traditional CssClass attribute, you want to start thinking about using more "tag based" CSS selectors.  This is an enormous conceptual jump for a lot of web authors... but once you make it, you never go back!  Light some candles, put on some relaxing music and try to get into a good mental space.  Now clear your mind and imagine a blank piece of white paper where we are going to sketch out some things. First, imagine that you see you <asp:Menu>.  Now imagine that it transformed into the HTML that the adapters will produce for that menu.  That HTML is laid out in a really simple and predictable way.  On the outside is a <div> whose class equals the value you set for the CssSelectorClass of the <asp:Menu>.  Inside that <div> is a <ul> whose class is AspNet-Menu.  It is the "main" unordered list (ul tag) for your <asp:Menu>.  Inside it are, naturally, some <li> tags that are the menu items of your menu's first tier.  If your menu has submenus than some of these <li> first tier menu items will contain <ul> tags (that themselves contain more <li> tags, etc.).

<div class="someCssSelectorClass">
  <ul class="AspNet-Menu">
    <li>...</li>
    <li>
      <ul>
        <li>...</li>
        <li>...</li>
      </ul>
    </li>
    <li>...</li>
  </ul>
</div>

So you can now build CSS rules whose selectors "target" any part of this HTML reliably.  Suppose you want your "static" (1st tier) menu items to have a blue background and all submenu items (in the 2nd, 3rd, etc. tiers) to have a green background.  Then you can use a doublet of CSS rules like this:

.someCssSelectorClass ul.AspNet-Menu li { background: blue; }
.someCssSelectorClass ul.AspNet-Menu li li {background: green; }

The first rule says that the background of all list items (li tags) that are children, grandchildren, greatgrandchildren, etc. of the topmost ul in the menu should have a blue background. The second rule overrides that color with green for the grandchildren, greatgrandchildren, etc. of the topmost ul.  That's a common pattern of implementation in CSS.  Rules are often in doublets or triplets, etc., so that the earlier ones are refined by the later ones.  The later rules tend to have selectors that impact let of the DOM in the HTML so that your rules stack up (cascade) much like painting a pictures by adding layers.  You pain the whole canvas the color the sky and then add mountains in the background on thop of the sky.  Then you add trees and snow on the mountains, etc. Each layer is smaller than the one before it.  CSS selectors are stacked in an identical fashion.

The important thing here is that you get the idea that the adapters give you a very simple and predictable set of rendered HTML tags for a menu or treeview, etc.  That predictability lets you stop using CssClass as much and start, instead, writing CSS rules (selectors) based on the foreknowledge of the rendered HTML.  That is a radical departure from the traditional ASP.NET philosophy that you should never count on the predictability of the rendered HTML. Here, we are telling you that that is OK to do in order to let you create style sheets that are more "tag based" in their CSS selectors.  By doing so, you no longer need to scatter CSS classes over your markup in your ASPX files.  You basically end specifying the outer <div>'s class via the CssSelectorClass you use on your tag (like your asp:menu).  From that and the simple foreknowledge of what the adapters produce you can do everything you want in CSS, cleanly decoupling your markup and your styles in a skin-able CSS fashion.

Once you get that whole pattern, it makes a lot more sense when you go and study these pictures (that my wife, Heidi, brilliantly composed) http://www.asp.net/cssadapters/whitepaper.aspx#SamplesCSSClassesMenu.

This is a pretty huge jump in thinking so if you are still fuzzy on stuff, write back and I'll try to coach you along more.  Good luck and Happy New Year.


Russ Helfand
Groovybits.com
"mxmissile" <>
NewsGroup User
Re: ASP Menu and CssClass Property1/4/2007 8:09:26 PM

0

"It is clear that you are open to thinking about things differently than you have in the past."

Alright Russ, can you provide a link to my un "open" thinking'ness?  Wink

 I eventually handled it a little bit different than your description above, however it did open me to a few new ideas.  And the further I did into these adapters the more I like what I see.  I just wish the IDE was smart enought to hide/disable those properties so people like me dont try to utilize them.

 Great writeup in the whitepaper.  That's going to help a ton.

 


http://www.heliosfx.com
3 Items, 1 Pages 1 |< << Go >> >|


Free Download:













bug? login control fires onloggedin and onloginerror twice with css friendly adapters

javascript warning in treeviewadapter.js

can writebegintag generate spaces instead of tabs?

menu outputs span tags even when adapterenabled=false :-( please help!

cssfriendly menus not working in ie6

using css adapters displaying menus over dropdown list

phantom menus

generate a .dll file from the app_code/adapters .cs files?

menu with static display and control adapters

setting id for menu adapter and output it in the li tags from exo_duz

formal justification for using css-friendly control adapters

re: using cssfriendly adapters and template conversion

custom menu control - inline css problem

help

horizontal menu 1st tier text overlapping 3rd tier menu items

horizontal menu width issue

variable width of horizontal top level menu elements?

moss2007 & cs2007 support ?

changepassword validation group

detailsview rendered as overlaped name and value

loginstatusadapter requires membershipprovider

installation/config problem

partial install success

treeview cssadapter theme does not work with function log out anymore

ie 7 problem with css

css friendly adapter, disable for ie6

issue with menu appearance in ie

q: horizontal menu - varying width for top elements ?

disappearafter vs javascript settimeout

warning cssselectorclass

menu rendering with javascript dopostback defeats search engines

visual studio 2008 compatible?

how to uninstall css adapter 1.0 site template?

scroll through the table body cells while table header and table footer information remains "in view". in ie7

retrofitting css adapters into an existing website

node selection problem in cssadapter tree view

how to create an adapter for the sitemappath control? how to handle the various templates (rootnodetemplate, currentnodetemplate, nodetemplate...)?

selected | alternate row deon't work: fix

css friendly horizontal menu displaying menu too far to the right in the browser window

mix css / non-css controls in same web app?

bug: urls not resolving correctly

stylesheet question

questions regarding details view in input mode.

treeview not keeping state

show path back to root node

how exactly do you use these?

cssadapters and moss 2007, how to get it done?

safari menu control

css friendly adapters (beta3) can't find css file

detailsview not rendering correctly with insertvisible attribute

   
  Privacy | Contact Us
All Times Are GMT