I am having trouble figuring out what I am doing wrong in my code. What I am wanting to do is call up one of three images, depending on whether the specified page is active or inactive, or the link is being hovered over. I am only getting the anchor image next to my text, instead of the images that I have linked in. Below is a copy of the code for both the html and css. Attached are examples of the images I am trying to link to the navigation tabs.
CSS:
HTMLCode:#mainnav { height: 80px; width: 80%; margin: auto; background: #FFFFFF; } #mainnav h1 { font-family: Britannic Bold; font-size: 20px; } a#nav_league { background-image:url(images/league.gif) no-repeat top right; margin: 0px; display: block; width: 80px; height: 0px !important; height /**/:33px; overflow: visible; } a#nav_league:hover { background-position: 0 -36px; text-decoration: none; margin: 0px; display: block; width: 80px; height: 0px !important; height /**/:33px; overflow: hidden; } a#nav_league.current { background-position: 0 -72px; margin: 0px; display: block; width: 80px; height: 0px !important; height /**/:33px; overflow: hidden; }
HTML Code:<div id="mainnav"> <h1><a id="mainlogo" href="/">The Urban League</a></h1> <a id="nav_league" href="/page/" class="current">The League</a> <a id="nav_programs" href="/page/">Programs</a> <a id="nav_events" href="/page/">Events</a> <a id="nav_jobs" href="/page/">Jobs</a> <a id="nav_resources" href="/page/">Resources</a> </div>


Reply With Quote

Bookmarks