Need help deciding how to approach coding this layout

[invertedpanda]

Ok, I know of a few different ways to approach coding this layout (well, the header), but I'd like some opinions/arguments from others to help me settle.

The first, and easiest, would be to just create a div with the header image as a background, and use css to define image-map style hotspots using anchor tags and absolute positioning.

The problems with this is it isn't too TTS reader/text based browser friendly (no alt tags). I don't have many visitors using those, but I myself use Lynx on occasion (I'm a Linux/BSD user). I believe I could probably put the necessary text in the anchor tags and just specify font size=0, but I'm not sure how well that would work.

The second would be to chop the header image into two parts and take out the menu text, and write the menu text in the HTML.

This would be the best bet for TTS readers/lynx users, but the overall quality of the typography would suffer (due to a lack of anti-aliasing in web fonts rendering in Windows; a good Linux browser will render it beautifully, however ).

Another option would be to do the above idea, but chop the menu options out as image links with alt tags. While it would work, you have to then consider bandwidth overhead (from image headers), unless more consideration was given to compression (.gifs would work for the menu buttons).

Anyway, I'd like to hear some other opinions.

[Charles]

See http://www.csszengarden.com/ , taking a close look under the hood.

[invertedpanda]

Whoops - forgot to post a link

Yeah, I've studied csszengarden, but I'd like to hear arguments for each side. I'm always up for rethinking my design practices, so I ask people to argue other design practices so I can get a full perspective

http://sound.the-engine.org/csml/csml2.jpg

[Acorn22]

Originally Posted by invertedpanda

Whoops - forgot to post a link
http://sound.the-engine.org/csml/csml2.jpg

Dead link ^^

Anyways, are going to do something like frames or a PHP include? Or will it be a "different" banner on each page? If you use a different one on every page I would definitly go with CSS. I just recently took my semester exam which was to make a full website for someone. I didn't use CSS on my nav area and it was a pain in the ass.

[invertedpanda]

Try copying and pasting the link. Hotlink protection sucks, but with the number of people trying to leech bandwidth, I HAD to do something (I had an unbelievable amount of people putting my artwork on their blogs or MySpace profiles)

php includes, same on every page. I've been doing web dev for a few years now, and actually run my own design business I don't do a page without CSS; the first option, however, would be using CSS to create image-map style hotlinks.

I'm going to go ahead with the text-based links concept, and see how the typography looks. It should be the least amount of code (including in the stylesheet), and the most browser-friendly.

*edit* tried it, didn't like it, went with a image-map style setup. I'll be sure to include a text version of the menu at the bottom in order to allow text-based users to visit the site.