Index + Exhibit


Created by
Daniel Eatock
Jeffery Vaska
And You

Index CSS and images


Indexhibit version: 2.0
Thread is resolved.

3 year(s) ago
Permalink Post

I am trying to set up a roll over image in the index sidebar but am having a css problem. Right now I have my index css as

  1. #index a:link {  } 
  2. #index a:hover {  text-decoration: none; color: #666; background: #e3ecce;} 
  3. #index a:active { text-decoration: color: #666;} 
  4. #index a:visited { color: #666  }

So there is a background colour on my text as i hover over it. But it is also effecting my roll over image so it has a green bar on the bottom of it when i roll over.

My code for the roll over image is

  1. <a…;(document.images) document.Logo.src= '…;(document.images) document.Logo.src= '';"><img src="" name=Logo border=0></…;

Anyways, is there a way to make the image have no decoration? Would I put that in the CSS or in the sidebar html?

The image is the paper fortune thing in the top left.

My site is

3 year(s) ago
Permalink Post

well yes there is... use firebug to find the specific css selector that targets the image and add a background:transparent; property...

but why are you using js for a rollover image? use css instead:

  1. #logo { width: 180px; height: 153px; background: url(ADDRESS_OF_THE_NON_ANIMATED_LOGO_HERE); text-indent: -9999px; cursor: pointer; }
  2. #logo:hover { width: 180px; height: 153px; background: url(ADDRESS_OF_THE_ANIMATED_LOGO_HERE); }

and in your pre-nav area:

  1. <a href='HOME_ADDRESS_HERE'><h1 id='logo'>DEREK BROAD DESIGN</h1></a>
3 year(s) ago
Permalink Post

Wow, thanks man! Works perfect. I was trying to do it in css but i think i messed up somewhere. I appreciate the clear explication. I'm kind of learning this all as i go along.


Showing 1 - 3 of 3 posts in Forum » Customize » Index CSS and images

This thread has been closed, thank you.