19 replies [Last post]
FionaE
FionaE's picture
Offline
Regular
New Zealand
Last seen: 7 years 8 weeks ago
New Zealand
Timezone: GMT+12
Joined: 2012-06-16
Posts: 27
Points: 31

Hi all

Ok, my website is almost ready to go, validated and all (yay)! One last issue with it before its ready to go live. I cant seem to get the visited state to work.

My navigation is put together as a list using image sprites I think its called (used images because I want that font). Both the visited state and the hover state are the same. The hover works but I can't seem to get the visited to work. I've tried adding to the hover css, and putting a separate css in above, but it just doesn't want to work. Surely as they are the same, I should be able to group them together. Can someone tell me what the correct code should be?

I've added the html and the css for the states. They have separate classes as the width varies from button to button.

I've tried this...

ul#navigation li a.home:link {
	background: url(Home/navigation.png) no-repeat 0px 0px;
	width: 42px;
}
ul#navigation li a.home:visited:hover {
	background: url(Home/navigation.png) no-repeat 0px -17px;
	width: 42px;
}

I've also tried this...

ul#navigation li a.home:link {
	background: url(Home/navigation.png) no-repeat 0px 0px;
	width: 42px;
}
 
ul#navigation li a.home:visited {
	background: url(Home/navigation.png) no-repeat 0px -17px;
	width: 42px;
}
ul#navigation li a.home:hover {
	background: url(Home/navigation.png) no-repeat 0px -17px;
	width: 42px;
}

Markup

<ul id="navigation">
    	<li><a href="homepage.html" class="home">Home</a></li>
        <li><a href="Gallery.html" class="Gallery">Gallery</a></li>
        <li><a href="sizeprice.html" class="SizePrice">Size and Price</a></li>
        <li><a href="Commissions.html" class="Commissions">About Commissions</a></li>
        <li><a href="Photography.html" class="Photograpy">Photograhy</a></li>
        <li><a href="AboutMe.html" class="AboutMe">About Me</a></li>
        <li><a href="contact.html" class="Contact">Contact</a></li></ul>

This is the full navigation css... I have taken the visited state out here as it wasn't working anyway...

ul#navigation li a.home:link {
	background: url(Home/navigation.png) no-repeat 0px 0px;
	width: 42px;
}
 
ul#navigation li a.home:hover {
	background: url(Home/navigation.png) no-repeat 0px -17px;
	width: 42px;
}
ul#navigation li a.Gallery:link {
	background: url(Home/navigation.png) no-repeat -42px 0px;
	width: 66px;
}
ul#navigation li a.Gallery:hover {
	background: url(Home/navigation.png) no-repeat -42px -17px;
	width: 66px;
}
ul#navigation li a.SizePrice:link {
	background: url(Home/navigation.png) no-repeat -108px 0px;
	width: 117px;
}
ul#navigation li a.SizePrice:hover:link {
	background: url(Home/navigation.png) no-repeat -108px -17px;
	width: 117px;
}
ul#navigation li a.Commissions:link {
	background: url(Home/navigation.png) no-repeat -225px 0px;
	width: 134px;
}
ul#navigation li a.Commissions:hover {
	background: url(Home/navigation.png) no-repeat -225px -17px;
	width: 134px;
}
ul#navigation li a.Photograpy:link {
	background: url(Home/navigation.png) no-repeat -359px 0px;
	width: 127px;
}
ul#navigation li a.Photograpy:hover {
	background: url(Home/navigation.png) no-repeat -359px -17px;
	width: 127px;
}
ul#navigation li a.AboutMe:link {
	background: url(Home/navigation.png) no-repeat -486px 0px;
	width: 76px;
}
ul#navigation li a.AboutMe:hover {
	background: url(Home/navigation.png) no-repeat -486px -17px;
	width: 76px;
}
ul#navigation li a.Contact:link {
	background: url(Home/navigation.png) no-repeat -562px 0px;
	width: 78px;
}
ul#navigation li a.Contact:hover {
	background: url(Home/navigation.png) no-repeat -562px -17px;
	width: 78px;
}

Neither works, and surely one should... I can't really think of what else to do here...any ideas? I've uploaded the image too, in case you need it. navigation.png

Cheers
Fiona

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 days 9 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Hi FionaE, Usually the

Hi FionaE,
Usually the problem with visited is the order they are specified it should be :link :visited :hover :active. You seem to have that correct.

Not sure if this will help fix the issue but it give you something to think about.
You don't need to respecify properties that don't change.
Try not to be over specific, if possible get rid of the #navigation as well.

