6. Master Page Live Demo

Main Points

• Implementing Master Pages The alterations needed to either make the master page work, or take advantage of its opportunities.
• Rebuilding the Nav Bar Rewriting the nav bar as nested lists without all the non-POSH internal divs.
• ^{Skip to Main Points} links return to the Main Points menu.

Implementing Master Pages

This demo begins to set up some of the ASP.NET structural changes necessary to take master pages site wide: a folder for master pages, dropping the web.sitemap based breadcrumbs, XHTML alterations to the navbars and adjusting the CSS and JS files to accommodate the realities of a master page based website.

First, I created a folder for master pages, and copied my template, under a new name MasterPage06Demo.master, into the new folder. I also created folders for the CSS files and all the javascript JS files and moved all those files into them. I started looking through the file for anything that looked "broken" and which now needed to be referenced via the application root. For reasons I can't explain however it's not working. I'll probably have to post the page live... which should be interesting since it doesn't really match the site right now. I'll figure something out. Maybe port the current site to www.EarthChronicle.com and build this one as beta.EarthChronicle.com. That might work, and it may be necessary to post what I've got to get assistance. I remember this problem from before and it was such a pain in the ass I went back to writing fiction for a long time.

I also removed the ASP.NET SiteMapPath control. I will have to handle breadcrumbs manually, or... something. Technically, it's only commented out so I know exactly where it was in code. I was having visions of working on alternatives in a month or more and having no idea where the breadcrumbs went in code, searching through old files for the info, etc. It seemed wiser just to comment it out so I can go back.

Unfortunately, ASP.NET doesn't seem to give you a way to comment out this code. It recognizes the tag inside, and even caused sufficient problems that my first two attempts to modify it didn't work. I just decided to eliminate the tag and leave only a comment saying, SiteMapPath Was Here!

[chroniclemaster1, 2008/09/14]

Rebuilding the Nav Bar

The most important structural change that I made however, and certainly the most noticeable from a coding perspective... I rebuilt the nav bar so that it appears as a list instead of a series of divs. The code is actually lighter and more appropriate. POSH XHTML puts a premium on using lists where they are semantically appropriate, and navigation is high on that list. POSH (Plain Old Semantic HTML) is a relatively simple and clear philosophy of writing code, so this was relatively easy to fix. The one thing I had to add was a short span.

When I changed to nested lists, the Chronicle Subjects "title" in the first site wide menu lost it's left margin and collapsed to the left border. I tried playing with the CSS unsuccessfully, so I wrapped it in a div. I added the div id , chronicleSubjects, to the same style rule where the left margin for the links is set, so whenever the one is changed, the other will as well. Unfortunately, even though it worked fine in Firefox and Opera, it destroyed the site wide nav bar in IE. Once I changed it to a span and added a style rule to change chronicleSubjects display to "block", all three browsers displayed fine.

First, I changed the double div (really a div and wrapper) to be an unordered list with a div wrapped around it. I left all the ids and classes the same.

Then I removed the divs which wrapped each button and menu (which made them separate elements) and recreated them as a single unit. The buttons are list items in the list and the menus are sublists nested underneath each button.

This is a much more standards compliant way to code the nav bars and to observe best practices. ie It's the way I should have written it in the first place. And I don't know why I didn't, so this was about fixing that mistake.