Diary of a Fan

The trials of following Newcastle United FC

Diary of a Fan is a combination of a blog (post pages, archive pages, etc) and other pages (such as this one). The blog is powered by MoveableType. If anyone really wants the templates they can contact me. Most of the site is controlled through the mainstyle sheet, located at http://ianscott.port5.com/diary/styles/diarymain.css. (Please note my copyright).

All pages rely on the above stylesheet. It performs layout and the like. Colours and such are set by diarydec.css or diaryawaydec.css for the home or away themes. Individual pages, such as this one, also rely on fanfix.css for additional styles. The code is as semantically correct as I could manage and the site looks fine in a text only browser. I intend to write this up in a little more detail when I get time. For now, if you have a query I haven't answered here, please feel free to contact me.

Headhead

The banner head is a style level 1 heading. The crest is a background image applied to this heading. A simple but effective trick

The menu just beneath the banner heading is one of the most interesting aspects of the site. The dropdown is done using pure CSS. The menu itself is made up of nested unordered lists. The outer <li> are floated left (this means that the level 2 header containing the tag line is important as its width pushes the menu over) and right padding is used to keep them separated (I was going to apply display:inline; to the <li> but Opera didn't want to play nice). The outer <li> also have position:relative; applied. The inner <ul> are have position:absolute but also display:none; We then use ul li:hover ul display:block;} to display the menu. This menu scheme is was somewhat influenced by Patrick Griffiths and Dan Webb's Suckerfish Dropdowns and Eric Meyer's Pure CSS Menus. Of course this normally wouldn't work in Internet Explorer, which doesn't support :hover on any element other than <a>. To get around this I use Peter Nederlof's fantasic behaviour (hidden in a conditional comment which only IE understands) to get :hover working with everything. The rest is just pretty styling.

Accesibility Links

The technique behind the accessibility links was pretty much ripped from Dave Shea's wonderful Mezzoblue (if you don't know which links I'm talking about try tabbing through the links on the page. Just after the link formed by the bannerhead a new link appears just beneath). Basically we enclose our accessibility links in second level headers (though anything block level will do) which we then absolutly position with a large negative left value to get them out the way. We then absolutly position the anchors, and use a:focus to position them with respect to that header, so a large positive left value brings them back on screen. Cool.

Column Separation

The two columns of the main Diary of a Fan pages (the content area and the sidebar containing results etc.) are formed by simply floating content left and giving it a width. As we can't be sure which column will be longest in all cases this is the easiest way. The footer area has clear:both; applied to ensure we stretch the containing <div> down. Because we don't know which column is longest however we can't apply a border to one to draw the separating vertical line. Instead we use a variation on Faux Columns, positioning a 1 pixel sized background image on the containing <div> and then tiling it vertically. we set the background color of the bannerhead, menu and footer areas to prevent it shining through there. (A note of caution. It seems that Opera 7.23 doesn't like having background positions set with fractions of an em, or mixing units e.g. background-position:3em top).

Server Side Includes

Although you can't tell from the code, a lot of repeated areas are actually inserted using server side includes. The bannerhead, menus and some meta information are all inlcuded in this way (the footer area isn't because it varies between pages slightly). The recent results and table are also broken down into modules included in the same way.

Browser Support

The site has been tested in Mozilla 1.7RC2, Firebird 0.7 (which does groovy things to the menus), IE6.0 and Opera 7.23 on Windows XP and works in all. It doesn't work in IE5.5 or IE5.0 on windows. I doubt if I'll fix that, if it bothers you I can only suggest you upgrade. I've seen a screenshot of the front page in Safari 1.2 on OS X 10.3 (Panther) which looked fine (via icapture). It's also been tested on a Windows version of Lynx 2.8.3 and works as I'd expect.