problem CSS Horizontal nav w/image swap not working

  • (2 Pages)
  • +
  • 1
  • 2

17 Replies - 1965 Views - Last Post: 30 November 2012 - 04:56 PM

#1 clint6998  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 29-November 12

problem CSS Horizontal nav w/image swap not working

Posted 29 November 2012 - 08:23 AM

Can't figure out what I did wrong...I am trying to have a horizontal nav bar with background image swap (text for link is build into the image) and I cannot get the image to swap or the link to be active. Can someone help me figure out what I did wrong?

Here is a link to the test page:
http://tacticaloffen...om/indexNew.php

Here is my HTML:

      <div id="headerTopNav">
      	<ul id="topNav">
        	<li id="home"><a href="index.php" class="home">Home</a></li>
          <li id="spacer"></li>
          <li id="about"><a href="about.php" class="about">About</a></li>
          <li id="spacer"></li>
          <li id="products"><a href="shop/index.php" class="products">Products</a></li>
          <li id="spacer"></li>
          <li id="wpNews"><a href="news/index.php" class="wpNews">News</a></li>
          <li id="spacer"></li>
          <li id="contact"><a href="contact.php" class="contact">Contact</a></li>
        </ul>
      </div>



Here is the CSS for the nav only:

#headerTopNav {
	position:absolute;
	top:11px;
	left:520px;
	height:30px;
}
#topNav {
	height:30px;
	padding:0;
	margin:0;
	display:inline;
}
#topNav li {
	list-style:none;
	float:left;
}
ul#topNav #spacer {
	background-image:url(../img/nav/navSpacer.png);
	background-repeat:no-repeat;
	width:1px;
	height:30px;
}

#topNav a {
	background:url(../img/nav/nav_map.png);
	display:inline-block;
	height:30px;
	text-indent:-9000px;
}
#topNav a.home,
#topNav a.about,
#topNav a.products,
#topNav a.wpNews,
#topNav a.contact {
	height:30px;
}
#topNav li#home, #topNav a.home {
	width:77px;
}
#topNav li#about, #topNav a.about {
	width:102px;
}
#topNav li#products, #topNav a.products {
	width:99px;
}
#topNav li#wpNews, #topNav a.wpNews {
	width:72px;
}
#topNav li#contact, #topNav a.contact {
	width:92px;
}

#topNav a.home:link, #topNav a.home:visited {
	background:url(../img/nav/nav_map.png) no-repeat -246px 0px;
}
#topNav a.home:hover {
	background:url(../img/nav/nav_map.png) no-repeat -246px -30px;
}
#topNav a.about:link, #topNav a.about:visited {
	background:url(../img/nav/nav_map.png) no-repeat 0px 0px;
}
#topNav a.about:hover {
	background:url(../img/nav/nav_map.png) no-repeat 0px -30px;
}
#topNav a.products:link, #topNav a.products:visited {
	background:url(../img/nav/nav_map.png) no-repeat -570px 0px;
}
#topNav a.products:hover {
	background:url(../img/nav/nav_map.png) no-repeat -570px -30px;
}
#topNav a.wpNews:link, #topNav a.wpNews:visited {
	background:url(../img/nav/nav_map.png) no-repeat -447px -60px;
}
#topNav a.wpNews:hover {
	background:url(../img/nav/nav_map.png) no-repeat -447px -90px;
}
#topNav a.contact:link, #topNav a.contact:visited {
	background:url(../img/nav/nav_map.png) no-repeat -140px -60px;
}
#topNav a.contact:hover {
	background:url(../img/nav/nav_map.png) no-repeat -140px -90px;
}



Any help would be greatly appreciated!!! Thank you

Clint

Is This A Good Question/Topic? 0
  • +

Replies To: problem CSS Horizontal nav w/image swap not working

#2 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 442
  • Joined: 28-July 09

Re: problem CSS Horizontal nav w/image swap not working

Posted 29 November 2012 - 08:27 AM

Hello there,

Don't reapply the background on the hover class, just change the position of the background. So, for #topNav a you will want..
#topNav a {
	background: url(../img/nav/nav_map.png) no-repeat;
	display:inline-block;
	height:30px;
	text-indent:-9000px;
}

.. and for your hover classes you will want ..
background-position: -246px 0px;


EDIT: Removed a slight derp.

This post has been edited by Kruithne: 29 November 2012 - 08:28 AM

Was This Post Helpful? 0
  • +
  • -

#3 clint6998  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 29-November 12

