Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Sep 2007
    Posts
    809
    Thanks
    5
    Thanked 2 Times in 2 Posts

    Resolution Headaches

    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???

    Any advice would be greatly apprecaited.

    many thanks,

    greens85
    Attached Thumbnails Attached Thumbnails Resolution Headaches-1152x864.jpg   Resolution Headaches-1600x900.jpg  
    Last edited by greens85; 05-04-2010 at 01:31 PM.

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by greens85 View Post
    Whats can I do to accomodate both (and more) resolutions???
    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.

    Edit: Nevermind; looks like you uploaded them while I was typing.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    Regular Coder
    Join Date
    Sep 2007
    Posts
    809
    Thanks
    5
    Thanked 2 Times in 2 Posts
    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
    Last edited by greens85; 05-04-2010 at 01:43 PM.

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by greens85 View Post
    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:

    Code:
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    Regular Coder
    Join Date
    Sep 2007
    Posts
    809
    Thanks
    5
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Arbitrator View Post
    An example:

    Code:
    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'.

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by greens85 View Post
    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.)
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •