Grow your CSS skills. Land your dream job.

CSS Rollover within a DIV

  • # September 30, 2009 at 12:15 pm

    Hello 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.html

    The 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_.

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">







    If anyone has any ideas please let me know. Thanks for the help.

    # September 30, 2009 at 2:09 pm

    As 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

    Section A

    // 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

    Thanks 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

    Does 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.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".