#navigation .home:link {
	background: url(Home/navigation.png) no-repeat 0 0;
	width: 42px;
}
#navigation .home:visited, 
#navigation .home:hover  {
	background-position: 0 -17px;
}

FionaE
FionaE's picture
Offline
Regular
New Zealand
Last seen: 7 years 8 weeks ago
New Zealand
Timezone: GMT+12
Joined: 2012-06-16
Posts: 27
Points: 31

Thanks Tony!

ok, I stripped it back to this.

.home:link {
	background: url(Home/navigation.png) no-repeat 0px 0px;
	width: 42px;
}
 
.home:visited,
.home:hover {
	background: url(Home/navigation.png) 0px -17px;
}

But its still not working Sad I just can't figure it out. The hover works no problems at all, but I really need to stay on the black when on that page...its really quite bizarre...

Cheers
Fiona

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 days 9 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Might be worth having a look

Might be worth having a look in Firefox nightly build, it has a feature that allows you to see the styles of the pseudo elements.

If you can put a demo page up I will have a look.

FionaE
FionaE's picture
Offline
Regular
New Zealand
Last seen: 7 years 8 weeks ago
New Zealand
Timezone: GMT+12
Joined: 2012-06-16
Posts: 27
Points: 31

Hi Tony

Thanks for that, which feature is it do you know? I'm not sure exactly what I am looking for...

Cheers
Fiona

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 days 9 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

If ypu right click on the

If ypu right click on the link and choose Inspect Element, you should see a small drop-down menu that allows you to select classes and pseudo classes.
Then on the right you will see what styles are applied.
It can help you find issues with inheritance or specificity.

FionaE
FionaE's picture
Offline
Regular
New Zealand
Last seen: 7 years 8 weeks ago
New Zealand
Timezone: GMT+12
Joined: 2012-06-16
Posts: 27
Points: 31

Ah, thank you

I will check it out. Its actually occurred to me that is not the visited state that I want, but the active, as I want it to stay on the black when clicked on that page. I will do some more experimentation.

Do you know how to get past the image sprites issue with Opera, i've read that if you have a text indent negative value of over -2000 it falls over (and the navigation is falling over in Opera, fine with everything else).

This is the code for that...

ul#navigation li a{  
    height: 17px;  
    float: left;  
    text-indent: -9999px;  
}  

Cheers
Fiona

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 days 9 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

ahh then you are looking at

ahh then you are looking at the wrong thing.
:active is only visible for the split second while your mouse button is in the down state.
You would do well to read Hugo's how to on CSS current page nav link highlight

FionaE
FionaE's picture
Offline
Regular
New Zealand
Last seen: 7 years 8 weeks ago
New Zealand
Timezone: GMT+12
Joined: 2012-06-16
Posts: 27
Points: 31

arrrggh!

Thanks Tony, didn't realise that's what it was.

What I did was added a class for each page (just blank, no selectors), added the class to the hover, and put it in my markup. Its working, but a little too well. It completely obilerated my normal state and now all links are showing as black. Here is the code.

#navhome {
	background: url(Home/navigation.png) no-repeat 0px 0px;
	width: 42px;
}
 
#navhome a:hover, .home {
	background: url(Home/navigation.png) no-repeat 0px -17px;
}
 
#navgallery {
	background: url(Home/navigation.png) no-repeat -42px 0px;
	width: 66px;
}
 
#navgallery a:hover, .gallery {
	background: url(Home/navigation.png) no-repeat -42px -17px;
}
ul#navigation {
	width: 640px;
	padding-top: 70px;
	height: 17px;
}
ul#navigation span {
	display: none;
}
ul#navigation li{  
    float: left;
	list-style: none;
	display: inline;  
} 
ul#navigation li a{  
    height: 17px;  
    display: block;
}  

<ul id="navigation">
    	<li id="navhome"><a class="home" href="homepage.html"><span>Home</span></a></li>
        <li id="navgallery"><a class="gallery" href="Gallery.html"><span>Gallery</span></a></li>
        <li id="navsize"><a class="size" href="sizeprice.html"><span>Size and Price</span></a></li>
        <li id="navcommissions"><a class="commissions" href="Commissions.html"><span>About Commissions</span></a></li>
        <li id="navphotography"><a class="photography" href="Photography.html"><span>Photography</span></a></li>
        <li id="navaboutme"><a class="aboutme" href="AboutMe.html"><span>About Me</span></a></li>
        <li id="navcontact"><a class="contact" href="contact.html"><span>Contact</span></a></li></ul>

