Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Make rollover images flush to center column.

Home Forums Support Make rollover images flush to center column.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #173473
    Mo

    Hi Tom,
    Just starting a new build.
    Seeing a few new improvements like a “To Top” button.
    I had asked about this feature last year so it’s great to see it implemented.

    I’ve got a couple of CSS related questions which I’ll post separately.
    If they are not appropriate for this forum, let me know and I’ll search elsewhere.

    On this page you’ll see some rollovers in 3 columns generated by the lightweight grid columns plugin.
    Rollovers

    The center column has all the rollovers in a single column in case the left and right columns don’t work to my liking.

    Took a bit of fiddling but finally got them to work without breaking.
    I have several rollover sets that I would like to put up so if this page is resolved it should give me insight to build the others.

    Question: Is there a way using CSS to have the left column align flush with the center column and have the right column flush with the center column.

    Thanks,
    Mo

    #173533
    Tom
    Lead Developer
    Lead Developer

    Hi Mo,

    It seems to be just a blank grey page right now?

    Let me know 🙂

    #173585
    Mo

    Hi Tom,
    My bad.
    Forgot to disable the “Under construction” plugin.
    It’s now disabled so it should be visible now.
    Thanks for taking the time to look.
    Rollovers

    Mo

    #173650
    Tom
    Lead Developer
    Lead Developer

    I’m only seeing two columns? Are you wanting the two images to touch?

    I’m also not noticing any lag on the rollovers 🙂

    #173677
    Mo

    Hi tom,
    My bad X 2…
    I was so engrossed with the sprites CSS I completely forgot about the 3 column setup.

    It has been restored to the original 3 columns state when the original question was posted.

    3 Column Rollovers

    There might be a significant lag now.

    I think what you found on your last visit was the first successful sprite images so there wasn’t any lag on them.

    I’ll work on a different page and leave the current CSS alone:)

    Thanks,
    Mo

    #173735
    Mo

    Hi Tom,
    Not wanting to give up on finding a solution, I’ve come very close to aligning the rolloverer sprites flush with one another.

    The images aren’t displaying properly as some of them are being cut off.

    Alignment for mobile gets trashed.

    I’ll leave this page up for you to have a look at.
    The CSS is located in the head of the page so it doesn’t interfere with the other pages.

    This is as close as I’ve been able to get:
    Sprites Rollover 3 Columns Test

    There are several image based plugins installed but not enabled yet and I’m wondering if they could be affecting anything?

    It probably wouldn’t be a good idea to use a responsive table would it to get the images to butt up against one another?

    Thanks,
    Mo

    #173737
    Mo

    Hi Tom,

    Forgot to add that there are a few more rollover sets that are going to be converted into sprites.
    The other sets use different sizes of images and the number of buttons per set is different as well.
    Perhaps it would be best to be satisfied with the grid method and live without the columns aligning flush.

    Seems like there are plenty of things to go wrong just from what I’ve tried to do.
    This is all being put together as an online portfolio so the images have to display in a consistent manner with an decent layout.

    Perhaps there’s a gallery of some sort that would work.
    There’s also Flash animations, animated gifs, banners static and animated in addition to additional static artwork.

    The galleries I’ve tried so far haven’t been that flexible or looked that appealing to me.

    Looking for lightweight plugins and not bloated with features I’ll never use.

    Plain and simple is best.

    If you have any other suggestions as to how best display these rollovers with the other formats of artwork mentioned that I wish to display, they’d be appreciated.

    Thanks,
    Mo

    #173760
    Tom
    Lead Developer
    Lead Developer

    Hi Mo,

    I’m afraid I can’t see the images at all – when I try to navigate to them directly I get a “Your access to this site has been limited” message.

    Maybe try disabling WordFence for now (I’m assuming that’s what is causing that message).

    #173844
    Mo

    Sorry Tom,
    Haven’t run into that before.
    Wordfence is disabled.

    This page uses regular 2 image rollovers (image & hover) in the CSS.
    Regular Rollover 3 Columns

    This page uses sprites with CSS placed in the head to avoid conflict with the default CSS
    Sprites 3 Columns
    This is the one where I was able to make some alignment changes using what I saw in Firebug.
    Alignment breaks in mobile display.

    Would a responsive table work?
    Is there a simple gallery plugin that could display not only rollovers but animated gifs, SWF and other graphics formats?

    Thanks,
    Mo

    #174018
    Mo

    Hi Tom,
    Figured out what I was doing wrong.
    Applying floats in columns doesn’t work. (At least for me they didn’t)
    Taking the columns out of the layout allowed me to insert and style the rollover sprites flush to one another.

    I’m marking this as resolved.

    Thanks for your time.

    Mo

    #174067
    Tom
    Lead Developer
    Lead Developer

    Glad you found a solution 🙂

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.