- This topic has 10 replies, 2 voices, and was last updated 4 years, 9 months ago by Tom.
February 17, 2016 at 4:01 pm #173473Mo
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.
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.
MoFebruary 17, 2016 at 11:32 pm #173533TomLead DeveloperLead DeveloperFebruary 18, 2016 at 3:52 am #173585Mo
Forgot to disable the “Under construction” plugin.
It’s now disabled so it should be visible now.
Thanks for taking the time to look.
MoFebruary 18, 2016 at 10:42 am #173650TomLead DeveloperLead DeveloperFebruary 18, 2016 at 11:58 am #173677Mo
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.
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:)
MoFebruary 18, 2016 at 4:50 pm #173735Mo
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?
MoFebruary 18, 2016 at 5:21 pm #173737Mo
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.
MoFebruary 18, 2016 at 11:28 pm #173760TomLead DeveloperLead Developer
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).February 19, 2016 at 8:10 am #173844Mo
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?
MoFebruary 20, 2016 at 9:44 am #174018Mo
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.
MoFebruary 20, 2016 at 1:43 pm #174067
- You must be logged in to reply to this topic.