CSharpZealot.com

Not strictly C# related, but I just posted this one on my blog and it caused me serious head scratching so hopefully by sharing it it will save someone else some bother.

-- From: http://deepdark.net/PermaLink,guid,0eaa175f-2819-4d06-9820-38fe39e82fb5.aspx 

So I came across a problem using a old CSS trick to make a tab strip/menu bar on a site from a Unordered List inside a Div

To create the tabs the trick is you can use some CSS like this:

#nav
{ 
   float:left ; 
   margin: 0; 
   padding: 10px 0 0 46px; 
   list-style: none;
}
#nav li
{ 
   font-size: 150%; 
   float: left; 
   margin:0; 
   padding: 0;
}
#nav a
{ 
   float: left; 
   display: block; 
   margin: 0 1px 0 0 ; 
   padding: 4px 8px; 
   color: #333; 
   text-decoration: none; 
   border: 1px solid #949494; 
   border-bottom: none; 
   background: #686868; 
   color: #949494;
}

...to turn a <UL> with the ID="nav" into some tabs.  For example we add the following to the master page:

<ul id="nav" > 
   <li id="navHome"><a href="default.aspx">Home</a></li> 
   <li id="navProducts"><a href="products.aspx">Products</a></li> 
   <!-- ...and so on... -->
</ul>

OK so far.  The thing with tabs is you always want the tab of the current page to glow a little or something to indicate what page the user is up to.

A common way is to assign an ID attribute to the body tag of each page and include some CSS that looks at the body ID and overrides the #nav a  for the current page.

The trick comes when the pages all descend from an ASP.NET 2.0 Master Page - the body tags are going to be identical on each page.

As luck would have it, CSS lets us select based on any attribute.  Once the page is rendered each page will get its own form tag where the Action attribute represents the current loaded page as so:  

<form name="aspnetForm" method="post" action="Default.aspx" id="aspnetForm">

Which would let us add the following to our stylesheet:

#nav a:hover, body form[action="Default.aspx"] #NavPlaceHolder #nav #navHome a
{
   background: #ffffff;
}

OK So far but the problem is it is case sensitve!  We would need - If the page loads as default.aspx our tab won't highlight.  This just won't do!

The trick is to add a new ContentPlaceHolder in our master page straight above the UL listed above

<asp:ContentPlaceHolder runat="server" id="pageIdPlaceHolder" ></asp:ContentPlaceHolder>

Each page that descends from our master page should then override that ContentPlaceHolder to add an empty Span with a page-specific ID as so:

<asp:Content ID="pageIdContent" ContentPlaceHolderID="pageIdPlaceHolder" runat="server" >
   <span id="ProductsPage"></span> <!-- This page will show the Products tab as selected -->
</asp:Content>

and then we can add a rule to our CSS for each page that would read:  Whenever there is an element with the ID="ProductsPage" right next to one with the ID="nav" do the following.  The + operator selects the next adjacent node in the document as so: