[Solved] img float in front of sliding pics & stay there!

[Kandi]

So, I would like for the black swirl .png image to float in front of the sliding picture gallery. It looks how I want when the browser is in full screen but when I make the window smaller this floating image does not stick where I want it to. Please help.

http://madinahairdesigner.com/

[Paulie_D]

The first thing to do would be to make sure the black #contactbar moves up as the slider gets smaller and lose the white gap.

.fotorama {
height: 530px; /* remove this from line 65 of your styles.css */
}

[Kandi]

Thanks Paulie……….ok. Gap removed.

http://madinahairdesigner.com/

[Paulie_D]

Ok…you still need to think about centering the slider because on my monitor it leave a huge white gap on the right hand side.

That may give you some issues as it looks like some of your images aren’t large enough to cover really wide monitors.

Once we have that resolved we can think about positioning the ‘curl’..but I do think you will have to move it into another div…I’m just not sure which one yet.

In fact, it might back more sense to take it out of the HTML altogether and stick it in as a background to a pseudo element…that would actually be somewhat easier I think.

[Kandi]

ok. so I’ve taken the “floatinghair” out of the html and put into psuedo element.

As for the images in gallery. They are pretty large 1600 x 536, which I thought is bigger than dimensions needed for the widest screen. I have a widescreen browser (16in wide) and its showing how I want when its full screen like in the pic below:

http://i36.photobucket.com/albums/e25/kandianne/correct.jpg

[Paulie_D]

I’m using a 21″ monitor myself (actually two of them) but if you are happy then that’s fine.

[Kandi]

Well I would like to make it look right on most or all browsers. Do you suggest I make the images even larger? If not, don’t worry about this part. I will play around with it and research some more. I’m sure you can notice i’m new to this and have much to learn.

For the “floatinghair”, how do you think I can go about positioning it so it will stay in the right place?

Thanks for your all your help and patience!

[Paulie_D]

What I meant by using a pseudo-element wasn’t for the #floatinghair div, I was imagining it either as a pseudo-element of the #contactbar or of the div class="fotorama__stage" . Then you can lose that #floatinghair div from your HTML altogether.

I’m inclined to wards the latter option because you can then just position it at the bottom, set the height/width as a percentage of the ‘parent’, use the image as a background with suitable background size and it should scale automatically…I think.

Obviously I can’t do that with developer tools so you might want to test it out with a reduced case in Codepen.io first.

If anyone else is reading...does that make sense to you or am I overthinking this?

[Kandi]

OK! Finally got it :)

Thanks for all your help!

http://madinahairdesigner.com/

[Paulie_D]

Excellent…glad you got it worked out.

[Author]

Posts