Link to home
Start Free TrialLog in
Avatar of doug s
doug sFlag for United States of America

asked on

CSS - Help with Image Floats and Z-index for Wordpress page

I'm trying to get my page to look as such:

User generated image
URL: http://7pwc.moshpitdigital.com/new/

This is what my html looks like:

[rev_slider about]
<div id="about-header"><img src="http://7pwc.moshpitdigital.com/wp-content/uploads/about-meet-our-docs-seven-peaks.jpg" alt="Meet the staff at Seven Peaks Medical and Wellness Center"></div>
<div id="about-content">
<div id class="staff-pics2">
<img class="alignleft size-medium wp-image-149" src="http://7pwc.moshpitdigital.com/wp-content/uploads/SP_Staff_Dr_Wells.jpg" alt="dr-jon-wells-seven-peaks-medical-wellness-93401" width="280" height="400" />
<img class="staff-header" src="http://7pwc.moshpitdigital.com/wp-content/uploads/staff-pic-header.jpg"/>
</div>
<div class="staff-bio2">
<h3>Dr. Jon Wells</h3>
<h5>Founder, Chief Chiropractor</h5>
<p>Welcome to Seven Peaks Wellness and Medical, where my vision for providing quality health care is met with a professional, knowledgeable, well trained team and a warm environment for your entire family. I am Dr. Jon Wells and my journey here began with a board certified degree from Southern California College of Chiropractic where I graduated with honors in 1990.</p>
</div>
</div>

Open in new window


My CSS:

.staff-pics2 > img {
margin-top:45px;
z-index:1000;
}

.staff-pics2 > img.staff-header {
z-index:1
float:left;
margin-bottom:-105px;
}

Open in new window



Couple questions:

1) Am I organizing/referring to my div classes correctly? I'm trying to assign the green header with it's own class I can have this appear under the staff photo. Not sure if doing this correctly.

2) I've been playing with the z-index in Firebug and I'm unable to set z-index values individually for the staff photo (.staff-pics > img) and the green header (.staff-pics > img.staff-header). It's only allowing one or the other.

3) I have the class .about-header which is giving me full width "Meet the Doctors & Staff" image on the this page: http://7pwc.moshpitdigital.com/about-us/, but not the new one. http://7pwc.moshpitdigital.com/new/

Any help appreciated.
ASKER CERTIFIED SOLUTION
Avatar of David S.
David S.
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of doug s

ASKER

Thanks Kravimir this is a great approach I didn't think of. Thanks for the tips.