Homeless World Cup
The first site I’d like to talk about was built for The Homeless World Cup, a charity that organises an annual football tournament for homeless people across the world. It’s a great cause and it’s really nice to contribute to it through work.
My role on this project is two-fold, I built the html templates that we use in combination with the Plum CMS, Matchbox, and I maintain the site, liaising with the client and making interface updates when necessary.
In it’s first version the site was primarily an information resource for the organisation, but over the last few months the sites functionality has increased tremendously. We added an e-commerce area which allows users to purchase T-Shirts and various other branded items quickly and easily. Then last week, we added a social networking area which I think is really something special. By subscribing to the Fan Club you can publish your own blog, complete with a photo upload facility. It’s really sweet trust me!
With each site that I profile on woodysabran.com I want to highlight a particular piece of the mark-up that I am proud of, and in the process perhaps teach someone else a few tricks of the trade!
With The Homeless World Cup I’d like to take a look at the navigation bar, #navbar, which you can see at the top of the screen.
Here is the XHTML:
<ul id="navbar">
<li><a href=”/content/home”>Home</a></li>
<li><a href=”/content/tournament”>Tournament</a></li>
<li><a href=”/content/get-involved”>Get involved</a></li>
<li><a href=”/content/gallery”>Gallery</a></li>
<li><a href=”/content/teams”>Teams</a></li>
<li><a href=”/content/players”>Players</a></li>
<li><a href=”/content/fans-5″>Fans</a></li>
<li><a href=”/store”>shop</a></li>
<li><a href=”/content/press”>Press</a></li>
<li><a href=”/content/organisation”>Organisation</a></li>
<li><a href=”/content/contact-49″>Contact</a></li>
</ul>
This consists of an unordered list element containing a list item for each section of the site. It is styled as follows:
#navbar {
list-style-type: none ;
margin: 0 ;
padding: 0 ;
height: 25px ;
background-color: #E50D2E ;
font-family: Arial, Helvetica, sans-serif ;
text-transform: lowercase ;
}
By setting the list-style-type to none we remove the bullet points that appear by default, and setting the padding to 0 will remove any the normal indenting that would take place. For good measure the margin is also set to 0, the reason for this is because Internet Explorer 6 uses the margin rather than padding to indent list items.
The list items are displayed inline as follows:
#navbar li {
display: inline ;
}
The anchors within these list items are set to display: block and float: left as displayed below:
#navbar a {
color: #fff ;
text-decoration: none ;
padding: 4px 9px 5px 9px ;
height: 16px ;
display: block ;
float: left ;
border-left: 1px solid #F64A65 ;
border-right: 1px solid #B70823 ;
background-color: #E50D2E ;
font-size: 1.08em ;
font-weight: bold ;
}
The display: block is used to change the behaviour of the anchor tags so that they become, in effect, rectangular hot spots which can be resized and styled very easily. We have to float the anchors to the left, this ensures that their width will be determined by the text contained within them rather than stretching to span the complete width of the element that contains them (as a block level element normally would - try it and you’ll see!).
The end result is an efficient, standards compliant navigation element which would only be possible otherwise with the use of those nasty tables.