Re: problem CSS Horizontal nav w/image swap not working

Posted 29 November 2012 - 08:46 AM

Thanks for the reply Kruithne.

Here is my new CSS:

#headerTopNav {
	position:absolute;
	top:11px;
	left:520px;
	height:30px;
}
#topNav {
	height:30px;
	padding:0;
	margin:0;
	display:inline;
}
#topNav li {
	list-style:none;
	float:left;
}
ul#topNav #spacer {
	background-image:url(../img/nav/navSpacer.png);
	background-repeat:no-repeat;
	width:1px;
	height:30px;
}

#topNav a {
	background:url(../img/nav/nav_map.png);
	display:inline-block;
	height:30px;
	text-indent:-9000px;
}
#topNav a.home,
#topNav a.about,
#topNav a.products,
#topNav a.wpNews,
#topNav a.contact {
	height:30px;
}
#topNav li#home, #topNav a.home {
	width:77px;
}
#topNav li#about, #topNav a.about {
	width:102px;
}
#topNav li#products, #topNav a.products {
	width:99px;
}
#topNav li#wpNews, #topNav a.wpNews {
	width:72px;
}
#topNav li#contact, #topNav a.contact {
	width:92px;
}

#topNav a.home:link, #topNav a.home:visited {
	background-position:-246px 0px;
}
#topNav a.home:hover {
	background-position:-246px -30px;
}
#topNav a.about:link, #topNav a.about:visited {
	background-position:0px 0px;
}
#topNav a.about:hover {
	background-position:0px -30px;
}
#topNav a.products:link, #topNav a.products:visited {
	background-position:-570px 0px;
}
#topNav a.products:hover {
	background-position:-570px -30px;
}
#topNav a.wpNews:link, #topNav a.wpNews:visited {
	background-position:-447px -60px;
}
#topNav a.wpNews:hover {
	background-position:-447px -90px;
}
#topNav a.contact:link, #topNav a.contact:visited {
	background-position:-140px -60px;
}
#topNav a.contact:hover {
	background-position:-140px -90px;
}



Image swap and link still don't work.

Any other mistakes that you can see?

Thanks!

Clint
Was This Post Helpful? 0
  • +
  • -

#4 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 442
  • Joined: 28-July 09

Re: problem CSS Horizontal nav w/image swap not working

Posted 29 November 2012 - 08:49 AM

Hello again,

First of all, why are all the hover positions different for each a? Next, I would apply the backgrounds to the li elements rather than the anchors.
Was This Post Helpful? 0
  • +
  • -

#5 clint6998  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 29-November 12

Re: problem CSS Horizontal nav w/image swap not working

Posted 29 November 2012 - 09:00 AM

The background images are all different positions because they are all on one image.

New CSS (now it just looks all messed up unless I didnt follow what you were saying correctly. if I didnt, can you please give me a an example):

#headerTopNav {
	position:absolute;
	top:11px;
	left:520px;
	height:30px;
}
#topNav {
	height:30px;
	padding:0;
	margin:0;
	display:inline;
}
#topNav li {
	[b]background:url(../img/nav/nav_map.png);[/b]
	list-style:none;
	float:left;
}
ul#topNav #spacer {
	background-image:url(../img/nav/navSpacer.png);
	background-repeat:no-repeat;
	width:1px;
	height:30px;
}

[b]#topNav a {
	display:inline-block;
	height:30px;
	text-indent:-9000px;
}[/b]
#topNav li#home, #topNav a.home,
#topNav li#about, #topNav a.about,
#topNav li#products, #topNav a.products,
#topNav li#wpNews, #topNav a.wpNews,
#topNav li#contact, #topNav a.contact {
	height:30px;
}
#topNav li#home, #topNav a.home {
	width:77px;
}
#topNav li#about, #topNav a.about {
	width:102px;
}
#topNav li#products, #topNav a.products {
	width:99px;
}
#topNav li#wpNews, #topNav a.wpNews {
	width:72px;
}
#topNav li#contact, #topNav a.contact {
	width:92px;
}

[b]#topNav li#home:link[/b] {
	background-position:-246px 0px;
}
[b]#topNav li#home:hover[/b] {
	background-position:-246px -30px;
}
[b]#topNav li#about:link[/b] {
	background-position:0px 0px;
}
[b]#topNav li#about:hover[/b] {
	background-position:0px -30px;
}
[b]#topNav li#products:link[/b] {
	background-position:-570px 0px;
}
[b]#topNav li#products:hover[/b] {
	background-position:-570px -30px;
}
[b]#topNav li#wpNews:link[/b] {
	background-position:-447px -60px;
}
[b]#topNav li#wpNews:hover[/b] {
	background-position:-447px -90px;
}
[b]#topNav li#contact:link[/b] {
	background-position:-140px -60px;
}
[b]#topNav li#contact:hover[/b] {
	background-position:-140px -90px;
}



