Responsive overlapping elements

[SkaarFace]

I’m building a site with an unusually large logo that they want displayed prominently on every page. I’ve decided to have the logo intersect with a large image at the top of the page in order to cut down on the dead space to the side of the logo, but I’m having a lot of trouble coming up with a good, responsive way to intersect the two elements.

Absolute positioning takes both elements out of the flow of the document and completely screws my layout, and it behaves very badly when the window is resized. Right now I have them relatively positioned with a negative top margin on my image, which is pretty close to the effect I want in a full browser window, but turns to absolute shit as soon as I start resizing anything.

So my plan is currently to make a bunch of media queries that change that top margin for every point where the layout breaks, but if there is a better, less hacky responsive way to do this sort of thing, I’d love to put it in my toolbox.

Here’s a pen that I think illustrates what I’m talking about: http://cdpn.io/wzmAf .

The image is a stand-in until I get some higher resolution graphics in, so in the final site it will be big enough to cover 100% of the width.

Also, while I’m soliciting help, I’m getting some weird white space between my sloganArea and nav elements that I can’t account for anywhere. I don’t have any margins or padding, so I expected that they would be nestled against one another, so if anyone has a solution to that problem, I would love to hear it.

Thanks.

[Paulie_D]

The whitespace is a result of default margin/padding.

If you select Reset from the CSS options…it goes away.

You should also remember that the only people who actively re-size browser windows are developers.

Find a few breakpoints that represent a fair selection of the likely options and that should be ample.

[wolfcry911]

Paulie’s correct – the whitespace is the default margin on the ul. I’d position the logo absolute and the second image I’d leave static:

http://codepen.io/wolfcry911/pen/KdJzb

you’re closing your images wrong – they should be self closing like a break tag (or not closed at all if you prefer, but I like the more stringent syntax.

as for being responsive, I’ve left the size of the logo alone, but you may want to think more about this. Resizing after 50% is less than 300px doesn’t allow much room for the slogan or menu…

[SkaarFace]

Thanks guys. Getting rid of the extra margin made the elements fit together more nicely, The logo resizing values were mostly there for testing. I’ll come up with more reasonable values after I’ve put up the rest of my content, and I’ll probably write a few media queries for some useful breakpoints.

[Author]

Posts