Skip to main content

Forums

This topic contains 5 replies, has 0 voices, and was last updated by  simoncmason 7 years, 1 month ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #39026

    simoncmason
    Member

    So I have an image link which I want to reverse out on hover. Easy using CSS sprites but, then I need to set the width and height in px.

    Is there a way of doing this for a flexible / fluid site where everything is set in percentages?

    Pure CSS would be nice or is some javascript required?

    #106625

    It seems like it wouldn’t be an issue.. Read this.

    #106626

    simoncmason
    Member

    @paintba11er89

    Thanks but that only deals with the position of the background image in the sprite – and assumes you have some content to give it space on the page.

    My problem is I want to use a background image as the content to create an image based button with a rollover. To do this I’d normally set the width and height of the anchor so it creates some space on the page, something like this:


    a.rollover-image {
    width:30px;
    height:30px;
    display:block;
    background: url ('my30x60image.jpg')
    background-position: 0 0;
    }
    a.rollover-image:hover {
    background-position: 0 30px;
    }

    But how do I make that work with percentages? If I fix the width and height of the buttons it will break the design of the container and I can’t set it in percentage as I don’t know what percentage the height will end up at.

    Hopefully I’m missing something really obvious here and enlightenment awaits!

    #106628

    ChrisxClash
    Member

    This reply has been reported for inappropriate content.

    As far as I know, you can’t have a variable width/height if you’re trying to use an image. There’s ways to make a simple sprite that will allow you a variable width, but if you want the height to change as well, then you’d have to use pure css.

    You can make some pretty awesome buttons using just gradients/borders/shadows in css3.

    #106630

    simoncmason
    Member

    Hi Chris,

    Yep, if it was width only I’d be laughing as all the widths are set in %. But the height won’t scale in line with the width …

    Got to use images for these buttons as they are icons that pertain to the client’s products.

    Can feel a slew of media queries coming on ! Ho hum …

    #106633

    ChrisxClash
    Member

    This reply has been reported for inappropriate content.

    Can I see what one of the buttons look like? Might help a little bit with a solution. Otherwise, yeah that might be a possibility.

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

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star