Running into a bit of a snag with my sprite menus for my 1-pg site. I (will hopefully) have 5 separate menus in a vertical sidebar (cascading vertically). The top menu is working fine with rollovers showing up.
However, the second menu down is not displaying the sprite image at all. Is there some sort of 'clear' i need to put between the two menus? As it is, I have them in <ul>'s inside separate divs.
Am I way off here?
(link:
http://www.emkspace.com/ )
(some the CSS)
#sidebar1 {
float: right; /*
width: 229px;
margin-right: auto;
background-image: url(images/bkgd_side.jpg);
background-repeat: repeat-y;
background-position: left;
height: 3800px;
}
/* Menu 1 */
ul#c1menu{margin:0; padding:0; list-style:none; clear:both;}
#c1menu li{overflow:hidden; text-indent:-9999px; display:inline; float:left; margin-right:10px;}
#c1menu li a{background:url(images/card1buttons.png) no-repeat; width:100%; height:100%; display:block;}
/* c1sitedesign Button */
#c1menu li.c1sitedesign{width:135px; height:26px;}
#c1menu li.c1sitedesign a{background-position:-5px -2px;}
#c1menu li.c1sitedesign a:hover, a.selected{background-position:-155px -2px;}
/* c1printlogo */
#c1menu li.c1printlogo{width:135px; height:26px;}
#c1menu li.c1printlogo a{background-position:-5px -30px;}
#c1menu li.c1printlogo a:hover{background-position:-155px -30px;}
/* c1illustration */
#c1menu li.c1illustration{width:135px; height:26px;}
#c1menu li.c1illustration a{background-position:-5px -58px;}
#c1menu li.c1illustration a:hover{background-position:-155px -58px;}
/* c1contactme Button */
#c1menu li.c1contactme{width:135px; height:26px;}
#c1menu li.c1contactme a{background-position:0px -89px;}
#c1menu li.c1contactme a:hover{background-position:-150px -89px;}
/* Menu 2 */
ul#c2menu{margin:0; padding:0; list-style:none; clear:both;}
#c2menu li{overflow:hidden; text-indent:-9999px; display:inline; float:left; margin-right:10px;}
#c2menu li a{background:url(images/card2buttons.png) no-repeat; width:100%; height:100%; display:block;}
/* c2sitedesign Button */
#c2menu li.c2return{width:125px; height:25px;}
#c1menu li.c2return a{background-position:0px 0px;}
#c1menu li.c2return a:hover, a.selected{background-position:-125px 0px;}
/* c1printlogo */
#c2menu li.c2printlogo{width:125px; height:25px;}
#c1menu li.c2printlogo a{background-position:0px -25px;}
#c1menu li.c2printlogo a:hover{background-position:-125px -25px;}
/* c1illustration */
#c2menu li.c2illustration{width:125px; height:25px;}
#c1menu li.c2illustration a{background-position: 0px -50px;}
#c1menu li.c2illustration a:hover{background-position:-125px -50px;}
/* c1contactme Button */
#c2menu li.c2contactme{width:125px; height:25px;}
#c1menu li.c2contactme a{background-position:0px -75px;}
#c1menu li.c2contactme a:hover{background-position:-125px -75px;}
(the html)
<div class="imgbkg"><img src="http://tycoontalk.freelancer.com/images/card1bkgd.png" width="175" height="360" alt="em.k.space" /></div>
<div class="card1">
<ul id="c1menu">
<li class="c1sitedesign"><a href="#">sitedesign</a></li>
<li class="c1printlogo"><a href="#">printlogo</a></li>
<li class="c1illustration"><a href="#">illustration</a></li>
<li class="c1contactme"><a href="#">contact me</a></li>
</ul>
</div>
<div class="imgbkg2"><img src="http://tycoontalk.freelancer.com/images/cardbkgd.png" width="175" height="360" alt="site design" /></div>
<div class="card2">
<ul id="c2menu">
<li class="c2return"><a href="#">return to top</a></li>
<li class="c2printlogo"><a href="#">printlogo</a></li>
<li class="c2illustration"><a href="#">illustration</a></li>
<li class="c2contactme"><a href="#">contact me</a></li>
</ul>
</div>
<div class="card3"> <img src="http://tycoontalk.freelancer.com/images/card3.png" width="175" height="360" />
<ul id="c3menu">
<li class="c3return"><a href="#">return to top</a></li>
<li class="c3sitedesign"><a href="#">sitedesign</a></li>
<li class="c3illustration"><a href="#">illustration</a></li>
<li class="c3contactme"><a href="#">contact me</a></li>
</ul>
</div>
