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
    New Coder
    Join Date
    Dec 2006
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    website in different resolutions

    i am making a website:

    http://www.karnov.net/juggle/

    im pretty happy with the way it looks in firefox 2.0, 1280x800
    i want to make it compatible with 800x600 and higher.

    so, i thought a good idea would be to change all of the absolute pixels to percents. that messes up a lot of things (try 'restoring' the window, so its not full screen, and scale it down to a smaller box... everything gets put in the wrong place and looks awful).

    so, unless there's a way around this, i want to use absolute pixels, but i don't know how i can do that. if i make it for 800x600, then there will be too much empty space in 1280x800, and if i do the reverse, it will truncate things.

    is there any to say in the html "hey, im making this page for 1280x800, so if the user is using a different resolution, scale to fit his screen!"?

    if not, what can i do to ensure maximum compatibility with a variety of resolutions?

    any help is greatly appreciated!!
    thanks!

    jeff

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Here is a pretty cool presentation that covers most resolutions pros and cons.

    Or you could try and adapt this into something you can use.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Dec 2006
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thanks for the info, they are informative!
    however, i don't think it quite solves my problem.

    i don't quite like the dynamic re-sizing from the first link, it brings about some problems on my page. i'd like to go with the 800x600 fixed thingy, but the other site doesnt really explain how.

    i uploaded a new version of the site that looks better in both firefox and IE6, but still has some problems.

    a big issue: on re-sizing the window, the iframe disappears (if the window gets too small). i can't figure out why!

    and the margins are still fixed, so they appear in all resolutions. basically, i want to keep the different containers (title, menu, main) fixed sizes because re-sizing them screws things up. but i want the red margins to reduce to 0 as the resolution goes to 800x600. the larger the resolution, the bigger the margins. if i try margin: auto, it will move everything over to the left.

    suggestions?

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by iamjeff View Post
    a big issue: on re-sizing the window, the iframe disappears (if the window gets too small). i can't figure out why!
    I would not use an i-frame there. I think it would be easier to style text placed in the div like normal... is there a specific reason to have it?

    and the margins are still fixed, so they appear in all resolutions. basically, i want to keep the different containers (title, menu, main) fixed sizes because re-sizing them screws things up. but i want the red margins to reduce to 0 as the resolution goes to 800x600. the larger the resolution, the bigger the margins. if i try margin: auto, it will move everything over to the left.

    suggestions?
    Place the entire site in a center wrapper. Like this.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Dec 2006
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thanks so much!!
    this helped immensely.

    i tried using a wrapper initially, but removed it when i added body {}

    i used the iframe because i didn't know what else to use. the content in the iframe is dynamic and depends on what link you click on in the menu. if i did it without an iframe, wouldn't each page have to have the layout wrapped around it?

    i feel there must be some css/html way of doing things, such as http://www.alistapart.com/articles/practicalcss/
    where you click on a topic on the right and it loads information in the content div. it's an entirely new page, but since the topics column doesn't reload, it must be separate somehow... i can't figure it out from the source, which looks like it has the content built right in.

    argh.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    QUOTE]i tried using a wrapper initially, but removed it when i added body {}[/QUOTE]

    I use the body to specify text-align:center which centers everything, also to give a background color.

    Then the wrapper is centered with margin: 0 auto; and that's where the size ov the content, the borders...everything else comes from.

    if i did it without an iframe, wouldn't each page have to have the layout wrapped around it?
    Yes.

    http://www.alistapart.com/articles/practicalcss/
    where you click on a topic on the right and it loads information in the content div. it's an entirely new page, but since the topics column doesn't reload, it must be separate somehow... i can't figure it out from the source, which looks like it has the content built right in.
    With well written code it re-loads so fast you don't realize that it is a new page, it only looks like the content is all that changes.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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