• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 482
  • Last Modified:

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

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

Example PSD
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.
0
doug s
Asked:
doug s
1 Solution
 
David S.Commented:
Firstly to your three specific questions:

1) It's best to avoid naming classes based on how they're intended to look, e.g. "alignleft" or "blue-bar". Would you please explain how you made the choice of using an image for the dark green bar?

2) z-index only applies to "positioned" elements. You need to give an element "position:relative", "position:absolute", or "position:fixed" for it to do anything. As to only working on one at a time, I can't really comment as it's working on neither currently.

3) An ancestor with the class "avada-row" has a max-width of 1100px. Trying to have an element that's 100% of the viewport width from within other elements that aren't gives me headaches too.

Now on to what you're trying to achieve. There's more than one way to do that. The simplest is to put a wrapper element, e.g. a <div>, around the image and the two headings and then float the image left and give it a margin on each side. A background color would then be applied to the new wrapper.

Another way is to replace the margin between the headings with some padding and give them a background color.

A third way involves giving the headings and paragraphs a left margin and then absolutely position the image.

P.S. Headings shouldn't be used out of order like that. Use CSS to style them however you like.
0
 
doug sAuthor Commented:
Thanks Kravimir this is a great approach I didn't think of. Thanks for the tips.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now