I'm working on a relaunch of Wargames.Com, the wargaming site that attorney Wade Duchene and I successfully defended from a UDRP arbitration challenge by MGM Studios two years ago. The site began as a wargame store, but sales and traffic weren't enough to justify the aggravation of running an online storefront, so I retreated from ecommerce after 18 months. (I was the entire customer service department. You'd be surprised at the number of people who order from one web site, then call a completely different site to complain when they're unhappy with the product.)
As someone who has played wargames and role-playing games since the '70s, I'd like Wargames.Com to become a site for wargame enthusiasts that's worthy of its killer domain. For the relaunch, I'm rolling out features over time, beginning with a wargame store locator and convention calendar. The site's database currently contains 960 stores and 34 conventions. After these features are done, I'll add community forums, product news and perhaps blogs.
Although I've been publishing on the web for more than a decade, I suck at web design. Yesterday it took me six hours to create a vertical menu bar for the site using Cascading Style Sheets (CSS). The Wargames.Com main menu is defined in HTML as a simple list:
<div id="navcontainer">
<ul id="navlist">
<li><a href="/">Home</a></li>
<li><a href="/add-store">Add a Store</a></li>
<li><a href="/conventions">Conventions</a></li>
</ul>
</div>
CSS can transform a list like this into a row of graphical menu buttons. Instead of using cut-and-paste to swipe somebody else's design, I decided to learn all of the CSS that goes into the creation of a menu bar and develop it one step at a time.
Huge mistake.
You'd be surprised at all the different styles that have to be set to make a simple row of buttons light up when a mouse hovers over them. Changing one style like float, width or display can dramatically hose a bunch of other styles -- style sheets, like nuclear power plants, are susceptible to cascading failure.
With the help of A List Apart, I learned just enough CSS to understand that it was hopeless for me to go on and I'd never be able to create a row of three rat bastard blue buttons with goat-humping shiny blue hover effects.
I was ready to choose another profession when I discovered Listamatic, a site that contains several dozen example CSS lists with the HTML and CSS required to create them. You can preview lists, find the one that's closest to your desired effect and boom. I chose Russ Weakley's rollover horizontal list.