I thought it might be because I didn't have the a:link on my normal state, so I tried that, and well yes, that returned my navigation back to the pink, but now the class is no longer working. Like this.

#navhome a:link {
	background: url(Home/navigation.png) no-repeat 0px 0px;
	width: 42px;
}
 
#navhome a:hover, .home {
	background: url(Home/navigation.png) no-repeat 0px -17px;
}

Do you know why its doing this? According to every example I can find, this is what you do! It seems to me the class is taking over the normal id, unless I put the a:link in, and then the class is lost.

I so want to get this up and running....its driving me bonkers.

Cheers
Fiona

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 days 9 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

I think you missed a point of

I think you missed a point of Hugo's how to.
You need to set a class or id so that you know what page you are on.
eg <body id="home">

#navhome a:hover, 
#home #navhome .home {
	background: url(Home/navigation.png) no-repeat 0px -17px;
}

FionaE
FionaE's picture
Offline
Regular
New Zealand
Last seen: 7 years 8 weeks ago
New Zealand
Timezone: GMT+12
Joined: 2012-06-16
Posts: 27
Points: 31

arrggh

Maybe. I seem to have classes and ids coming out my ears. Hugos was a little confusing. I found an earlier thread on here that was asking the same thing (CSS sprite rollover (current page problems). They mentioned creating an id, but had no mention of a second class to apply that id. The id was placed in the markup like I did. So basically what Hugo was saying is I need an identifier to each page and then add another class to the markup to identify it I guess.

And I am going to sound like a complete and utter moron (if I havn't already) but I am unsure how to write the code and css for a body id. Where is it supposed to go? and where do I close it? Just inside the body closing and opening tags? Can you show me where I put it on my markup here? Again I apologise for sounding like a moron, there is still a truckload I need to learn, but for the time being, I just want the darned thing up.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Home</title>
<link href="petportraits2.css" rel="stylesheet" type="text/css" />
<style type="text/css">
 
</style>
</head>
 
<body>
<div id="containerall">
  <div id="header">
    <div id="sidebarheader">
    <div id="Logo"><img src="logo2.jpg" width="236" height="101" alt="Fiona Elrington" /></div></div>
    <div id="NavHeader">
      <ul id="navigation">
    	<li id="navigationhome"><a class="home" href="homepage.html"><span>Home</span></a></li>
        <li id="navgallery"><a class="gallery" href="Gallery.html"><span>Gallery</span></a></li>
        <li id="navsize"><a class="size" href="sizeprice.html"><span>Size and Price</span></a></li>
        <li id="navcommissions"><a class="commissions" href="Commissions.html"><span>About Commissions</span></a></li>
        <li id="navphotography"><a class="photography" href="Photography.html"><span>Photography</span></a></li>
        <li id="navaboutme"><a class="aboutme" href="AboutMe.html"><span>About Me</span></a></li>
        <li id="navcontact"><a class="contact" href="contact.html"><span>Contact</span></a></li></ul></div>
  </div>
  <div id="MainContentCols">  
  <div id="sidebar"><img src="Home/hometext.png" alt="introduction" width="213" height="149" />
<p>Pet portraits are very special in the way they come to life and have presence that can be quite stunning. They are a fabulous way to cherish your beloved pet and keep their presence with you.  </p>
<p>Commissioning a pet portrait for yourself or perhaps as a special gift is easy to do.  Please browse through my website which covers this and more in detail.</p>  <p>If you have any questions at all, please don't hesitate to get in touch.</p>
</div>  
<div id="maincontent"><img src="Home/home-image.jpg" alt="home image" width="626" height="748" class="mainborder" /></div>
  </div>
  <div id="footer">
    <div id="sidebarfooter">
      <div id="copyrighttext"><p class="pinktext">COPYRIGHT INFORMATION</p>
      All artwork is protected under copyright © 2012 by Fiona Elrington. Do not copy.</div>
    </div>
    <div id="maincontentfooter">
      <div id="quicklinks">
     	<ul>
     	  <li><p class="pinktext">QUICK LINKS</p></li>
		<li><a href="Gallery.html">Gallery</a></li>
        <li><a href="sizeprice.html">Sizes and Prices</a></li>
        <li><a href="Commissions.html">About Commissions</a></li>
        <li><a href="Photography.html">Photography Tips</a></li>
        <li><a href="AboutMe.html">About Me</a></li></ul>
      </div>
      <div class="floatright" id="contact">
        <ul>
          <li><p class="pinktext">CONTACT ME</p></li>
        <li>Fiona Elrington</li>
        <li>Telephone: </li>
        <li>Email: </p>
<script type="text/javascript">eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%66%65%70%65%74%70%6f%72%74%72%61%69%74%73%40%73%75%63%68%61%6e%64%73%75%63%68%2e%63%6f%6d%22%3e%66%65%70%65%74%70%6f%72%74%72%61%69%74%73%40%73%75%63%68%61%6e%64%73%75%63%68%2e%63%6f%6d%3c%2f%61%3e%27%29%3b'))</script><p></li></ul>
      </div>
    </div>
  </div>
</div>
 
</body>
</html>

Cheers
Fiona

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 days 9 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

If you are hand coding each

If you are hand coding each page it's easy, just put the id in the body tag like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Home</title>
<link href="petportraits2.css" rel="stylesheet" type="text/css" />
<style type="text/css">
 
</style>
</head>
 
<body id="home">

FionaE
FionaE's picture
Offline
Regular
New Zealand
Last seen: 7 years 8 weeks ago
New Zealand
Timezone: GMT+12
Joined: 2012-06-16
Posts: 27
Points: 31

Lol

Sometimes its the simplest things that make us look like idiots isn't it? Now I getcha. Thank you!

FionaE
FionaE's picture
Offline
Regular
New Zealand
Last seen: 7 years 8 weeks ago
New Zealand
Timezone: GMT+12
Joined: 2012-06-16
Posts: 27
Points: 31

I might still be missing the point

gallery.jpgGallery page screenshot
size.jpgsize page screenshot

Ok, I have been mucking around with this for days, and it appears I am still no closer to a solution. I have sent a body id for each page, and a class to trigger that id, but am obviously running into issues in the css recognising which page it is on, because once again, all my navigation has turned black. It doesnt seem to matter what page I am on. Except the gallery page, its actually working on that one (mostly), but I can't determine any difference.

And to make matters worse, once I put that id in the hover state, I am getting a the black menu image in the top right corner, as well as the navigation. I gather its putting into the body area.

Ok, this is the code, and css. I've also attached a couple of images, one of the gallery page, which is almost working (apart from the home icon and the dirty great extra navigation in the corner) and the size, which is how its working on all the other pages.

<body id="gallerypage">
  <div id="container"><div id="header">
    <div id="sidebarheader">
    <div id="Logo"><img src="logo2.jpg" width="236" height="101" alt="Fiona Elrington" /></div></div>
    <div id="NavHeader">
      <ul id="navigation">
    	<li id="navigation-home"><a href="homepage.html" class="homepage"><span>Home</span></a></li>
    <li id="navigation-gallery"><a href="Gallery.html" class="gallerypage"><span>Gallery</span></a></li>
    <li id="navigation-size"><a href="#"><span>Size and Price</span></a></li>
    <li id="navigation-commissions"><a href="#"><span>About Commissions</span></a></li>
    <li id="navigation-photo"><a href="#"><span>Photography Tips</span></a></li>
    <li id="navigation-about"><a href="#"><span>About Me</span></a></li>
    <li id="navigation-contact"><a href="#"><span>Contact</span></a></li>
</ul></div>
  </div></div>
</body>

#navigation {
	background: url(Home/navigation%20copy.png) no-repeat;
    width: 640px;
    height: 17px;
    margin: 0;
    padding top: 70px;
	float: left;
}
 
#navigation span {
	display: none;
}
 
