Solved

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

Posted on 2015-01-29
2
464 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
[X]
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
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
The purpose of this video is to demonstrate how to Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Click on Too…
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…

688 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