- This topic is empty.
-
AuthorPosts
-
September 30, 2009 at 12:15 pm #26297
jprandall
MemberHello all,
I’m new to CSS and I am trying to make a rollover using CSS. Here is the link I setup to view the page.
http://www.pointofgracefpf.org/header.htmlThe button on the far left is the one I am currently working on. I want to setup a background image to move up or down depending on the state of button. Whenever I hover over it I dont see my background image move. Below is the CSS and HTML I have. The class in CSS I am using is Home-btn_.
If anyone has any ideas please let me know. Thanks for the help.
September 30, 2009 at 2:09 pm #64869screencat
MemberAs simple as it sounds to get you were you want, the harder it is actually to fix your problem because you didn’t write the code yourself. There’s not even a background-image inside the "div" or "a" tag.
A good advice: throw that editor (whatever software that is) away (seriously) and LEARN CSS by hand-coding it – it is the only right way to do it. Everything else won’t get you far and you will waste a lot of time trying to understand machine-coded CSS which will never be as simple and flexible as it needs to be.
To illustrate how simple your problem is, here’s some code
Code:// HTML// CSS
a.button {
background: url(someimage.jpg) top left no-repeat;
display: block;
height: 30px;
width: 150px;
}a.button:hover {
background-position: bottom left;
}There are newer books but this is the only CSS book I read and which I can still recommend for beginners.
http://www.sitepoint.com/books/css2/September 30, 2009 at 5:22 pm #64889jprandall
MemberThanks for the reply. I used Photoshop to make my header/buttons and then I sliced everything up and had it generate the CSS. I bascially started over and coded the CSS from scratch and everything is working now. I have some books I am reading to learn CSS, I have a ways to go yet I know. I do have one issue with Firefox if anyone knows the problem? Whenever I hover over the button the pointer flickers back and forth between the hand and the arrow when I move it slowly. Everything is fine in IE. Any thoughts? Thanks,
October 1, 2009 at 4:05 am #64916screencat
MemberDoes the URL in the status bar at the bottom of your browser window also dis/reappearing during the flicker?
If "no": I have the same issue sometimes in FF (OSX) but it has nothing to do with the page itself – seems to a a browser bug.
If "yes": I would need to see the page. -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.