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.
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 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.