14 replies [Last post]
Babybekka
Offline
Regular
Last seen: 17 years 7 weeks ago
Joined: 2005-06-29
Posts: 13
Points: 0

Hello,

After looking through the exmaples on the forum and checking out the link on previous posting i have made. I have attempted to have a go at creating my own css rollover list menu, i have the list images placed and positioned properly but when adding in the rollover effect it is appearing not to work?

#navigation ul { 
	list-style-type none;
	margin 0;
	padding 4px;
	}
#navigation a { 
	display block;
	color #fff;
	background-color #ff9966;
 	width 140px;
	}

ahover#about  {
	background url(Images/about1.gif);
	}

this is the CSS i have used.

this is the html i am using

<div id="navigation"> 
        <ul>
          <li id="home"><img src="images/home1.gif" width="140" height="30" /></li>
		  <li id="about"><img src="images/about.gif" width="140" height="30" /></li>
          <li id="services"><img src="images/services.gif" width="140" height="30" /></li>
		  <li id="terms"><img src="images/terms2.gif" width="140" height="30" /></li>
          <li id="online"><img src="images/online.gif" width="140" height="50" /></li>
		  <li id="links"><img src="images/links.gif" width="140" height="30" /></li>
          <li id="contact"><img src="images/contact.gif" width="140" height="30" /></li>
        </ul> 
				</div>

What have i done wrong?

Would appreciate advice and suggestions.

have only applied it to the second item in the list so far, as i wanted to get that going and working before attempting the rest of the list.

Thanks
Bekka

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 24 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

CSS Rollover Issues

Bekka, your html shows no anchors and I'm guessing you're addressing the (missing) anchors wrong in the css. If you give the li an id and the anchor is a child of the li then you'd address it like this:

#about a:hover {
background: url(Images/about1.gif);
}

Babybekka
Offline
Regular
Last seen: 17 years 7 weeks ago
Joined: 2005-06-29
Posts: 13
Points: 0

CSS Rollover Issues

Hello

I have been experimenting with the different ways and havent managed to get one to work....

Is this how i should place an anchor on the about of the li list?

<li id="about"><img src="images/about.gif" width="140" height="30" /></li>

Thanks Bekka

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 24 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

CSS Rollover Issues

No.You need an anchor (or a) tag. Like this:

<li id="about"><a href="about.html"><img src="images/about.gif" width="140" height="30" /></a></li>

Babybekka
Offline
Regular
Last seen: 17 years 7 weeks ago
Joined: 2005-06-29
Posts: 13
Points: 0

CSS Rollover Issues

Hello

Just managed to get back to my computer, been busy doing other things the past few days.

Have been playing with the css rollover but am struggling to get it working, although i understand the concept of what i am doing.

If possible could someone look over what i have done and tell me where i have gone wrong?

http//squirrel-net.co.uk/~bekka/webcss/index.htm

http//squirrel-net.co.uk/~bekka/webcss/test.css

Thanks Beks

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 24 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

CSS Rollover Issues

Bekka, have you seen your last thread? I completely recoded the page for you and styled it as well.
http://csscreator.com/css-forum/ftopic10624.html&highlight=

Babybekka
Offline
Regular
Last seen: 17 years 7 weeks ago
Joined: 2005-06-29
Posts: 13
Points: 0

CSS Rollover Issues

Wolfcry,

Yes i did see the code from the previous posting.

What i am trying to achieve is to use the images i have to create a rollover effect.

Bekka

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 16 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

CSS Rollover Issues

The javascript way is old, and not used any more.

Set the links to display:block, and give them a background image of the 'off' state image.

Then, give the hover state a background image of the 'on' image.

Verschwindende wrote:
  • CSS doesn't make pies

Babybekka
Offline
Regular
Last seen: 17 years 7 weeks ago
Joined: 2005-06-29
Posts: 13
Points: 0

CSS Rollover Issues

Sorry but i am not totally confused on how i should be doing the rollover effect with images and to make sure it works with IE and FF.

Could some one place an example for or know for a good website explaining it.

Thanks

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 16 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

CSS Rollover Issues

Verschwindende wrote:
  • CSS doesn't make pies

Babybekka
Offline
Regular
Last seen: 17 years 7 weeks ago
Joined: 2005-06-29
Posts: 13
Points: 0

CSS Rollover Issues

From what i have found and looked at the code i have now should work but it doesnt what have i done wrong?

http//squirrel-net.co.uk/~bekka/webcss/index.htm

http//squirrel-net.co.uk/~bekka/webcss/test.css

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 47 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

CSS Rollover Issues

You have foreground & background images. The foreground images will always show. Use only background images.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 44 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

CSS Rollover Issues

<li><a id="about" href="about.htm"><img src="Images/blank.gif" alt="About" /></a></li> You don't actually need to put the image tag in your HTML. In fact, you'd be better off putting the text of your link in there instead of in the alt tag. Then do something like this:

<li id="about"><a href="about.htm">About</a></li>

li#about	{ text-indent: -9999px; }
	
li#about:link, li#about:visited {
	display: block;	
	width: x;
	height: x;
	background: url(images/yoururl.jpg) top left no-repeat;
}
li#about a:hover { background: url(images/yoururl.jpg) 0 -90px no-repeat; }

The way I've done it is if you're using a single image for both your on & off state. The -90px refers to bringing the hover state of the image into view so it'll be about half of whatever size your image is.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Babybekka
Offline
Regular
Last seen: 17 years 7 weeks ago
Joined: 2005-06-29
Posts: 13
Points: 0

CSS Rollover Issues

I take it i do that for all the images i have in the menu.

But I have two images one for each state? So if the green one and when you roll your mouse over it it changes to white.

Thanks

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 44 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

CSS Rollover Issues

Yeah, if you have two images, you place the url to the second one with your hover. The example I gave above uses a single image that has both on & off states in it and it uses positioning of the image to show the different states.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference