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
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);
}
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
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>
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
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=
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
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.
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
CSS Rollover Issues
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
CSS Rollover Issues
You have foreground & background images. The foreground images will always show. Use only background images.
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.
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
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.