Equal Height Columns on Grid and Rollover Effect

HTML & CSS
1

Hey Guys,

Trying to figure out how to have equal column heights on my grid based layout. Running into some issues.

Here is the link…

http://modocom.ca/ccbs/

  1. That green under CCBS I need to extend down to bottom of first set of pictures.
  2. Grey Paragraph section need to extend down to bottom of second set of pictures.
  3. Seems like my columns or iamges have padding or margins on them at the bottom but can’t seem to get rid of it.

My last issue is bit more complex its a rollover effect. Right now I just have so when you rollover say the construction worker his photo turns to color what I also want it to do when you rollover the construction worker in my icon div thats the CCBS div where the green will fill out I want an icon to fade in. The default when visitor lands on site wont have no icon under the letters CCBS but when you rollover the construction worker an icon or text will show up or whatever and same as when you rollover the doctor the previous icon fades out and one associated with doctor fades in. How can I achieve this?

Thanks,

Mike

2
  1. That green under CCBS I need to extend down to bottom of first set of pictures.
  1. Grey Paragraph section need to extend down to bottom of second set of pictures.

Wrap an extra div around each row of three boxes, with a class of “row”. Set it to the following:

.row {display: table; width: 100%}

Then remove the float on the boxes and set them to display: table-cell:

.row div {display: table-cell;}
  1. Seems like my columns or iamges have padding or margins on them at the bottom but can’t seem to get rid of it.

Set your images to vertical-align: bottom;

3

Hi ralph.m

Got it took look good in Chrome now. But still theres white space at bottom of my pictures.

And it looks totally different in FireFox very bad in FireFox.

Thanks,

Mike

4

You haven’t applied vertical-align: bottom to all images. Make it a more general rule.

it looks totally different in FireFox

Try adding this:

.row {table-layout: fixed;}
5

Hey ralph.m

That didnt seem to work either the table-layout: fixed;

6

Works for me in FF. The real problem is the absolutely placed images. Rather than do that, I’d suggest have the top image just statically positioned and set the other image as a background (background-size: cover). Fade out the inline image on hover.

7

Weird cause this is what looks like in FireFox for me can’t see the construction man…

If I set the top image statically positioned and top and the colored image as a background-size: cover then fade out do I risk the images not being right over top of each other though?

I’ve attached a screenshot of it in my FireFox you will notice the construction man picture is behind the CCBS table-cell.

Thanks,

Mike

8

Yes, I see that too, but it’s a position: absolute problem, rather than a problem with the table display.

I’m not sure if my suggestion would work, but it’s worth a try. You could use a sprite image instead, but you’s lost the fade effect.

9

I’ll try your suggestion this morning, with the static and background-size: cover. Really want the fade effect.

Your suggestion seems to work just need the fade now to work.

10

So got my files all updated now the other thing wanted to know how to do was…

When you rollover one of the large image for example the Construction worker, I want an icon to fade in under the letters CCBS then when you rollover the doctor a different icon fades in etc and by default there will be no icon there until you rollover one. How easily is this to achieve?

Thanks,

Mike

11

Made a change to my design slightly instead of rollover and bw changing to another image can I have this timed.

For example right now if you go back to the URL when you rollover doctor it changes to the doctor image. Can I have it say after 3 seconds the construction changes to the doctor image then fades back to the construction and continues to do that. I want to do this four each of the four squares. Just fading from one person to another back to the original.

And also when you rollover a square say you roll over the construction/doctor square or whoever in the end will be in that square can I have ther message “Helping you move forward with life” change for each of the four different square and the “Helping you move forward with life” if default when your not rolled over anything if that makes sense.

Thanks,

Mike

12

Hi Mike,

I think you will need the help of one of our JS experts now as CSS alone can’t achieve the effects you require (although you could probably achieve the automatic image swapping using some complicated keyframes but you won’t be able to change the tagline). It would be better if you could tie it all up into one js/jquery routine.

I can move the thread to the JS forum if you think it more beneficial?

13

Thanks Paul,

I think I can use animated GIF for the pictures since each box will just be rotating between two people its the simpliest way to do it.

So really only thing I would need a hand with is when you rollover one the divs with person images the tagline uptop changes can just that be achieved via CSS?

14

Actually animated GIFS will not work for the pictures this is becoming quite frustrating thought it be simplier.

How can I achieve the automatic swapping with keyframes?

I’ll worry about the tagline afterwards.

15

I’m not sure it will be much help but here’s how to swap 4 images using keyframes :slight_smile:

16