Need Help With Div Behind Logo (trying to avoid using (-'s)

Design help General
1

Shared Link: https://preview.webflow.com/preview/oxford-cabinet-co?preview=9c0027f3744abf9dcedb3148a388ebef

Hey Team - I hope everyone is doing well. I have a easy concept that I need help with. I am trying to create a container element and place the navigation inside this element along with the logo. I am trying to get the logo to sit on top of the container element so that it is above it and positioned literally on-top of it. I can’t seem to wrap my brain around achieving my goal. Could you guys please take a look at it and give me any advise please. I am trying to avoid ( - ) negative positioning as this does not work well with some browsers. Also, when I tried to fit the logo outside of the container it did rest on the container as I wanted, but when previewing the site the logo never remained in the position I wanted it to. It moved and shifted around - that is why I feel it is best that it lives within the main container element. - Maybe I am wrong here?

@sabanna, @PixelGeek, @cyberdave - or anyone else is welcome!

Sean

1358×774 28.1 KB

1360×775 28.1 KB

2

Hi @seank, it looks like you found some other solution already. Or you still need a help?

3

I kinda need help. My question now: is it ok to make a design using negative increments with padding, spacing, etc or will that mess up the look of it on some browsers.

My client likes the way they have the logo here for example.

http://6squarecabinets.com/

4

If you will give container position:relative and to logo - position:absolute, then you can easy adjust logo with top/bottom/left/right positioning, even if it will be negative. Anyway, it will be better than negative margins/paddings.

1 Like
5

I don’t mean to ask a lot from you, but could you supply a fast demo please :stuck_out_tongue:

6

So as long as any container is relative, and the thing inside is absolute - negative margins will not look funky across the other common web browsers?

7

It is how I would do that: https://drive.google.com/file/d/0B-7cg8BSq1Z_TU5idGxIYkVSb2s/view?usp=drivesdk

It is not margins, it is absolute-positioning.

8

Great Video - thank you so much. However, I really didn’t know you could use negative positioning. Does this pose an issue with cross browser support?

9

Honestly, I didn’t check much. But most issues that I saw before, was caused by margins, not positioning. Hope you can check and tell us more :wink:

10

The way I did it, is it wrong? Do you think it will cause issues?

11

I don’t think you did it wrong. :slight_smile:

1 Like
12

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.