Server-Side CSS on Page Load

[Queez]

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):

        <ul class="mainMenuBar">
            <li><a runat="server" id="homeLink" href="Main.aspx">Home</a></li>
            ...
        </ul>

My CSS:

.mainMenuBar
{
    list-style-type:none;
    /*Some stuff to make the list look good*/
}
 
.mainMenuBar li
{
    display:inline;
}
 
.mainMenuBar li a
{
  /*Some stuff to make the anchors look pretty*/
}
 
.mainMenuBar li a:hover
{
  /*Some stuff to change the look of the menu item on hover*/
}
 
.currentMenuItem
{
 /*Some stuff to make the menu item look "current". */
}

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:

    Private Sub MakeCurrent(ByVal control As HtmlAnchor)
        control.Attributes("class") = "currentMenuItem"
    End Sub
 
    Public Sub MakeCurrent(ByVal lt As LinkType)
        Select Case lt
            Case LinkType.Home
                MakeCurrent(homeLink)
                ...
        End Select
    End Sub
 
    Public Enum LinkType
        Home
        ...
    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:

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        ' Set the css class of the home link on the master page to indicate this is the current page.
        CType(Page.Master, Main).MakeCurrent(Main.LinkType.Home)
    End Sub

Thanks in advance.

-Q

[Queez]

My apologies, I just checked the w3 specification for the anchor (a) tag:

<!ELEMENT A - - (%inline;)* -(A)       -- anchor -->
<!ATTLIST A
  %attrs;                              -- %coreattrs, %i18n, %events --
  charset     %Charset;      #IMPLIED  -- char encoding of linked resource --
  type        %ContentType;  #IMPLIED  -- advisory content type --
  name        CDATA          #IMPLIED  -- named link end --
  href        %URI;          #IMPLIED  -- URI for linked resource --
  hreflang    %LanguageCode; #IMPLIED  -- language code --
  rel         %LinkTypes;    #IMPLIED  -- forward link types --
  rev         %LinkTypes;    #IMPLIED  -- reverse link types --
  accesskey   %Character;    #IMPLIED  -- accessibility key character --
  shape       %Shape;        rect      -- for use with client-side image maps --
  coords      %Coords;       #IMPLIED  -- for use with client-side image maps --
  tabindex    NUMBER         #IMPLIED  -- position in tabbing order --
  onfocus     %Script;       #IMPLIED  -- the element got the focus --
  onblur      %Script;       #IMPLIED  -- the element lost the focus --
  >

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

[Frinavale]

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:

<html>
<head>
<style>
.linkStyle{
  color:red;
}
.linkStyle2{
  color:green;
}
.linkStyle3{
  color:blue;
}
</style>
</head>
<body>
 
<a href="lastpage.htm" target="_blank" class='linkStyle'>Last Page</a> 
<a href="lastpage.htm" target="_blank" class='linkStyle2'>Last Page</a> 
<a href="lastpage.htm" target="_blank" class='linkStyle3'>Last Page</a> 
<p>
If you set the target attribute of a link to "_blank",
the link will open in a new window.
</p>
 
</body>
</html>

My guess would be that your browser cache needs clearing??

[Dean Henderson]

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'.