Button Position Relative to Background

[ponyack]

Hi,

On this site there are 3 buttons that I would like to scale with the background http://brandyderr.com/

Is it possible with CSS or jQuery to keep the button position as the site scales?

If someone has an idea or could point to a tutorial that would be great.

Thanks,

John

[Shikkediel]

It would probably be easiest to transform: scale() the whole thing. Since it only takes an integer value, I think you’d need some JS to determine the exact factor.

[Beverleyh]

It’s a simple layout so how about remaking with relative units instead of fixed pixels. Moving forward, this might be of interest to you https://css-tricks.com/building-resizeable-components-relative-css-units/ (a good read with loads of examples)

[ponyack]

Hi,

Thanks for the replies. I’ll take a look at the link regarding resizeable components with relative CSS.

And through the “scaling/resizing” would the buttons retain their position relative the Logo that they are on top of?

Thanks

[Shikkediel]

Beverley’s suggestion is a better idea because it won’t need any JS. Regarding your question, the answer for both approaches would be affirmative.

[ponyack]

Great, thanks for all the help

[Paulie_D]

Gotta say my first thought was that the whole logo / button is probably an ideal opportunity for an SVG or Canvas rather than positioning links / buttons on top of an image.

[ponyack]

Hi,

I am reading up on the canvas and resizable components. And while its making sense I am still at loss as to how I can position the buttons on the page and have them scale with the logo. And my efforts to find a post or tutorial hasn’t yielded any results.

Sorry if I am missing something but this is all relatively new for me.

[Alex Zaworski]

If I’m understanding everything correctly canvas seems like it’d be tough here. If it were me, I would export the logo with the buttons already drawn as an SVG, drop it inline into your document, and add event listeners/hover styles on the buttons by assigning IDs/classes to them. Then you can just scale it like you would an image and it’ll all work fine.

There are quite a few good articles on SVG on this site (and elsewhere) so if you’re not familiar at all I’d spend some time reading up.

That’s all assuming you have access to an Illustrator (or comparable) file for the logo— might be outta luck on that front otherwise.

Here’s a super simple demo (without any click handlers).

[ponyack]

This is exactly what I am looking for. And yes, I have access to the Illustrator and this website is something that I designed so source files are no problem.

That said, I have read up an SVG and I have been using them with increasing frequency.

[Author]

Posts