Comments on: Simple Navigation with CSS Image Replacement

By: ADGA Intro to Web Design » Blog Archive » More questions from class

ADGA Intro to Web Design » Blog Archive » More questions from class — Sat, 31 Oct 2009 15:13:00 +0000

[...] Simple Navigation with CSS Image Replacement [...]

By: Huw Rowlands

Huw Rowlands — Mon, 17 Aug 2009 20:26:23 +0000

This tut has helped over and over again. No other one helps just as much as this one does. Thanks!

By: Bill Keller

Bill Keller — Mon, 27 Jul 2009 11:26:00 +0000

Mark - That sure is possible, but it's an entirely different tutorial altogether. Have a look at A list Apart's sliding doors of CSS.

By: Mark D. MacLachlan

Mark D. MacLachlan — Sun, 26 Jul 2009 03:10:19 +0000

Awesome tutorial, thank you. Hoping you can help me figure out something with this. What I want to do is add a left and right image where my text will go in the middle. This will let me have my image dynamically appear to stretch.

My WordPress blog does this somehow and I’ve been trying to duplicate the affect with HTML and CSS. Any help would be greatly appreciated.

By: Daniel

Daniel — Wed, 15 Jul 2009 07:36:54 +0000

This tutorial is pure gold. Keep up the good work!

By: Bill Keller

Bill Keller — Thu, 09 Jul 2009 10:26:04 +0000

Zaxx - Use a class name on your UL so that other UL's aren't affected. Fore example: ul.navigation {}

By: Zaxx

Zaxx — Thu, 09 Jul 2009 08:21:31 +0000

[quote]Update:

To get your hover state to stay in the hover state, to mark the users currently selected page for example, I like to use an ID or class on the body tag.

For example, on a contact page add:

And in your CSS hover state, add a line for body#contact:

ul li a:hover,
body#contact ul li a {
background-position: 0 -66px;
}

[/quote]

This way, if there’s any other unordered list in the page, it will be affected too. Any other solution?

By: kaye

kaye — Thu, 02 Jul 2009 08:02:26 +0000

do you know that i love you? i am much closer to opening our e-store because of this.

By: Bill Keller

Bill Keller — Fri, 22 May 2009 10:56:20 +0000

Anna – Are you adding a unique ID to the body of each HTML page? And then adding the appropriate CSS?

For example:
body#navigation2 ul li#navigation2 a {}

By: anna

anna — Tue, 19 May 2009 15:27:10 +0000

Hey there.
I’m having the same issue as ian. I have 4 pages and when I use the IDs for each to keep the hover state on the current page it places it at the first link. Another words, I can’t seem to change the location of the second, third, or fourth link. They all show up on top of the first link. Solution?

Thanks!