Troubleshooting z-index

That worked for the directory…. thanks. When I placed it under branding and header, the logo took up the full 1000px width of #page (even if I specified smaller dimensions for the logo) and the header was pushed down below the logo. It also didn’t flow outside the left boundary of #page

So I put it in #wrapper in order to have it flow outside the width of #page. When I do that, the horizontal position looks good, but it still bumps the header below the logo.

I really appreciate the time you’re taking with me on this!

Okay, we can sort out the CSS later but first we need to put it in the right HTML position.

So, try putting the <img> element (of your logo) just before the <hgroup> element.

Ok… it’s there now.

Okay, let’s add this CSS in your Child Theme style.css first;

#branding img {
 width: auto;
}

yep…

Now add “position: absolute” to that style, as exampled;

#branding img {
 width: auto;
 position: absolute;
}

yikes! I did that…..

Whoa!
Okay we need to add an ID to your <img> element, so we can specifically target that and not end up targeting any other images through CSS.

Can you add an “id” of “logo”?
Exampled;

<img id="logo" src="/wp-content/themes/empoweringlife/images/2012LogoNoBackOpt.png" alt="Empowering Life" alt="Empowering Life"/>

Ok

Now in that CSS we added, we need to replace, “#branding img” with “#branding #logo”, exampled;

#branding #logo {
 width: auto;
 position: absolute;
}

Then we can add some positioning to it, using the top and left properties;

#branding #logo {
 width: auto;
 position: absolute;
 left: -125px;
 top: -25px;
}

Thank you!!! I’m working on another site with a similar placement issue. It’s not in the upper left corner, but on the right side about halfway down, so I may have issues with placement under all of the post data, etc. It’s a large spiral that should go in the background and overflow on the right side. Would you mind helping me with that as well, or should I start another topic?

I’m new to posting for help, so I’m not entirely sure about the etiquette of it all ??

As long as you throw a good attempt at it, learning from this thread, then yes you can create a new thread on the issue. I also recommend using Google Chrome’s developer tool, or Firebug equivalent, for adding CSS styles to the browser (temporarily) which makes it easier to see whether a style will or will not work.

Thanks for explaining that – it makes sense. And thank you again for your help. Hopefully I’ll be able to figure this one out myself!