Move buttons on responsive design in line with background image arrows

HTML & CSS
1

i had a project which i thought was sorted over xmas, until the client wanted a change!

so basically what i had was a row of buttons that through css where lined up equally spaced across the top of the page, which worked really well, but then the client decided that the people using it needed to know where they are workign, as if they couldnt work that out for themselves!

Here is the link to the project:

http://www.lorhnm.co.uk/liverpoolst/main.php

And straight away you should see what I mean.

Ive tried all sorts and made the background move with the screen resolution, but wondered how i can get the buttons to stay in place.

Im wondering if i could use like a quarter spacing working with percentages, but need some advice in honesty, as it seems a starnge issue, when the way it worked was fine.

Thanks

2

Not sure if this way is going to work for me now, as just tried it on my iphone and the background rides up the screen and is just not going to work.

Before until the client wanted the changes, all was good on iphone as I used.


body{ 
 min-height: 100%;
 font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 
 font-weight:bold;
 text-align:center;
 background-image:url("../images/hazardbg.png");
 background-size:cover;
 background-attachment:fixed;
 -ms-background-position-x:center;
 -ms-background-position-y:center;
 -ms-behavior: url(css/backgroundsize.min.htc);
}
3

Hi,

I don’t think you are going to get anything working with the current approach I’m afraid.

It won’t be possible to tie elements to points on that background image especially when using background-size to shape the image.

The options I see are that you abandon the resizing background image and use a series of fixed sized images (via media queries) that you can then easily overlay with the the circles at the appropriate points with absolute positioning within a relative context. You can then substitute smaller images and smaller circles at appropriate break points to catch smaller devices.

Alternatively add all the circles to the image to start with and create a responsive image map. This would work for most screensizes but you would still have to create a smaller version for mobile as the text would be too small to read.

I don’t see any other approach working apart from perhaps an interactive image map where your circles are not positioned on the map but when you roll over them the corresponding section on the image will light up. This is often seen on regular country maps where the country outline is highlighted by hovering over a menu of country names. However, I don’t see any that are responsive apart from this one but it doesn’t have a legend as such to click.