2

I have a question that I hope I can get an answer to. I'm attempting to create a website from scratch (not using Dreamweaver, Expression Web, etc.), I'm using only notepads. What I'm trying to accomplish is creating two navigation links as rollover CSS sprite images (using Pseudo-class element :hover) within a tag that I would like to move around the page later. I've spent all of last week trying to resolve this issue with no success. I've been to www.w3schools.com and this site as well to find a solution, but still can't seem to get this to work correctly. I'm also in a strict environment that only allows me to use one browser (IE8) on a Win7 OS. Please pardon my lousy CSS coding; this is my first go at it.

Currently I'm using two links as shown below in HTML:

<div id="linkbox">
<ul class="GoogleFrame">
<li class="Google"><a href="www.google.com"></a></li>
</ul>
<ul class="BingFrame">
<li class="Bing"><a href="www.bing.com"></a></li>
</ul>
</div>

Here is the CSS I'm using with the above HTML:

#linkbox {
  width: 312px;
  height: 388px;
  background: url('images/container.png');
  padding: 0px;
  margin: 0px;
  position: fixed;
  left: 0px;
  top: 410px;
  z-index: 1
}

.GoogleFrame {
  position:fixed;
  left: 10px; 
  top: 100px
}

.GoogleFrame li {
  list-style:none;
  position:absolute;
}

.GoogleFrame li, .GoogleFrame a {
  height:54px;
  display:block;
}

.Google {
  left:0px;
  width:260px;
  background: url('images/google.png') 0px 0px;
}

.Google a:hover {
  background: url('images/google.png') -261px 0px;
}

Any help or guidance will be greatly appreciated!

Fred
  • 47
  • 1
  • 6
  • 1
    If you are using different images for different hover states...you aren't using a sprite. – Paulie_D Jan 14 '14 at 15:32
  • where is your sprite image? googleh.png or google.png? **background: url('images/container.png');** is not correct css instruction also.... – Igor Benikov Jan 14 '14 at 15:32
  • Generally, the point of using a sprite is to have all the image states/icons within the same image file. Are you deliberately calling two different image files? – sbeliv01 Jan 14 '14 at 15:32

2 Answers2

3

For CSS sprite images, you can do something like this:

HTML

<ul>
    <li>
        <a href="#">text</a>
    </li>

    <li>
        <a href="#">text</a>
    </li>

    <li>
        <a href="#">text</a>
    </li>
</ul>

CSS

ul {width:100px;}
li { margin-bottom:5px; }
li a {
    text-indent:-9999em; /* hide our text */ 
    display:block; 
    height:40px; 
    background:url('http://placekitten.com/100/80') no-repeat 0 0; 
}

li a:hover { background-position:0 -40px;}

JSFiddle Demo

The idea is that you have 1 image, and you show half of it, and then using :hover you can change the background-position of the image to show the on/off state

Nick R
  • 7,704
  • 2
  • 22
  • 32
  • Thanks folks for the quick response. I see that that I forgot to include the CSS for the Bing Link. So basically, I would have two separate links in a vertical fashion, and their a:hover images would be coming from the same google.png file. @Nick R, so if wanted to include two links (or more) how would I do the HTML and CSS based on your example above? Thanks – Fred Jan 14 '14 at 16:36
  • @Fred For multiple links, you can do something like this : **http://jsfiddle.net/9Py9m/1/** or if you want to include a large sprite sheet image, with every single links hover/normal state, you can just use the same image, but change the `background-position` coordinates, like this : **http://jsfiddle.net/9Py9m/3/** – Nick R Jan 14 '14 at 16:47
  • thanks again for a fast response. Look like the above examples you provided for me are for a web browser that is 'up to par'. Unfortunatley, I can only use IE8 at my location at this time. Should I try those links with a recent version of IE or FF? – Fred Jan 14 '14 at 18:16
  • was able to get to a IE10 browser and viewed your JSFIDDLES. Trying out your solutions, brb.. – Fred Jan 15 '14 at 13:48
0

@Nick R

Thanks Nick! I followed your examples from the above JSFIDDLES and found a resolution to my problem by the below following:

HTML

<ul>
 <li class="Google">
    <a href="#">Google</a>
 </li>
 <li class="Bing">
    <a href="#">Bing</a>
 </li>
</ul>

CSS

ul {
  width:260px;
  position: fixed;
  left: 1px;
  top: 200px;
  z-index: 1
}

li { 
  margin-bottom:5px;
}

li a {
  text-indent:-9999em; /* hide our text */ 
  display:block; 
  height:44px;
}

li.Google a {
  background: url('images/google.png') 0px 0px;
  no-repeat 0 0;
}

li.Google a:hover {
  background-position: -260px 0px;
}

li.Bing a {
  background: url('images/google.png') -520px 0px;
  no-repeat 0 0;
}

li.Bing a:hover {
  background-position: -779px 0px;
}

Thanks again! thumbs up

Fred
  • 47
  • 1
  • 6