[Solved] Absolutely Positioned slider image mystery

[f7brian]

I am redesigning a site and am incorporating a responsive slider from woo themes. I like a site that incorporated it really great (www.swipely.com) BUT that site got redesigned recently and is no longer online: BUT I had downloaded some code already (whew!).

Here is a simplified page of the downloaded code (showing the effect I am trying to achieve):
http://f7digitaldesign.com/goal

What I thought was cool is how there’s additional elements: text and the people images that slide w/ the background images.
AND that their heads pop up above the b/g image top.

Here’s my current page I’m working on:
http://www.f7digitaldesign.com/working/

Also here’s a version that just links to a big monster CSS file from the downloaded site.
—The people show up and slide, but the heads still cut off and other stuff collapses etc. (Ugh!)
http://www.f7digitaldesign.com/working2/

I haven’t been able to ascertain even after hours and days of study where the CSS is that is getting this done. One difference is the use of a body class applied to all on the page. But I still can’t seem to change things when I add it in.
I’ve fiddled w/ z-index and -margins, but all to no avail.

Thanks for any help on this combat quagmire.

[f7brian]

Compare the people images in

http://f7digitaldesign.com/goal
&
http://www.f7digitaldesign.com/working2/

The first shows their heads popping above the sliding background on top of the fixed header background.

I can’t replicate that in the second link.

[f7brian]

That was very good suggestion, I think I’m close now! I disabled all of them, even noticing one in-line styling of that attribute!

But it still is not fixing it. However, I can fix it for a moment in Firebug — The place where there’s inline styling of it for some reason duplicates and shows in 2 lines. When I edit it out in Firebug all “overflow: hidden” finally gets turned off! So, here’s a new link w/ no overflow: hidden anywhere.
http://www.f7digitaldesign.com/working2a/

Is there such a thing as “ghost code”? cause, it only shows up in firebug! Weird.

And about the collapsing thing If you compare
http://www.f7digitaldesign.com/working/
&
http://www.f7digitaldesign.com/working2/

you’ll notice the blog doesn’t start till the beige background, but in “2” it collapses all that white area and some content goes behind my footer.

[f7brian]

Thanks for that solve on the main-container & footer-container, I guess the needless absolute position pulled it out of the document flow.

But I’m not sure what you mean by a bird’s eye view.

Also do you know how to get rid of that CSS that is getting generated by script?

Thanks again!!

[f7brian]

No worries! I made some good progress here.

Thanks again.

[Author]

Posts