Allied Industrial Products and Fuzion IT
Right, first thing's first, lets look at the source.
AIP's original site in tabled formAbout line 52 we start to see the familliar sticking menu's in a table
<table width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="4" align="left" valign="top"><div id="FWTableContainer1909239104">
<table border="0" cellpadding="0" cellspacing="0" width="800">
<!-- fwtable fwsrc="AIP-header2.png" fwbase="AIP-header2.gif" fwstyle="Dreamweaver" fwdocid = "1909239104" fwnested="0" -->
<tr>
<td><img src="images/nav/spacer.gif" width="153" height="1" border="0" alt="" /></td>
<td><img src="images/nav/spacer.gif" width="57" height="1" border="0" alt="" /></td>
<td><img src="images/nav/spacer.gif" width="87" height="1" border="0" alt="" /></td>
<td><img src="images/nav/spacer.gif" width="56" height="1" border="0" alt="" /></td>
<td><img src="images/nav/spacer.gif" width="86" height="1" border="0" alt="" /></td>
<td><img src="images/nav/spacer.gif" width="361" height="1" border="0" alt="" /></td>
<td><img src="images/nav/spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="6"><img name="AIPheader2_r1_c1" src="images/nav/AIP-header2_r1_c1.gif" width="800" height="100" border="0" id="AIPheader2_r1_c1" alt="AIP Ltd - Allied Industrial Products" /<</td>
<td><img src="images/nav/spacer.gif" width="1" height="100" border="0" alt="" /></td>
</tr>
<tr>
<td><img name="AIPheader2_r2_c1" src="images/nav/AIP-header2_r2_c1.gif" width="153" height="29" border="0" id="AIPheader2_r2_c1" alt="Phone AIP Ltd" /></td>
<td><a href="default.aspx"><img name="AIPheader2_r2_c2" src="images/nav/AIP-header2_r2_c2.gif" width="57" height="29" border="0" id="AIPheader2_r2_c2" alt="Home" /></a></td>
<td><a href="javascript:;" onMouseOut="MM_menuStartTimeout(250);" onMouseOver="MM_menuShowMenu('MMMenuContainer0804212652_0', 'MMMenu0804212652_0',0,29,'AIPheader2_r2_c3');"><img name="AIPheader2_r2_c3" src="images/nav/AIP-header2_r2_c3.gif" width="87" height="29" border="0" id="AIPheader2_r2_c3" alt="Industries" /></a></td>
<td><a href="news.aspx"><img name="AIPheader2_r2_c4" src="images/nav/AIP-header2_r2_c4.gif" width="56" height="29" border="0" id="AIPheader2_r2_c4" alt="AIP News" /></a></td>
<td><a href="contact.aspx"><img name="AIPheader2_r2_c5" src="images/nav/AIP-header2_r2_c5.gif" width="86" height="29" border="0" id="AIPheader2_r2_c5" alt="Contact AIP" /></a></td>
<td><img name="AIPheader2_r2_c6" src="images/nav/AIP-header2_r2_c6.gif" width="361" height="29" border="0" id="AIPheader2_r2_c6" alt="AIP Ltd - Allied Industrial Products" /></td>
<td><img src="images/nav/spacer.gif" width="1" height="29" border="0" alt="" /></td>
</tr>
</table>
All the table tags have been removed and are replaced with the ul tags.
HTML:
<img name="AIPheader2_r1_c1" src="default.aspx_files/AIP-header2_r1_c1.gif" id="AIPheader2_r1_c1" alt="AIP Ltd - Allied Industrial Products" />
<ul>
<li><img name="AIPheader2_r2_c1" src="default.aspx_files/AIP-header2_r2_c1.gif" id="AIPheader2_r2_c1" alt="Phone AIP Ltd" /></li>
<li><a href="default.aspx"><img name="AIPheader2_r2_c2" src="default.aspx_files/AIP-header2_r2_c2.gif" id="AIPheader2_r2_c2" alt="Home" /></a></li>
<li><a href="javascript:;" onMouseOut="MM_menuStartTimeout(250);" onMouseOver="MM_menuShowMenu('MMMenuContainer0804212652_0', 'MMMenu0804212652_0',0,29,'AIPheader2_r2_c3');"><img name="AIPheader2_r2_c3" src="default.aspx_files/AIP-header2_r2_c3.gif" id="AIPheader2_r2_c3" alt="Industries" /></a></li>
<li><a href="news.aspx"><img name="AIPheader2_r2_c4" src="default.aspx_files/AIP-header2_r2_c4.gif" id="AIPheader2_r2_c4" alt="AIP News" /></a></li>
<li><a href="contact.aspx"><img name="AIPheader2_r2_c5" src="default.aspx_files/AIP-header2_r2_c5.gif" id="AIPheader2_r2_c5" alt="Contact AIP" /></a></li>
<li><img name="AIPheader2_r2_c6" src="default.aspx_files/AIP-header2_r2_c6.gif" id="AIPheader2_r2_c6" alt="AIP Ltd - Allied Industrial Products" /></li>
</ul>
The bullet points are removed, the list is made inline and is floated to the left. Lastly the border is removed
CSS:
div#masthead ul
{
list-style-type: none;
margin: 0px 0px;
padding: 0px 0px;
}
div#masthead ul li
{
display: inline;
float: left;
}
div#masthead ul li img
{
border: none;
}
Below is the link so far:
Menu changed on AIP with CSS/XHTML