#navigation li, #navigation a {
    height: 17px;
	display: block;
}
 
#navigation li {
    float: left;
    list-style: none;    
	display: inline;
 
}
 
#navigation-home { width: 42px; }
#navigation-gallery { width: 66px; }
#navigation-size { width: 117px; }
#navigation-commissions { width: 134px; }
#navigation-photo { width: 127px; }
#navigation-about { width: 76px; }
#navigation-contact { width: 78px; }
 
 
 
#navigation-home a:hover, #homepage, .homepage  { background: url(Home/navigation%20copy.png) 0px -17px no-repeat; }
#navigation-gallery a:hover, #gallerypage, .gallerypage   { background:url(Home/navigation%20copy.png) no-repeat -42px -17px; }
#navigation-size  a:hover, #sizepage, .sizepage { background: url(Home/navigation%20copy.png) no-repeat -108px -17px }
#navigation-commissions a:hover, #commissionspage, .commissionspage  { background:url(Home/navigation%20copy.png) no-repeat -225px -17px; }
#navigation-photo a:hover, #photopage, .photopage   { background:url(Home/navigation%20copy.png) no-repeat -359px -17px; }
#navigation-about a:hover, #aboutpage, .aboutpage   { background:url(Home/navigation%20copy.png) no-repeat -486px -17px; }
#navigation-contact a:hover, #contactpage, .contactpage  { background:url(Home/navigation%20copy.png) no-repeat -562px -17px; }

