The Web Squeeze: Css Active State Link - The Web Squeeze

Hi was just wondering if any1 could help me if you go here www.bluegeeks.co.uk/menu/beta/index.html when you hover over the menu images they all have different colours, and if you wanna know how i did this i used One image for the hover effect etc. and i have been trying to do an "Active State" css for it so when you click the portfolio it will keep that hover state which is "YELLOW" and the same for the rest "Services" "Contact" "Home" Hope some1 can help on this i been trying with no luck as of yet

Regards,
Aaron

It's more of a "current state" since "active" is an actual CSS property, many people get them confused.

The ACTIVE property is set when you click on the link.

What you want (I think), is when you get to that portfolio page, your "hover" color stays right? If that's right, just create a class with that color.

a:link, a:visited, a:active { color: #999; }

a:hover, a.current { color: #090; }


<a href="" class="current">...</a>

Hi Karinne,

Yes that is right i will try this and get back to you

One thing, how can i do is so like each current state has a different color or image?

Aaron

This post has been edited by aaron1988: 17 December 2009 - 10:08 AM

Your hovers have different colors right? So..

a.home:hover, a.homecurrent { color: #090; }
a.portfolio:hover, a.portfoliocurrent { color: #900; }
a.services:hover, a.servicescurrent { color: #009; }
a.contact:hover, a.contactcurrent { color: #000; }


<a href="" class="homecurrent">...</a>
and so on

Thankyou karinne so can i change the color to background:url(image/example.jpg); etc

Of course

if you go here www.bluegeeks.co.uk/menu/beta/index.html the Image which is showing is the whole menu

has this css #header ul {
display:block;
float:right;
width:640px;
height:125px;
background:url(img/menu1.png) no-repeat 0 0;
list-style:none;
}

and what i did was split up the hover images into 4 images so home.png / portfolio.png / services.png / contact.png and then i put the positons as below because thats what the code was on the old code i used but dont seems to be working

a.home:hover, a.homecurrent { background:url(img/home.png) no-repeat 0 -125px; }
a.portfolio:hover, a.portfoliocurrent { background:url(img/portfolio.png) no-repeat -160px -125px; }
a.services:hover, a.servicescurrent { background:url(img/services.png) no-repeat -309px -125px; }
a.contact:hover, a.contactcurrent { background:url(img/contact.png) no-repeat -309px -125px; }

UPDATING page now as i forgot to upload it so you can see what i mean

EDIT: Page uploaded

This post has been edited by aaron1988: 17 December 2009 - 11:17 AM

I don't see that last bit of code

#home a:hover, .current-home {
  background:url(img/menu.png) no-repeat 0 -125px;
}
#portfolio a:hover, .current-portfolio {
  background:url(img/menu.png) no-repeat -160px -125px;
}
#services a:hover, .current-services {
  background:url(img/menu.png) no-repeat -309px -125px;
}
#contact a:hover, .current-contact {
  background:url(img/menu.png) no-repeat -458px -125px;
}

And you HTML if you're on the portfolio page would be

<li class="current-port" id="portfolio"><a href="#">About</a></li>

Ok so the CSS should look like

#home a:hover, .current-home {
background:url(img/home.png) no-repeat 0 -125px;
}
#portfolio a:hover, .current-portfolio {
background:url(img/portfolio.png) no-repeat -160px -125px;
}
#services a:hover, .current-services {
background:url(img/services.png) no-repeat -309px -125px;
}
#contact a:hover, .current-contact {
background:url(img/contact.png) no-repeat -458px -125px;
}

and the html should be like this

index page:

<ul>
	  <li class="current-home" id="home"><a href="index.html">Home</a></li>
	  <li><a href="portfolio.html">Portfolio</a></li>
	  <li><a href="services.html">Services</a></li>
	  <li><a href="contact.html">Contact</a></li>
</ul>

portfolio page:

<ul>
	  <li><a href="index.html">Home</a></li>
	  <li class="current-portfolio" id="portfolio"><a href="portfolio.html">Portfolio</a></li>
	  <li><a href="services.html">Services</a></li>
	  <li><a href="contact.html">Contact</a></li>
</ul>

Services Page

<ul>
	  <li><a href="index.html">Home</a></li>
	  <li><a href="portfolio.html">Portfolio</a></li>
	  <li class="current-services" id="services"><a href="services.html">Services</a></li>
	  <li><a href="contact.html">Contact</a></li>
</ul>

Contact Page

<ul>
	  <li><a href="index.html">Home</a></li>
	  <li><a href="portfolio.html">Portfolio</a></li>
	  <li><a href="services.html">Services</a></li>
	  <li class="current-contact" id="contact"><a href="contact.html">Contact</a></li>
</ul>

is that how it should be

Cheers
Aaron

This post has been edited by aaron1988: 17 December 2009 - 11:48 AM

Yessss

I did that but doesnt work

could it be that i have it set out like this

#header ul {
  display:block;
  float:right;
  width:640px;
  height:125px;
  background:url(img/menu.png) no-repeat 0 0;
  list-style:none;
}
#header ul li {
  display:block;
  float:left;
  height:125px;
  text-indent:-10000px;
}

the menu.png is like a background image it has the home / portfoilio / services / contact all in one image and then when you come down to

#home a:hover, .current-home {
background:url(img/home.png) no-repeat 0 -125px;
}
#portfolio a:hover, .current-portfolio {
background:url(img/portfolio.png) no-repeat -160px -125px;
}
#services a:hover, .current-services {
background:url(img/services.png) no-repeat -309px -125px;
}
#contact a:hover, .current-contact {
background:url(img/contact.png) no-repeat -458px -125px;
}

as i split the hover images up into there own i thought this would work

how can i change it so

the menu.png isnt menu.png but is home.png portfolio.png etc and then placed in the correct place do i just do this

#home ul {
  display:block;
  float:right;
  width:640px;
  height:125px;
  background:url(img/home.png) no-repeat 0 0;
  list-style:none;
}

#portfolio ul {
  display:block;
  float:right;
  width:640px;
  height:125px;
  background:url(img/portfolio.png) no-repeat 0 0;
  list-style:none;
}

Regards,
Aaron