Ben Sayers Golf
A couple of months ago I was given the task of re-writing the html for a site we built about a year ago.
The original site was built under quite a restrictive deadline so it was nice to be given the chance to re-visit the site and make some improvements to it.
The previous navigation was constructed using static images which, from both a semantic and accessibility point of view is not a good idea. Our aim was to replace these images with text using CSS. Another benefit of this change is that we were able to change over to a dynamic navigation rather than the static imagery, meaning that when content is edited through the CMS, changes will be reflected immediately on the web site without any designer intervention.
The particular piece of the mark-up I’d like to talk about concerns the rounded tabs at the top right hand side. These have been built to be flexible in both height and width. Here’s the HTML:
<ul id="section_nav">
<li><a href="/content/m8-tour.htm" ><span>M8 TOUR</span></a></li>
<li><a href="/content/utility-m8-series.htm" class="selected" ><span>M8 SERIES</span></a></li>
<li><a href="/content/utility-ladies-m8-series.htm" ><span>LADIES M8 SERIES</span></a></li>
<li><a href="/content/m1-utility.htm" ><span>M1 UTILITY</span></a></li>
<li><a href="/content/m1-chipper.htm" ><span>M1 CHIPPER</span></a></li>
</ul>
This consists of an unordered list element containing a list item for each club within the particular section of the site. It is styled as follows:
#section_nav {
margin: 0 ;
padding: 0 ;
list-style-type: 0;
background-color: #B2B592 ;
height: 21px ;
}
We clear the margin, padding and style type to ensure that ours tabs will not be adversely effected by the default CSS settings applied to the ul element by most browsers. Next we need to code the list items, we do this as follows:
#section_nav li {
display: inline ;
}
#section_nav li a {
color: #fff ;
display: block ;
float: left ;
margin: 0 3px 0 0 ;
background: #787E1C url(/images/section_nav_off.gif) no-repeat 0 0 ;
height: 21px ;
}
#section_nav li a span {
background: transparent url(/images/section_nav_off_right.gif) no-repeat top right ;
padding: 4px 13px 1px 13px ;
display: block ;
}
First off, we change the display attribute of the list items to be ‘inline’ rather than the default setting ‘block’. This allows the items to sit inline next to each other nicely. Next we need to style the anchor within the list item. We apply the opposite setting to the display attribute, thus allowing the anchor to dictate the size of the list item. If the anchor wasn’t floated it’s width would automatically stretch to fill the width of the enclosing element (in this case the ul), so we float the anchor so that it’s width is determined by the text within it. Next, add some padding, and don’t forget the background-image which will provide the left hand side rounded corner of the tab.
In order to provide the right hand rounded corder, and also give the tabs their inherit stretchiness we have added a span inside each list item. The background-image added to it with a transparent background… this allows the color set on the li to shine through, as well as the left hand corner. In this case we choose to fix the height in order not to break over elements on the page but normally I would advise you to leave the heights set to auto.
The :hover state of each tab is set as follows:
#section_nav li a:hover {
color: #787E1C ;
background: #fff url(/images/section_nav_on.gif) no-repeat 0 0 ;
}
#section_nav li a:hover span {
background: transparent url(/images/section_nav_on_right.gif) no-repeat top right ;
}
Not much to see here, the most interesting bit is the way we have been able to alter the span style when an element that encloses it is hovered over rather than the span element itself. The principle reason for this is that IE 6 will not recognise :hover on any element other than the anchor tag. This is the most cross-browser compatible way of achieving the tag layout without compromising mark-up. A way to further simplify this method would be to combine the images for the tabs into single files and then change the background position to animate the tabs upon rollover.
Why not take a trip to bensayersgolf.com and try them out!