Solved

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

Posted on 2015-01-29
2
444 Views
Last Modified: 2015-01-30
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
Comment
Question by:doug s
2 Comments
 
LVL 42

Accepted Solution

by:
David S. earned 500 total points
ID: 40579654
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
 
LVL 4

Author Comment

by:doug s
ID: 40580175
Thanks Kravimir this is a great approach I didn't think of. Thanks for the tips.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Find out what you should include to make the best professional email signature for your organization.
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…
The purpose of this video is to demonstrate how to set up an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now