My company recently did a complete overhaul of one client’s website, to structural markup. One of the things changed was that navigation is now done with ULs, which is a natural markup for it.
Navigation was a simple list of Home, Help, My account etc.
The client now plan to expand their Internet offer and replace the item Home with several business channels and wanted us to visualy separate those channels from items like My account or Help. They sent a mockup of the design they wanted, that imidiatelly put smile on my face.
This navigation bar is simple unordered list.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
Using CSS, we turned this into a horizontal list, by simply floating list items to the left. Before the redesign, this was achieved with tables. And that is why I smiled now. Using tables, this new effect client wanted would be horrible to achieve - either using all graphics, or using two table rows - one for upper part of the tabs (slanted one) and lower for the actual text.
With new markup, it was only a matter of style change and one graphic. The only change needed on the HTML markup was to add
class="tab" to the list items that would be emphasized:
1 2 3 4 5