Tables and screen resolution

Discussion in 'HTML' started by Maxi, Apr 7, 2006.

  1. Maxi

    Maxi Guest

    I have a 30X16 cells table in my html page. Table height and width are
    set to 100%. I have set size of every cell inside the table to 24
    pixel.

    When I open the html page in maximize state in either resolution 800 X
    600 or 1152 X 864 it takes up the entire explorer size.

    In screen resolution 800 X 600, if I insert a pictures of 24 X 24 pixel
    in the cells it takes up the entire cell size (ideally it should as the
    cell size is also 24 X 24 pixel) and If I change the screen resolution
    to 1152 X 864 the picture is there but it does not take up the entire
    cell size. Little bit of surrounding area is visible.

    I know the reason, when you change the screen resolution, it has more
    pixels to display hence the problem.

    What I want to know is, if I use pictures of 50 X 50 pixels into those
    tiny 24 X 24 pixel cells, can id grow and shrink automatically
    detecting the screen resolution?

    Note:
    1. I want each cell size to be 24 X 24 pixels. I Cannot modify this
    requirement.
    2. I want the table height and width set to 100%. Cannot modify this
    either.

    Is there any way out? I hope I have explained my problem properly.
     
    Maxi, Apr 7, 2006
    #1
    1. Advertising

  2. Maxi

    Els Guest

    Maxi wrote:

    > I have a 30X16 cells table in my html page. Table height and width are
    > set to 100%. I have set size of every cell inside the table to 24
    > pixel.


    Contradicting on any other window width than 30 x 24 = 720pixels.

    > When I open the html page in maximize state in either resolution 800 X
    > 600 or 1152 X 864 it takes up the entire explorer size.


    Because you set width to 100%.

    > In screen resolution 800 X 600, if I insert a pictures of 24 X 24 pixel
    > in the cells it takes up the entire cell size (ideally it should as the
    > cell size is also 24 X 24 pixel) and If I change the screen resolution
    > to 1152 X 864 the picture is there but it does not take up the entire
    > cell size. Little bit of surrounding area is visible.


    Of course. You told the table to take up the entire width available.
    on 1152px width, this is 1152:30=38.4 pixels per cell. Wider than
    24px.

    > I know the reason, when you change the screen resolution, it has more
    > pixels to display hence the problem.


    So you understood that then :)

    > What I want to know is, if I use pictures of 50 X 50 pixels into those
    > tiny 24 X 24 pixel cells, can id grow and shrink automatically
    > detecting the screen resolution?


    No, it will be minimum 30x50=1500px wide, and maximum whatever wider
    window you have.

    > Note:
    > 1. I want each cell size to be 24 X 24 pixels. I Cannot modify this
    > requirement.


    Then you should not put 50x50px images in them.

    > 2. I want the table height and width set to 100%. Cannot modify this
    > either.


    Then you shouldn't want the cells to be only 24px wide.

    > Is there any way out? I hope I have explained my problem properly.


    AFAICS you've only explained that you want something impossible.

    Reading between the lines, I'm suspecting you might want to have
    *background* images in the table cells, which don't have to be
    entirely visible, depending on the size of the cell?

    Or are you trying to resize images in the browser?

    --
    Els http://locusmeus.com/

    Now playing: Emerson, Lake & Palmer - Still... You Turn Me On
     
    Els, Apr 7, 2006
    #2
    1. Advertising

  3. Maxi

    Maxi Guest

    Exactly what I thought.

    One question. If I remove the 100% table height width criteria, then on
    800 X 600 screen resolution, it will take up the entire browser window
    and if I chang the resolution to 1152 X 864, the table will appear in
    the center leaving extra space in the background. Right? If yes, how
    can I avoid this?

    Is there no way (may be javascript) to detect the system's screen
    resolution first and accordingly resize the pictures?
    For instance If i have pictures of 50 X 50 pixels then,
    If screen resolution is 800 X 600, resize it to 24 X 24
    if screen resolution is 1280 X 720, resize it to 32 X 32
    if screen resilution is 1152 X 864, resize it to 40 X 70
     
    Maxi, Apr 7, 2006
    #3
  4. Maxi

    Els Guest

    Maxi wrote:

    > Exactly what I thought.
    >
    > One question. If I remove the 100% table height width criteria, then on
    > 800 X 600 screen resolution, it will take up the entire browser window
    > and if I chang the resolution to 1152 X 864, the table will appear in
    > the center leaving extra space in the background. Right?


    "in the center": no, only if you told it to.
    "leaving extra space": yes, obviously.

    > If yes, how
    > can I avoid this?


    Avoid what exactly?

    > Is there no way (may be javascript) to detect the system's screen
    > resolution first and accordingly resize the pictures?
    > For instance If i have pictures of 50 X 50 pixels then,
    > If screen resolution is 800 X 600, resize it to 24 X 24
    > if screen resolution is 1280 X 720, resize it to 32 X 32
    > if screen resilution is 1152 X 864, resize it to 40 X 70


    I don't know - I don't do JavaScript.

    --
    Els http://locusmeus.com/

    Now playing: Emerson, Lake & Palmer - Knife Edge
     
    Els, Apr 7, 2006
    #4
  5. Maxi

    Maxi Guest

    > > One question. If I remove the 100% table height width criteria, then on
    > > 800 X 600 screen resolution, it will take up the entire browser window
    > > and if I chang the resolution to 1152 X 864, the table will appear in
    > > the center leaving extra space in the background. Right?

    >
    > "in the center": no, only if you told it to.
    > "leaving extra space": yes, obviously.
    >
    > > If yes, how
    > > can I avoid this?

    >
    > Avoid what exactly?


    Avoid having extra spaces surrounding the table if the screen
    resolution is high.

    >
    > > Is there no way (may be javascript) to detect the system's screen
    > > resolution first and accordingly resize the pictures?
    > > For instance If i have pictures of 50 X 50 pixels then,
    > > If screen resolution is 800 X 600, resize it to 24 X 24
    > > if screen resolution is 1280 X 720, resize it to 32 X 32
    > > if screen resilution is 1152 X 864, resize it to 40 X 70

    >
    > I don't know - I don't do JavaScript.


    No problem, I will post it in Javascript forum.
     
    Maxi, Apr 7, 2006
    #5
  6. Maxi

    Els Guest

    Maxi wrote:

    >>> One question. If I remove the 100% table height width criteria, then on
    >>> 800 X 600 screen resolution, it will take up the entire browser window
    >>> and if I chang the resolution to 1152 X 864, the table will appear in
    >>> the center leaving extra space in the background. Right?

    >>
    >> "in the center": no, only if you told it to.
    >> "leaving extra space": yes, obviously.
    >>
    >>> If yes, how
    >>> can I avoid this?

    >>
    >> Avoid what exactly?

    >
    > Avoid having extra spaces surrounding the table if the screen
    > resolution is high.


    You're not seriously asking if you can put an object of 720pixels wide
    in a frame of 1152pixels wide and make it have no space surrounding
    it?

    --
    Els http://locusmeus.com/

    Now playing: Emerson, Lake & Palmer - Tank
     
    Els, Apr 7, 2006
    #6
  7. Maxi

    Jim Higson Guest

    Maxi wrote:

    >> > One question. If I remove the 100% table height width criteria, then on
    >> > 800 X 600 screen resolution, it will take up the entire browser window
    >> > and if I chang the resolution to 1152 X 864, the table will appear in
    >> > the center leaving extra space in the background. Right?

    >>
    >> "in the center": no, only if you told it to.
    >> "leaving extra space": yes, obviously.
    >>
    >> > If yes, how
    >> > can I avoid this?

    >>
    >> Avoid what exactly?

    >
    > Avoid having extra spaces surrounding the table if the screen
    > resolution is high.
    >
    >>
    >> > Is there no way (may be javascript) to detect the system's screen
    >> > resolution first and accordingly resize the pictures?
    >> > For instance If i have pictures of 50 X 50 pixels then,
    >> > If screen resolution is 800 X 600, resize it to 24 X 24
    >> > if screen resolution is 1280 X 720, resize it to 32 X 32
    >> > if screen resilution is 1152 X 864, resize it to 40 X 70

    >>
    >> I don't know - I don't do JavaScript.

    >
    > No problem, I will post it in Javascript forum.


    You could do this by using DOM to change the width/height of the <img> tags,
    but the results would look awful since most browsers don't do scaling very
    well (they use nearest neighbour algorithm, which looks bad). I suppose you
    could keep pre-scaled images at certain sizes on the server, and change the
    src attribute to link to the size you want.

    Remember, screen size only really matters if the browser is fullscreen.

    If you want truly scalable images, the only option at the moment is SVG, but
    support is only there in a few browsers.

    --
    Jim
     
    Jim Higson, Apr 7, 2006
    #7
  8. Maxi

    Matt Clara Guest

    "Maxi" <> wrote in message
    news:...
    > I have a 30X16 cells table in my html page. Table height and width are
    > set to 100%. I have set size of every cell inside the table to 24
    > pixel.
    >
    > When I open the html page in maximize state in either resolution 800 X
    > 600 or 1152 X 864 it takes up the entire explorer size.
    >
    > In screen resolution 800 X 600, if I insert a pictures of 24 X 24 pixel
    > in the cells it takes up the entire cell size (ideally it should as the
    > cell size is also 24 X 24 pixel) and If I change the screen resolution
    > to 1152 X 864 the picture is there but it does not take up the entire
    > cell size. Little bit of surrounding area is visible.
    >
    > I know the reason, when you change the screen resolution, it has more
    > pixels to display hence the problem.
    >
    > What I want to know is, if I use pictures of 50 X 50 pixels into those
    > tiny 24 X 24 pixel cells, can id grow and shrink automatically
    > detecting the screen resolution?
    >
    > Note:
    > 1. I want each cell size to be 24 X 24 pixels. I Cannot modify this
    > requirement.
    > 2. I want the table height and width set to 100%. Cannot modify this
    > either.
    >
    > Is there any way out? I hope I have explained my problem properly.
    >


    Just don't set the table width, leave it blank, and your cells and their
    content will determine the width of the table. You can't both have the
    table at 100% and not have it fill the screen. If you really need it
    something like that, nest your table with cells inside of a single celled
    table set to 100% width.

    --
    Regards,
    Matt Clara
    www.mattclara.com
     
    Matt Clara, Apr 7, 2006
    #8
  9. Maxi

    Toby Inkster Guest

    Jim Higson wrote:

    > You could do this by using DOM to change the width/height of the <img> tags,
    > but the results would look awful since most browsers don't do scaling very
    > well (they use nearest neighbour algorithm, which looks bad).


    Opera uses a slightly better algorithm, but it's still not as good as
    you could do in an image editor.

    > I suppose you could keep pre-scaled images at certain sizes on the
    > server, and change the src attribute to link to the size you want.


    Or have the server generate scaled images as required. (And cache them.)

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
     
    Toby Inkster, Apr 7, 2006
    #9
  10. Maxi wrote:

    > Is there no way (may be javascript) to detect the system's screen
    > resolution first and accordingly resize the pictures?
    > For instance If i have pictures of 50 X 50 pixels then,
    > If screen resolution is 800 X 600, resize it to 24 X 24
    > if screen resolution is 1280 X 720, resize it to 32 X 32
    > if screen resilution is 1152 X 864, resize it to 40 X 70


    What will happen in my browser window which is 929 x 462 pixels?

    Or if my JavaScript is disabled, as it usually is?

    --
    -bts
    -Warning: I brake for lawn deer
     
    Beauregard T. Shagnasty, Apr 7, 2006
    #10
  11. Maxi

    Good Man Guest

    "Beauregard T. Shagnasty" <> wrote in
    news:jvAZf.702350$:

    > Maxi wrote:
    >
    >> Is there no way (may be javascript) to detect the system's screen
    >> resolution first and accordingly resize the pictures?
    >> For instance If i have pictures of 50 X 50 pixels then,
    >> If screen resolution is 800 X 600, resize it to 24 X 24
    >> if screen resolution is 1280 X 720, resize it to 32 X 32
    >> if screen resilution is 1152 X 864, resize it to 40 X 70

    >
    > What will happen in my browser window which is 929 x 462 pixels?
    >
    > Or if my JavaScript is disabled, as it usually is?


    ....or if i'm viewing this on a handheld like an Ipaq or a Palm? Or, as
    suggested, what if my screen resolution is 1280x720 but my browser window
    is currently 600px wide?

    basically what Beauregard is suggesting is that you DO NOT make your
    website dependent on screen resolution in any way. Use HTML for content.
    Use CSS to style your page accordingly.

    Not to mention, falsely resized images (ie: an 300px wide image being
    shrunk to 100px by an image tag) look TERRIBLE!!
     
    Good Man, Apr 7, 2006
    #11
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Andrew FPGA
    Replies:
    0
    Views:
    1,001
    Andrew FPGA
    Sep 26, 2005
  2. PeterMcC

    Screen size and resolution?

    PeterMcC, Dec 2, 2003, in forum: HTML
    Replies:
    32
    Views:
    1,196
    Richard Clark
    Dec 8, 2003
  3. Pat
    Replies:
    5
    Views:
    554
  4. Replies:
    2
    Views:
    551
    Bergamot
    Jul 25, 2007
  5. Seige
    Replies:
    12
    Views:
    440
    Matt Kruse
    Jun 23, 2006
Loading...

Share This Page