Logo Positioning… a job for Z-index?

[Ian G]

I’m working with Drupal and I am getting a little bored with the boxy layout options that seem so prevalent in the themes available, so I am trying something new… and of course running into some issues.

First is what I am working with, I have two separate basic divs: Top Header (logo, site info, etc), and main content. Right now the two are stacked, one on top of the other. What I would like to do is to overlap a section of the main content over the header and allow the logo to spill out, breaking up the layout’s boxy structure.

The first image is what I have, the second is what I am shooting for. [attachment=1]Before.png[/attachment]
[attachment=0]After.png[/attachment]

I tried simply making the header div include the logo, made the logo a large png with transparency, then restricted the content area background to just the right side of the screen, thinking the header/logo would overflow into the content area and show through. The logo did drop into the content sidebar area, but instead of showing through the content div, the bottom was sliced off.

I’m not confident enough about my CSS to slice the logo up and tack one end in the header and the bottom in my content sidebar and have it be pixel perfect across browsers, and though I could negative margin the content up over the header, that seems like a bad idea as well. I was playing around with overflows, margins and paddings, but my mediocre css skills are not up to snuff to get the job done.

What approach should I take for something like this? Is there somewhere I could look to study and compare (read: thief a technique) or is this not even possible to do?

Thanks Gang!

[Ian G]

"Robskiwarrior" wrote:

I would avoid using negative values on margin and padding like the plague.

If I were you I would z-index it so it floats above the content section below, as you can just add it as the last HTML element in your header and it will be on top of everything anyway. Give your wrapper a position of relative, then position your logo with absolute and then it will not interfere with your other elements.

Hope that makes sense :)

PS: If you don’t want to worry about z-index at all, you can stick your logo right at the end of your HTML just before you close your wrap, make sure your wrap has a position of relative at least and then your logo absolute – it will again ignore everything and float over everything.

Good deal, I was tinkering with the z-index idea but I apparently wasn’t targeting the proper divs for positioning, because I couldn’t get it to work. I’m working from a pre-made starter base template, so I’ll have to dig around a bit more in there to see how they wrapped everything so I can get the position: fixed/relative CSS where it should be to float the logo. I haven’t used z-index before so I wasn’t sure if it wasn’t working because I had the CSS wrong or if I was misunderstanding the function of z-index entirely. Now I know it just me CSS skills that need sharpening. :D

Thanks Robskiwarrior!

[Author]

Posts