HTML:
<body onLoad="MM_preloadImages('images/facebook2.png','images/twitter2.png','images/about2.png' )">
<div class="gridContainer clearfix">
<header id="top" class="fluid"><img src="images/rgplogo.png" alt=""/></header>
<nav id="mainnav" class="fluid">
<div id="menusystem" class="fluid"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('facebook','','images/facebook2.png',1)"><img id="facebook" src="images/facebook1.png" alt=""></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('twitter','','images/twitter2.png',1)"><img id="twitter" src="images/twitter1.png" alt=""></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('about','','images/about2.png',1)"><img id="about" src="images/about1.png" alt=""></a></div>
</nav>
</div>
</body>
CSS:
.fluid {
clear: both;
margin-left: 0;
width: 100%;
float: left;
display: block;
}
.fluidList {
list-style:none;
list-style-image:none;
margin:0;
padding:0;
}
/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 95%;
padding-left: 2.5%;
padding-right: 2.5%;
clear: none;
float: none;
}
#top {
}
#top img {
width: 50%;
min-width: 130px;
max-width: 275px;
display: block;
margin-left: auto;
margin-right: auto;
}
#mainnav {
}
#menusystem {
width: 435px;
height: 122px;
display: block;
margin-left: auto;
margin-right: auto;
}
.zeroMargin_mobile {
margin-left: 0;
}
.hide_mobile {
display: none;
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
width: 90.675%;
padding-left: 1.1625%;
padding-right: 1.1625%;
clear: none;
float: none;
margin-left: auto;
}
#top {
}
#mainnav {
}
#menusystem {
}
.hide_tablet {
display: none;
}
.zeroMargin_tablet {
margin-left: 0;
}
}
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
width: 88.5%;
max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
clear: none;
float: none;
margin-left: auto;
}
#top {
}
#mainnav {
}
#menusystem {
}
.zeroMargin_desktop {
margin-left: 0;
}
.hide_desktop {
display: none;
}
}