3 replies to this topic

[Lemon]

Hello fellow nerds and lovely people.
 

I'm building myself a website. It's fairly straightforward, except for the main page, where a minor design quality is turning into a huge beast of annoyance. I'm hoping someone here can confirm my idea of how to solve it, or present an easier method.

 

THE PROBLEM

Here's the page in question. 

The issue here are the buttons coming off the main image. I can position them on top of the main center image easily enough, but if someone resizes their browser window, everything flies off in chunks. Whether it's % or pixels, nothing seems to be able to preserve the spacing on these while keeping the main image centered. 

 

THE SOLUTION...?
JQuery seems to be the right answer.

However, how to do this is still making my head spin. I'm fairly new to all of this as well, so while I've got a decent background in Mathematics, knowing exactly what I can get away with code is elusive.

The main image is currently fine; it stays in the center as the browser is resized.

 

Let's say the whole thing, buttons + main image is 900 pixels wide. Then, I can set the buttons in the correct position at a browser 1960 pixels wide. Then, I'd set up a script that would;

 

1. Function once when the browser is opened and anytime it's resized.

2. Set variable(size) = to the browsers size

3. Set variable(move) = (1960 - (size))

4. Move the buttons (move) to the left. 

 

And then set a min size for around 920px. 

 

Anyone know how to code that? Efforts on my part thus far have been almost entirely fruitless. 

Help!

Edited by Lemon, 25 September 2013 - 07:17 PM.

[Saffith]

The links and center image are separate? Why not make them one image and set it up as an image map?

[Lemon]

I'd like the little flags to highlight on a mousehover; which I'm accomplishing by creating a separate image which colors match the little header icon at the top.

'because it's prettier'

[Lemon]

	$(document).ready(function){
		var xMove = window.width - 1000
		if(window.width > 1000){
			$('.mobile').animate({
				left: "+=" + xMove
			})
		}
	}
	$(window).resize(function){
		var xMove = window.width - 1000
		if(window.width > 1000){
			$('.mobile').animate({
				left: "+=" + xMove + 
			})
		}
	}

I think that should work, but it doesn't. 

*fistwaggle*