http://tacticaloffens.com/indexNew.php

What are your thoughts?
Clint

disregard the :
[b][/b]
in the post. I was hoping that it would highlight in bold my changes.
Was This Post Helpful? 0
  • +
  • -

#6 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 442
  • Joined: 28-July 09

Re: problem CSS Horizontal nav w/image swap not working

Posted 29 November 2012 - 09:02 AM

Hello again,

Your CSS is starting to look a lot cleaner and easier to follow now. Another quick thing I noticed is the way you access li elements inside your CSS, there is no need to put that they are a li when going by ID, there should be no other type of element there.

#topNav li#contact could be #topNav #contact

In regards to fixing things here, the link for your live demo does not appear to work, at least not for me.

PS: BB code does not work inside code tags. =)

This post has been edited by Kruithne: 29 November 2012 - 09:03 AM

Was This Post Helpful? 0
  • +
  • -

#7 clint6998  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 29-November 12

Re: problem CSS Horizontal nav w/image swap not working

Posted 29 November 2012 - 09:16 AM

I removed all li's that have an ID to them. makes sense...duh...id's are unique.

#headerTopNav {
	position:absolute;
	top:11px;
	left:520px;
	height:30px;
}
#topNav {
	height:30px;
	padding:0;
	margin:0;
	display:inline;
}
#topNav li {
	background:url(../img/nav/nav_map.png);
	list-style:none;
	float:left;
}
ul#topNav #spacer {
	background-image:url(../img/nav/navSpacer.png);
	background-repeat:no-repeat;
	width:1px;
	height:30px;
}

#topNav a {
	display:inline-block;
	height:30px;
	text-indent:-9000px;
}
#topNav #home, #topNav a.home,
#topNav #about, #topNav a.about,
#topNav #products, #topNav a.products,
#topNav #wpNews, #topNav a.wpNews,
#topNav #contact, #topNav a.contact {
	height:30px;
}
#topNav #home, #topNav a.home {
	width:77px;
}
#topNav #about, #topNav a.about {
	width:102px;
}
#topNav #products, #topNav a.products {
	width:99px;
}
#topNav #wpNews, #topNav a.wpNews {
	width:72px;
}
#topNav #contact, #topNav a.contact {
	width:92px;
}

#topNav #home:link {
	background-position:-246px 0px;
}
#topNav #home:hover {
	background-position:-246px -30px;
}
#topNav #about:link {
	background-position:0px 0px;
}
#topNav #about:hover {
	background-position:0px -30px;
}
#topNav #products:link {
	background-position:-570px 0px;
}
#topNav #products:hover {
	background-position:-570px -30px;
}
#topNav #wpNews:link {
	background-position:-447px -60px;
}
#topNav #wpNews:hover {
	background-position:-447px -90px;
}
#topNav #contact:link {
	background-position:-140px -60px;
}
#topNav #contact:hover {
	background-position:-140px -90px;
}



And yes, the links dont work. They should, but they dont...I dont even get the mouse over effect where my mouse changes to a finger. not sure what they deal is, but that is why I am talking to you :).

Why are my images not lining up now corrrectly? This happened when I moved the background images to the li tags and took them away from the anchor tags.

Clint
Was This Post Helpful? 0
  • +
  • -

#8 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 442
  • Joined: 28-July 09

Re: problem CSS Horizontal nav w/image swap not working

Posted 29 November 2012 - 09:17 AM

Hello,

I was referring to the link that was on your post to your website, not the ones in your code. If you could provide a working link it would save me some time in seeing where the issue(s) lie. =)
Was This Post Helpful? 0
  • +
  • -

#9 clint6998  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 29-November 12

Re: problem CSS Horizontal nav w/image swap not working

Posted 29 November 2012 - 09:28 AM

http://tacticaloffen...om/indexNew.php

Also, updated the css to:

#headerTopNav {
	position:absolute;
	top:11px;
	left:520px;
	height:30px;
}
#topNav {
	height:30px;
	padding:0;
	margin:0;
	display:inline;
}
#topNav li {
	list-style:none;
	float:left;
}
ul#topNav #spacer {
	background:url(../img/nav/navSpacer.png) no-repeat;
	background-repeat:no-repeat;
	width:1px;
	height:30px;
}

