Solved

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

Posted on 2015-01-29
2
434 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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

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.
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

758 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

20 Experts available now in Live!

Get 1:1 Help Now