...

View Full Version : Resolution Headaches



greens85
05-04-2010, 02:27 PM
Hi All,

I have my website navigation set to 990px but I'm having problems getting it to display in different resolutions:

In my resolution the navigation is chopped, along with the search box being chopped and things are squeezed close together (attached - 1152x864.gif)

In a higher resolution (attached - 1600x900.gif) there is almost too much space...

Whats can I do to accomodate both (and more) resolutions??? :confused:

Any advice would be greatly apprecaited.

many thanks,

greens85

Arbitrator
05-04-2010, 02:33 PM
Whats can I do to accomodate both (and more) resolutions??? :confused:It looks like your images are missing. min-width and max-width may be what you're looking for though. Those allow you to set a range of optimal widths that your your document is allowed to display at.

Nevermind; looks like you uploaded them while I was typing.

greens85
05-04-2010, 02:36 PM
Yeah sorry,

Forgot to add them the first time round!

How would I incorporate those CSS values in order to allow this to be suitable on both resolutions (and all other resolutions for that matter).

Forgot to add a link to the site so you can check html/css etc. www.educationvacancies.com

Arbitrator
05-04-2010, 02:55 PM
How would I incorporate those CSS values in order to allow this to be suitable on both resolutions (and all other resolutions for that matter).An example:


div#container { min-width: 60em; max-width: 75em; }

(You can use pixels too, of course.)

If you want substantially different designs based on resolution, then you'll need to use something like CSS Media Queries or ECMAScript though.

greens85
05-04-2010, 03:06 PM
An example:


div#container { min-width: 60em; max-width: 75em; }

(You can use pixels too, of course.)

If you want substantially different designs based on resolution, then you'll need to use something like CSS Media Queries or ECMAScript though.

How would using min-width and max-width have an impact on the look of the navigation bar on my site:

For example as you will of seen from the screenshots in my resolution the navigation bar wraps (as there is not enough room) in the higher resolution the navigation bar has too much space...

If I say set #navigation{ max-width:990px } I don't understand how this would stop my navigation area 'doubling up'.

Arbitrator
05-04-2010, 07:00 PM
If I say set #navigation{ max-width:990px } I don't understand how this would stop my navigation area 'doubling up'.You would use min-width on the relevant navigation container so that a minimum amount of space is reserved for the navigation controls. If you just want one fixed width, then simply use width.

(It looks like you bypassed the issue by simply moving the right-hand text into a different area though, so I guess it's a moot point.)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum