Your Opinion On Something Please

[-Dave-]

www.gamestyle.net

Ok, atm my site is optimized for 1024x768 browsers, and you see that this is the case by stretching the windows.

a result of this however is that on larger resolutions, i get alot of wasted space, especially at the bottom of the page, and on the right.

I have a couple of questions.

Firstly, do u think it would look better on the large res if the main content was center aligned (space on both sides not just right)

Secondly, should i allow the content box scrollers to extend further down on larger res screen, filling the page more?

Also, any other suggestions are welcome.

Site's been coded using XHTML Strict and CSS, the new sites been live for quite a while now. A few might remember the old one, as we are quite popular so no doubt it will be familiar to some of you UK base gamers!

thanks for any of your feed back.

Dave

Edited December 24, 2006 by -Dave-

[-Dave-]

Anyone have any feedback?

[jbrunt1990]

At the bottom of the page there is way too much wasted space. I think it would be better increasing to the now more popular 1280 x 1024 res as now people are getting 19" + LCD monitors as they are getting cheaper.

[AJKendall]

i like it, it's simple, colors work well, (a little plain maybe) but it's easy to navigate

only fault i have with it is that it's oushed into the top left corner

get it centered and it'll look a lot better

nice work :)

[-Dave-]

ta - was definately thinking of centering it - ill get on it 2moro.

as for the height, ill see what i can do bout geting it dynamically adjusting

[-Dave-]

ok i tired to center it but o no avail.

all 4 main columns are floated left, and wrapped in a surronding div.

i added margin-left: auto; margin-right: auto; text-align:center; to its css,

but they still justified left

[AJKendall]

if your using a wrapper for the lot then it should be simple, add the following id style to your stylesheet then give the surrounding wrapper div the id

#mainwrapper {

text-align: center;

vertical-align: top;

}

that should automatically center everything put into the div, so any content within this wrapper should be centered

[-Dave-]

all that did her center the text in the boxes - not the 4 boxes themselves

[Vidar]

margin: 0 auto;

That should do it for you :)

[-Dave-]

nah still nothing :s

[-Dave-]

OK i managed to center to frontpage, but only after specifying a width of 1024px.

here is what it looks like.

no qute sure if it looks better :s

[-Dave-]

okay how about the boxces shud i extend them down further?

[APH-Alex]

PNG file format for picture ftw, JPG ftl. :)

[CeruleanCowboy]

Dave,

I'd recommend you remove the overflow:auto; property from each column and let each extend down as far as it needs to. This way you don't have to worry about filling negative space at the bottom of the page.

Also, for the footer, try giving it a white background, thick (maybe 4px) gray border, using the same gray as your columns, and give it a specific width so it doesn't stretch across the window. As it is right now, the footer really stands out on the page and doesn't follow the same style rules you have setup within the page.

[-Dave-]

PNG file format for picture ftw, JPG ftl. :)

i usually do, but it wudda been 500k - a bit big reli.....

Dave,

I'd recommend you remove the overflow:auto; property from each column and let each extend down as far as it needs to. This way you don't have to worry about filling negative space at the bottom of the page.

Also, for the footer, try giving it a white background, thick (maybe 4px) gray border, using the same gray as your columns, and give it a specific width so it doesn't stretch across the window. As it is right now, the footer really stands out on the page and doesn't follow the same style rules you have setup within the page.

ta ill try the footer thing.

and on the columns thing, i don't want them extending past the viewport - ie no browser scroller, just extend on large resolutions. how wud i achieve this?

thanks

[CeruleanCowboy]

If you want everything to stay inside the viewport you'll have to use javascript. CSS doesn't work well with measuring the height of the window.

Here's something I whipped up which you can use. It's very rudimentary and doesn't determine the maximum height of any particular object based on the information contained within, but it'll get the job done. In the areas at the bottom, you just need to list the IDs of each column and the number of pixels less than the actual height you want them to be.

// resize() arguments:
// id = id of the object you would like to change the height of
// difference = number of pixels less than the height of the viewport you would like the object to be

function resize(id, difference){
	var setHeight;
	if (navigator.appName=="Netscape") {
		setHeight = window.innerHeight-difference;
	}
	if (navigator.appName.indexOf("Microsoft")!=-1) {
		setHeight = document.body.offsetHeight-difference;
	}
	setHeight += "px";
	document.getElementById(id).style.setProperty('height', setHeight, null);
}

window.onload = function(){
  resize('area1', 80);
  resize('area2', 90);
  resize('area3', 70);
}

window.onresize = function(){
  resize('area1', 80);
  resize('area2', 90);
  resize('area3', 70);
}

[Pox]

I suggest you lose the seperately scrolling content boxes in favour of just bars and a full-scrolling page - it will be much more scalable across resolutions and I find little scrolling boxes can be very annoying.

[CeruleanCowboy]

I suggest you lose the seperately scrolling content boxes in favour of just bars and a full-scrolling page - it will be much more scalable across resolutions and I find little scrolling boxes can be very annoying.

Definitely agree with you there.

[-Dave-]

thanks guys, i'll discuss these changes with my designer and see what we can do

[the evn show]

EDIT: I threw together this picture this morning but i guess I didn't hit post as I was still sitting here when I got home from work. Anyway, my comments are pretty much in-line with what the other people have said WRT scrolling, content boxes etc.

By removing the tiny boxes you would let me mouse scroll anywhere on the page, and you don't force me to try and hit 16 pixel wide target in the middle of screen where miss-clicking will take me to another page rather than letting me scroll. There's no reason this site can't scale with width, height, and font-size so this is a great opportunity to work in some usability while you're re-working your design anyway.

[-Dave-]

thanks ill get on it :)

[-Dave-]

Ok ive been through and hacked away at some of the CSS and so forth.

The site is now centered and does look better on large res.

Also, ive changed the copyright box to make it more inline with the rest of the sight.

On the subject of the scrolling containers, they have been kept for the mo as the grapics designer wants it still, at least until he can come up with a modified front page. at the moment, if i allowed them to extend, the middle section with the Featured article would be the same as it is now, and he wants them all the same height. he expect that change later.

thanks guys, any more comments welcome!