[Resolved] Make rollover images flush to center column.

[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

[Tom]

Hi Mo,

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

Let me know 🙂

[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

[Tom]

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

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

[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

[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

[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

[Tom]

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

[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

[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

[Tom]

Glad you found a solution 🙂

[Author]

Posts