#topNav a {
	display:inline-block;
	height:30px;
	text-indent:-9000px;
}
#topNav #home, #topNav a.home,
#topNav #about, #topNav a.about,
#topNav #products, #topNav a.products,
#topNav #wpNews, #topNav a.wpNews,
#topNav #contact, #topNav a.contact {
	height:30px;
}
#topNav #home, #topNav a.home {
	width:77px;
}
#topNav #about, #topNav a.about {
	width:102px;
}
#topNav #products, #topNav a.products {
	width:99px;
}
#topNav #wpNews, #topNav a.wpNews {
	width:72px;
}
#topNav #contact, #topNav a.contact {
	width:92px;
}

#topNav #home {	
	background:url(../img/nav/nav_map.png) no-repeat -246px 0px;
}
#topNav #home:hover {
	background:url(../img/nav/nav_map.png) no-repeat -246px -30px;
}
#topNav #about {
	background:url(../img/nav/nav_map.png) no-repeat 0px 0px;
}
#topNav #about:hover {
	background:url(../img/nav/nav_map.png) no-repeat -246px -30px;
}
#topNav #products {
	background:url(../img/nav/nav_map.png) no-repeat -570px 0px;
}
#topNav #products:hover {
	background:url(../img/nav/nav_map.png) no-repeat -246px -30px;
}
#topNav #wpNews {
	background:url(../img/nav/nav_map.png) no-repeat -447px -60px;
}
#topNav #wpNews:hover {
	background:url(../img/nav/nav_map.png) no-repeat -246px -90px;
}
#topNav #contact {
	background:url(../img/nav/nav_map.png) no-repeat -140px -60px;
}
#topNav #contact:hover {
	background:url(../img/nav/nav_map.png) no-repeat -246px -90px;
}



background images align as they should but not hover effect and not working links

Thanks,

Clint
Was This Post Helpful? 0
  • +
  • -

#10 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 442
  • Joined: 28-July 09

Re: problem CSS Horizontal nav w/image swap not working

Posted 29 November 2012 - 09:35 AM

Well, that linked worked, although I am unsure where those elements actually are. The navigation at the top appears to be a solid image rather than a different one per navigation item and in the code, the individual elements appear to be commented out. Is this correct or have I gone slightly derpy?
Was This Post Helpful? 0
  • +
  • -

#11 clint6998  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 29-November 12

Re: problem CSS Horizontal nav w/image swap not working

Posted 29 November 2012 - 09:47 AM

The commented out section is for a different nav that will go underneath the current one, once it get it working. I figured I would work on one at a time. Look at the div above it with the id of headerTopNav. ALso, the nave does look like one image because it is a UL floating left with no margins or padding, but they are separate elements.

Hope this helps.
Was This Post Helpful? 0
  • +
  • -

#12 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 442
  • Joined: 28-July 09

Re: problem CSS Horizontal nav w/image swap not working

Posted 29 November 2012 - 10:15 AM

Ah, yes. I saw the commented code but not the collapsed UL in my debugger, I was having a dense moment, I do apologize.

You're still filling up the hover scopes with more than is needed, they don't need to know the URL of the image nor the repeat, that will all carry over from the non-hover, just change the position of the background.

Change background:url(../img/nav/nav_map.png) no-repeat -246px -30px; to background-position: -246px -30px;
Was This Post Helpful? 0
  • +
  • -

#13 clint6998  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 29-November 12

Re: problem CSS Horizontal nav w/image swap not working

Posted 29 November 2012 - 10:27 AM

fixed, but the problem is, nothing still works.
Was This Post Helpful? 0
  • +
  • -

#14 clint6998  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 29-November 12

Re: problem CSS Horizontal nav w/image swap not working

Posted 29 November 2012 - 02:35 PM

Resolved. My logo was in the way from making everything work. All I had to do was rearranging my logo and put a with on the dev and that fix the problem.
Was This Post Helpful? 0
  • +
  • -

#15 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 442
  • Joined: 28-July 09

Re: problem CSS Horizontal nav w/image swap not working

Posted 30 November 2012 - 02:13 AM

Hello,

Sorry it took a while to sort out, I had to stop replying due to a large server failure at my employment which has kept us busy here, at least you have it fixed now!

PS: You don't need to use 0px, just 0 will suffice.
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2