using css in menu's and treeview

[ton]

Hi,
I'm trying te use css files. To do this I've created a style sheet. My first
question is how can I modify the properties (font & color) of menu controls
and the treeview control. These controls are now designded like:
<asp:Menu ID="mnuCompass" runat="server" Style="z-index: 101; left: 8px;
position: absolute; top: 28px" Width="176px" CssClass="compass10"
Height="32px">

And the treeview:

<asp:TreeView ID="TreeView1" runat="server" Height="800px"
ImageSet="Msdn" NodeIndent="15" ShowLines="True" Style="z-index: 101;
position: absolute; left: 0px; top: 12px;" Width="240px"
CssClass="compass10" >
<HoverNodeStyle Font-Underline="True" />
<SelectedNodeStyle BorderStyle="None" Font-Underline="True"
HorizontalPadding="0px" VerticalPadding="0px" />
<NodeStyle HorizontalPadding="2px"
NodeSpacing="0px" VerticalPadding="2px" />
</asp:TreeView>

In my stylesheet I've defined 'compass10'
..compass10 { font-family: Arial; font-size: 10pt ; color: White;
text-align:left}

but there is no way that these elements "listen" to this css setting.
Other elements like textboxex, labels with the samen cssclass value do
change due to the setting in the style sheet

Please help

thanx


Ton

 

[randy.buchholz]

Have you added a reference to the css in your project/page?

 

[ton]

yes, i've a reference to the stylesheet because
other controls like label and textboxes reacts on the 'compass10' attributes
set in the stylesheet

When I look at the source of the website in IE there is a part generated
which may explain what happens:
<link
href="/WebSite2/WebResource.axd?d=VmdM2t5bgOWicRKJGRhb4cx6W2VRxB2YRP6qG-I6JpChxye7BmZ_j_D6U_B32aSmmPHFeVQ0ah269Cp1r_EiaQ2&amp;t=633543153322060000"
type="text/css" rel="stylesheet" /><style type="text/css">
.mnuCompass_0 {
background-color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px;
}
.mnuCompass_1 { color:White;text-decoration:none; }
.mnuCompass_2 { color:White;height:32px;width:176px; }

</style></head>

I think ASP generates some kind of style to the page. The question is how
can I set this style to the style I want to use. And why is ASP doing this?

Thanx

ton

 

[randy.buchholz]

I'm no expert here, but I'll see if I can help. You may find it better to
use themes instead of CSS (actually themes + theme CSS). Themes give much
better style control, and allow you to get to things just using CSS really
can't. Also, using themes you can control just about any aspect of your
presentation because you can make any attribute of any object themeable.
(Even those you never should ). I found the theme-anything in a post
somewhere, I'm thinking in this fourm. I had the same type issues with CSS
when I first started. I never figured out what was causing it, but as my
design/coding became better the problem just went away.

 

[ton]

I've found the solution here:
http://msdn.microsoft.com/en-us/library/ms366731(VS.80).aspx

The point is you have to add an extra item in the html of the menu control:

<aspanel ID="pnlI3" runat="server" Height="232px" Style="z-index:
108; left: 528px; position: absolute; top: 648px" Width="600px"
Visible="False">
<asp:Menu ID="mnuTab" runat="server" Style="z-index: 116;
left: 16px; position: absolute;
top: 120px" Width="160px"
OnMenuItemClick="mnuTabMenuItemClick">
<LevelMenuItemStyles>
<asp:MenuItemStyle CssClass="level1"/>
<asp:MenuItemStyle CssClass="level1"/>
<asp:MenuItemStyle CssClass="level1" />
</LevelMenuItemStyles>

</asp:Menu>

In the css file you add:
..level1
{
color: White;
background-color:Transparent;
}

I guess that if the LevelMenuItemStyles is missing inline styles are
generated, which you can not modify in designmode

Thanx

Ton