About - This Site
As I have mentioned, I have been involved in Web Development for years. The lastest term I have heard to describe my role is "Front End Technologist". That is what the Front End/Web GUI/Interface Developers are called at NYTimes.com. I like it. Short, succint, and to the point. Anyway, one might think one could only go so far with HTML, CSS and JavaScript as their core skills in this day and age. Surprisingly, after years, I continually find myself being challenged by trying to stay on the leading edge of technology.
Martinator.com v3.0 (early 2007)
That is where this Version of Martinator.com comes in. Inspored by a "Table Free" layout on AListApart.com, I wanted to create a page layout template using only DIV tags and no TABLE tags. I was unimpressed with all the dramatic negative margins used in the example, so I started from scratch on my own.
This design also had to be cross browser compliant. The previous version wasn't. This means it has the look match as much as possible across not only IE 6 & 7, but also FireFox 2.0, and Opera 9.1. Opera is a great browser to use for debugging HTML and CSS.
Did you notice that I didn't mention Safari? I simply do not have a Mac and experience has shown me that if it works in FireFox and Opera, it "should", (but no guarantees), be safe in Safari.
NOTE: Since I first developed this design Apple came out with a version of Safari for Windows. I am happy to say that this code renders correctly inthat browser also.
Strictly Coded...
I found that coding the HTML to a strict DOCTYPE helped to ensure consistent behavior across all the browsers mentioned, (with minimal CSS hacks, in-line LI behaviour is still treated differently across the board). After a few iterations, I was able to make this site valid using the XHTML 1.1 Strict DOCTYPE. That's about as strict as they come.
The Site Navigation...
The top navigation was quite an enjoyable challenge. Not only are that Table Free (They are a Unordered List), but they are also JavaScript Free. There is a tiny bit of Javascript to set the "Current" tab, but that's it. All the HTML gets pulled from a SSI include file, the same NavBar code for every page. The Secondary Navigation is pulled in via conditional SSI statements. This part of the site occupied 90% of my efforts :-)
Advantages of DIVs
Simply put, the layout is much more flexible and easy to adjust/adapt for different media types. Do a Print Preview to see what I mean.
Hosting
This site is hosted at:
