Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

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

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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Find out what you should include to make the best professional email signature for your organization.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

856 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