I am probably missing something quite simple, but damned if I can figure out what it is....the only that thats occured to me is that this css is written in one file that applies to the whole site. Should it be applied to each page only?

Please help, I am about to give up on it!

Cheers
Fiona

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 days 9 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Hi FionaE, Don't give up you

Hi FionaE,
Don't give up you are nearly there.
Can you provide a link to an example page, it's much easier to debug these things if we can see it in action.

FionaE
FionaE's picture
Offline
Regular
New Zealand
Last seen: 7 years 8 weeks ago
New Zealand
Timezone: GMT+12
Joined: 2012-06-16
Posts: 27
Points: 31

lol its giving

me a migraine Smile Thanks for your reply Tony. Its not live yet, and I'm not sure how to do a demo page....

Cheers
Fiona

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 days 9 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

If you have a domain and

If you have a domain and host, just make a copy of the page, rename it then upload it with all required images etc.

FionaE
FionaE's picture
Offline
Regular
New Zealand
Last seen: 7 years 8 weeks ago
New Zealand
Timezone: GMT+12
Joined: 2012-06-16
Posts: 27
Points: 31

Hi Tony

navigation copy.png

I don't, not yet. Sorry, a pain I know. I've been concentrating on building it before I sort all that out. This is the image I have been using though.

Cheers
Fiona

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 days 9 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Ok I think your trouble was

Ok I think your trouble was mostly due to a comma between the page id and class of the menu item.

This is how I would do it:

#navigation {
/* removed the background from here */
    width: 640px;
    height: 17px;
    margin: 0;
    padding top: 70px;
   float: left;
}
 
#navigation span {
	display: none;
}
 
#navigation li, #navigation a {
    height: 17px;
	display: block;
}
 
#navigation li {
    float: left;
    list-style: none;    
	display: inline;
 
}
 
#navigation-home { width: 42px; }
#navigation-gallery { width: 66px; }
#navigation-size { width: 117px; }
#navigation-commissions { width: 134px; }
#navigation-photo { width: 127px; }
#navigation-about { width: 76px; }
#navigation-contact { width: 78px; }
 
#navigation-home a{background: url(Home/navigation%20copy.png) 0px -17px no-repeat; }
#navigation-gallery a{background: url(Home/navigation%20copy.png) -42px -17px no-repeat; }
#navigation-size a{ background: url(Home/navigation%20copy.png) -108px -17px no-repeat;}
#navigation-commissions a{background: url(Home/navigation%20copy.png) -225px -17px no-repeat; }
#navigation-photo a{ background: url(Home/navigation%20copy.png) -359px -17px no-repeat; }
#navigation-about a{ background: url(Home/navigation%20copy.png) -486px -17px no-repeat; }
#navigation-contact a{background: url(Home/navigation%20copy.png) -562px -17px no-repeat; } 
 
#navigation-home a:hover, #homepage .homepage  { background-position: 0px 0px; }
#navigation-gallery a:hover, #gallerypage .gallerypage   {  background-position: -42px 0px; }
#navigation-size  a:hover, #sizepage .sizepage {  background-position: -108px 0px }
#navigation-commissions a:hover, #commissionspage .commissionspage  {  background-position: -225px 0px; }
#navigation-photo a:hover, #photopage .photopage   {  background-position: -359px 0px; }
#navigation-about a:hover, #aboutpage .aboutpage   {  background-position: -486px 0px; }
#navigation-contact a:hover, #contactpage .contactpage  {  background-position: -562px 0px; }

FionaE
FionaE's picture
Offline
Regular
New Zealand
Last seen: 7 years 8 weeks ago
New Zealand
Timezone: GMT+12
Joined: 2012-06-16
Posts: 27
Points: 31

Ah, you're fabulous!

Thanks Tony, its working!!! God, imagine that, just a comma (mostly, and an image placement). I guess without the comma, these two actions are grouped together now, instead of working separately.

Thats fabulous, thank you so much for your help!

Cheers
Fiona