By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,669 Members | 2,203 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,669 IT Pros & Developers. It's quick & easy.

Server-Side CSS on Page Load

P: 24
Very quick question.

I have a master page (M1) and three content pages (C1, C2, C3). In M1, there's a list of three anchors (A1, A2, A3) which point towards the three content pages.

The anchors have some CSS to make them look pretty. I'd like to be able to dynamically set the CSS for A1 when I navigate to C1 so it looks slightly different to the other two (e.g. to indicate this is the currently selected item).

Below is what I have so far. However, unfortunately, this isn't working. I can confirm that the "class" attribute IS being set correctly, and I can even see it if I view the resultant page source, but the actual style doesn't change.

I have found another way to do this by manually setting the Style properties of the anchor in the code behind. but I would prefer to just assign it to a CSS class instead, to keep all my CSS in one place.

My question is - can anyone tell me why, even though the class attribute appears to be being set, the style does not change? My guess it's got something to do with load order on the page, but I'm confused that I can see the class attribute has been set in the browser's "view source" option...

So far, I have:

In M1 (markup):
Expand|Select|Wrap|Line Numbers
  1.         <ul class="mainMenuBar">
  2.             <li><a runat="server" id="homeLink" href="Main.aspx">Home</a></li>
  3.             ...
  4.         </ul>

My CSS:
Expand|Select|Wrap|Line Numbers
  1. .mainMenuBar
  2. {
  3.     list-style-type:none;
  4.     /*Some stuff to make the list look good*/
  5. }
  6.  
  7. .mainMenuBar li
  8. {
  9.     display:inline;
  10. }
  11.  
  12. .mainMenuBar li a
  13. {
  14.   /*Some stuff to make the anchors look pretty*/
  15. }
  16.  
  17. .mainMenuBar li a:hover
  18. {
  19.   /*Some stuff to change the look of the menu item on hover*/
  20. }
  21.  
  22. .currentMenuItem
  23. {
  24.  /*Some stuff to make the menu item look "current". */
  25. }

In M1 (code behind):

I have a function to change the style of the selected anchor. Basically, this function can be called from C1 (or C2, C3, etc.) on Page_Load. The idea is that calling this will set the "class" attribute of the selected anchor:
Expand|Select|Wrap|Line Numbers
  1.     Private Sub MakeCurrent(ByVal control As HtmlAnchor)
  2.         control.Attributes("class") = "currentMenuItem"
  3.     End Sub
  4.  
  5.     Public Sub MakeCurrent(ByVal lt As LinkType)
  6.         Select Case lt
  7.             Case LinkType.Home
  8.                 MakeCurrent(homeLink)
  9.                 ...
  10.         End Select
  11.     End Sub
  12.  
  13.     Public Enum LinkType
  14.         Home
  15.         ...
  16.     End Enum

And finally in the Page_Load of C1 (and the rest), I have the following to call the MakeCurrent method in my master page and change the class of my anchor:
Expand|Select|Wrap|Line Numbers
  1.     Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
  2.         ' Set the css class of the home link on the master page to indicate this is the current page.
  3.         CType(Page.Master, Main).MakeCurrent(Main.LinkType.Home)
  4.     End Sub

Thanks in advance.

-Q
May 21 '09 #1
Share this Question
Share on Google+
3 Replies


P: 24
My apologies, I just checked the w3 specification for the anchor (a) tag:
Expand|Select|Wrap|Line Numbers
  1. <!ELEMENT A - - (%inline;)* -(A)       -- anchor -->
  2. <!ATTLIST A
  3.   %attrs;                              -- %coreattrs, %i18n, %events --
  4.   charset     %Charset;      #IMPLIED  -- char encoding of linked resource --
  5.   type        %ContentType;  #IMPLIED  -- advisory content type --
  6.   name        CDATA          #IMPLIED  -- named link end --
  7.   href        %URI;          #IMPLIED  -- URI for linked resource --
  8.   hreflang    %LanguageCode; #IMPLIED  -- language code --
  9.   rel         %LinkTypes;    #IMPLIED  -- forward link types --
  10.   rev         %LinkTypes;    #IMPLIED  -- reverse link types --
  11.   accesskey   %Character;    #IMPLIED  -- accessibility key character --
  12.   shape       %Shape;        rect      -- for use with client-side image maps --
  13.   coords      %Coords;       #IMPLIED  -- for use with client-side image maps --
  14.   tabindex    NUMBER         #IMPLIED  -- position in tabbing order --
  15.   onfocus     %Script;       #IMPLIED  -- the element got the focus --
  16.   onblur      %Script;       #IMPLIED  -- the element lost the focus --
  17.   >
As you can see, there's no class attribute there, so this is just me being a moog.

Annoyingly, it looks like there's no easy way to do what I'm trying to do using the HTML anchor, so I'll have to use some other element (such as an ASP.NET Button, or something). No big deal.

Cheers anyway.

-Q
May 21 '09 #2

Frinavale
Expert Mod 5K+
P: 9,731
I set the style of links all the time....


To make sure I tested this (using the w3cschool's Try It editor) and it works:
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <style>
  4. .linkStyle{
  5.   color:red;
  6. }
  7. .linkStyle2{
  8.   color:green;
  9. }
  10. .linkStyle3{
  11.   color:blue;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16.  
  17. <a href="lastpage.htm" target="_blank" class='linkStyle'>Last Page</a> 
  18. <a href="lastpage.htm" target="_blank" class='linkStyle2'>Last Page</a> 
  19. <a href="lastpage.htm" target="_blank" class='linkStyle3'>Last Page</a> 
  20. <p>
  21. If you set the target attribute of a link to "_blank",
  22. the link will open in a new window.
  23. </p>
  24.  
  25. </body>
  26. </html>

My guess would be that your browser cache needs clearing??
May 22 '09 #3

P: n/a
Hi ... Not sure if you are still trying to resolve this issue, but if not ...

Make your 'li' element a named server control (include an ID attribute and runat="server"). Then, apply you main and current styles through the 'li'.
Nov 5 '10 #4

Post your reply

Sign in to post your reply or Sign up for a free account.