Webmaster Forum

Go Back   Webmaster Forum > Web Development > Coding Forum

Coding Forum Problems with your code? Discuss coding issues, including JavaScript, PHP & MySQL, HTML & CSS, Flash & ActionScript, and more.


 
 
LinkBack Thread Tools Display Modes
Prev Previous Post   Next Post Next
Old 09-23-2009, 03:13 PM   #1 (permalink)
Junior Member
 
Join Date: 09-23-09
Posts: 1
iTrader: 0 / 0%
Latest Blog:
None

screntropy is liked by many
Angry Sprites Issue

Hello, All!

I am having an issue with my navigation bar. I have created it using
the sprite technique (I am a newbie, can you tell?) and everything
seemed to be working perfectly until I played around with the order of
some of my surrounding divs (In order to get the perfect positioning).
Now, the up image shows up, but never goes to the hover state.

Where am I going wrong?

XHTML Code:

HTML Code:
<div id="logo"> <div id="header"><img src="images/Header/cliffs_header.jpg" width="800" height="90" /> <div id="nav"> <ul id="navigation"> <li id="nav_services"><a href="services.html">Services</a></li> <li id="nav_methods"><a href="methods.html">Methods</a></li> <li id="nav_experience"><a href="Experience.html">Experience</a></li> <li id="nav_personnel"><a href="personnel.html">Personnel</a></li> <li id="nav_media"><a href="media.html">Media</a></li> <li id="nav_about"><a href="about.html">About Us</a></li> <li id="nav_contact"><a href="contact.html">Contact Us</a></li> </ul> </div> </div> </div>
CSS Code:
Code:
div#logo { background:url(../images/Header/header-bg.png) repeat-x; margin-top:0; margin-right:auto; margin-bottom: 0; margin-left: auto; width:100%; text-align:center; position:relative; height:126px; border-bottom:2px groove #f4f4f4; z-index:-1; } div#header { width:100%; margin-top:0; margin-bottom:0; position:absolute; width:801px; top:0; left:50%; margin-left:-400px; height: 89px; } div#nav { width:100%; height:36px; text-align:center; z-index:1; } #navigation { width: 800px; height: 36px; position: relative; background:url(../images/Navigation/nav_main.png); margin: 0; padding: 0; top:-1px; left:50%; margin-left:-400px; z-index:100;[/INDENT]} #navigation li { float:left } #navigation li a { position: absolute; top: 0; margin: 0; padding: 0; display: block; height: 36px; background: url(../images/Navigation/nav_main.png) no-repeat; text-indent: -9999px; z-index: 1; } /*up state*/ li#nav_services a { left: 0px; width: 114px; background-position: 0 0; } li#nav_methods a { left: 114px; width: 114px; background-position: -114px 0; } li#nav_experience a { left: 228px; width: 114px; background-position: -228px 0; } li#nav_personnel a { left: 342px; width: 114px; background-position: -342px 0; } li#nav_media a { left: 456px; width: 114px; background-position: -456px 0; } li#nav_about a { left: 570px; width: 114px; background-position: -570px 0; } li#nav_contact a { left: 684px; width: 114px; background-position: -684px 0; } /*hover state*/ li#nav_services a:hover { background-position: 0 -36px; } li#nav_methods a:hover { background-position: -114px -36px; } li#nav_experience a:hover { background-position: -228px -36px; } li#nav_personnel a:hover { background-position: -342px -36px; } li#nav_media a:hover { background-position: -456px -36px; } li#nav_about a:hover { background-position: -570px -36px; } li#nav_contact a:hover { background-position: -684px -36px; } /*active state*/ li#nav_services a:active { background-position: 0 -72px; } li#nav_methods a:active { background-position: -114px -72px; } li#nav_experience a:active { background-position: -228px -72px; } li#nav_personnel a:active { background-position: -342px -72px; } li#nav_media a:active { background-position: -456px -72px; } li#nav_about a:active { background-position: -570px -72px; } li#nav_about a:active { background-position: -684px -72px; } /*current state*/ #body_services li#nav_services a { background-position: 0 -108px; } #body_methods li#nav_methods a { background-position: -114px -108px; } #body_experience li#nav_experience a { background-position: -228px -108px; } #body_personnel li#nav_personnel a { background-position: -342px -108px; } #body_media li#nav_media a { background-position: -456px -108px; } #body_about li#nav_about a { background-position: -570px -108px; } #body_contact li#nav_contact a { background-position: -684px -108px; }
Can you guys see where I am going wrong? I am totally at a loss!

Any help would be much appreciated!
screntropy is offline  
Add Post to del.icio.us
Reply With Quote
Go Back   Webmaster Forum > Web Development > Coding Forum

 

Tags
css, navigation, sprites


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On


Similar Threads
Thread Thread Starter Forum Replies Last Post
php and IE issue flint Coding Forum 5 03-06-2009 03:01 AM
www and non www issue webexplore Google Forum 9 09-15-2007 05:59 PM
WOMD - Issue or Non-issue John Scott Controversial Social Issues 1 08-02-2007 09:30 AM
CSS Issue Sketch Coding Forum 7 02-16-2007 06:13 PM


Sponsor Links
Get exposure! Contextual Links V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 10:57 AM.
© Copyright 2008 V7 Inc
Powered by vBulletin
Copyright © 2000-2009 Jelsoft Enterprises Limited.


Search Engine Optimization by vBSEO 3.3.0 ©2009, Crawlability, Inc.