Making a table with images fit the screen

Discussion in 'HTML' started by Cogito, Dec 13, 2003.

  1. Cogito

    Cogito Guest

    The following code:

    <table border="3" cellspacing="2" cellpadding="0" align="center">
    <tr>
    <td align="center" valign="middle"><img src="image1.gif"
    width="440" height="271" border="0" alt=""></td>
    <td align="center" valign="middle"><img src="image2.gif"
    width="440" height="271" border="0" alt=""></td>
    </tr>
    </table>

    show the two images nicely on my screen. That is, it fits the width of
    my screen with the resolution I'm using. How can I make it have the
    same appearance on screens with lower resolution?
    Cogito, Dec 13, 2003
    #1
    1. Advertising

  2. Cogito

    brucie Guest

    in post <news:p>
    Cogito said:


    > <table border="3" cellspacing="2" cellpadding="0" align="center">
    > <tr>
    > <td align="center" valign="middle"><img src="image1.gif"
    > width="440" height="271" border="0" alt=""></td>
    > <td align="center" valign="middle"><img src="image2.gif"
    > width="440" height="271" border="0" alt=""></td>
    > </tr>
    > </table>
    >
    > show the two images nicely on my screen. That is, it fits the width of
    > my screen with the resolution I'm using. How can I make it have the
    > same appearance on screens with lower resolution?


    add width="100%" to the table and change the width of the images to
    100%. now your images are going to look crap because browsers are poor
    at resizing images. also have a look at using CSS, its the 21 century.

    --
    brucie
    13/December/2003 07:28:56 pm kilo
    brucie, Dec 13, 2003
    #2
    1. Advertising

  3. Cogito

    Cogito Guest

    Can you please show me how to do it with CSS?


    On Sat, 13 Dec 2003 19:34:58 +1000, brucie
    <> wrote:

    >in post <news:p>
    >Cogito said:
    >
    >
    >> <table border="3" cellspacing="2" cellpadding="0" align="center">
    >> <tr>
    >> <td align="center" valign="middle"><img src="image1.gif"
    >> width="440" height="271" border="0" alt=""></td>
    >> <td align="center" valign="middle"><img src="image2.gif"
    >> width="440" height="271" border="0" alt=""></td>
    >> </tr>
    >> </table>
    >>
    >> show the two images nicely on my screen. That is, it fits the width of
    >> my screen with the resolution I'm using. How can I make it have the
    >> same appearance on screens with lower resolution?

    >
    >add width="100%" to the table and change the width of the images to
    >100%. now your images are going to look crap because browsers are poor
    >at resizing images. also have a look at using CSS, its the 21 century.
    Cogito, Dec 13, 2003
    #3
  4. Cogito

    Cogito Guest

    On Sat, 13 Dec 2003 19:34:58 +1000, brucie
    <> wrote:

    >in post <news:p>
    >Cogito said:
    >
    >
    >> <table border="3" cellspacing="2" cellpadding="0" align="center">
    >> <tr>
    >> <td align="center" valign="middle"><img src="image1.gif"
    >> width="440" height="271" border="0" alt=""></td>
    >> <td align="center" valign="middle"><img src="image2.gif"
    >> width="440" height="271" border="0" alt=""></td>
    >> </tr>
    >> </table>
    >>
    >> show the two images nicely on my screen. That is, it fits the width of
    >> my screen with the resolution I'm using. How can I make it have the
    >> same appearance on screens with lower resolution?

    >
    >add width="100%" to the table and change the width of the images to
    >100%. now your images are going to look crap because browsers are poor
    >at resizing images. also have a look at using CSS, its the 21 century.


    I tried your solution without much success. The images are now
    enormous and do not fit the width of the screen...
    Cogito, Dec 13, 2003
    #4
  5. Cogito

    brucie Guest

    in post <news:>
    Cogito said:

    >>> show the two images nicely on my screen. That is, it fits the width of
    >>> my screen with the resolution I'm using. How can I make it have the
    >>> same appearance on screens with lower resolution?


    >>add width="100%" to the table and change the width of the images to
    >>100%. now your images are going to look crap because browsers are poor
    >>at resizing images. also have a look at using CSS, its the 21 century.


    > Can you please show me how to do it with CSS?


    just put them in a <div> with each image 50% width.

    http://moreshit.bruciesusenetshit.info/image-thingy-1.html

    no CSS is needed except IE is a crap browser so you need some CSS to fix
    it.

    http://moreshit.bruciesusenetshit.info/image-thingy-2.html


    please don't toppost

    How am I supposed to post my replies in a newsgroup?:
    http://allmyfaqs.com/faq.pl?How_to_post

    --
    brucie
    13/December/2003 08:14:49 pm kilo
    brucie, Dec 13, 2003
    #5
  6. Cogito

    brucie Guest

    in post <news:>
    Cogito said:

    >>add width="100%" to the table and change the width of the images to
    >>100%. now your images are going to look crap because browsers are poor
    >>at resizing images. also have a look at using CSS, its the 21 century.


    > I tried your solution without much success. The images are now
    > enormous and do not fit the width of the screen...


    then you did something wrong or something went wrong with my mind
    reading device.

    http://moreshit.bruciesusenetshit.info/table-image-thingy.html


    --
    brucie
    13/December/2003 08:37:27 pm kilo
    brucie, Dec 13, 2003
    #6
  7. Cogito

    Cogito Guest

    On Sat, 13 Dec 2003 20:41:50 +1000, brucie
    <> wrote:

    >in post <news:>
    >Cogito said:
    >
    >>>add width="100%" to the table and change the width of the images to
    >>>100%. now your images are going to look crap because browsers are poor
    >>>at resizing images. also have a look at using CSS, its the 21 century.

    >
    >> I tried your solution without much success. The images are now
    >> enormous and do not fit the width of the screen...

    >
    >then you did something wrong or something went wrong with my mind
    >reading device.
    >
    >http://moreshit.bruciesusenetshit.info/table-image-thingy.html



    Thanks for you reply.
    The code works well with two images that are relatively small and are
    enlarged to fit the screen size. In my case I have two larger images,
    and they remain far too large.
    Any suggestions?
    Cogito, Dec 13, 2003
    #7
  8. Cogito

    brucie Guest

    in post <news:>
    Cogito said:

    >>http://moreshit.bruciesusenetshit.info/table-image-thingy.html


    > The code works well with two images that are relatively small and are
    > enlarged to fit the screen size. In my case I have two larger images,
    > and they remain far too large.


    you are doing something wrong and i'm really sick of trying to read your
    mind.

    using two images 600px wide:

    using css:
    http://moreshit.bruciesusenetshit.info/image-thingy-3.html

    using a table:
    http://moreshit.bruciesusenetshit.info/table-image-thingy-2.html

    a screencap of about 260px wide:
    http://moreshit.bruciesusenetshit.info/screencap001.png [1.2k]

    a screencap of about 4360px wide:
    http://moreshit.bruciesusenetshit.info/screencap002.png [2.3k]

    as you can see the images automatically adjust to the window width
    available.

    --
    brucie
    13/December/2003 11:39:46 pm kilo
    brucie, Dec 13, 2003
    #8
  9. Cogito

    Steve R. Guest

    Cogito wrote in message ...
    > The code works well with two images that are relatively small and are
    > enlarged to fit the screen size.


    Try this below., but firstly I've resized the width of you images to no more
    than 350 pixels wide each, as you'll need to use the horizonatl scroll bar at
    800x600, with your original ones

    I'd also be inclined to hide the table border and use a small border on the
    images instead.

    <center>
    <table border="3" cellpadding="2" cellspacing="0" width="100%">
    <tr>
    <td width="50%" align="center"><img src="image1.gif"
    width="350" height="271" border="1" alt=""></td>
    <td width="50%" align="center"><img src="image2.gif"
    width="350" height="271" border="1" alt=""></td>
    </tr>
    </table>
    </center>

    Steve.
    Steve R., Dec 13, 2003
    #9
  10. Cogito

    Cogito Guest

    This code works well.
    Thank you.


    On Sat, 13 Dec 2003 16:19:37 GMT, "Steve R."
    <stevie_ritchie(NOSPAM)@hotmail.com> wrote:

    >Cogito wrote in message ...
    >> The code works well with two images that are relatively small and are
    >> enlarged to fit the screen size.

    >
    >Try this below., but firstly I've resized the width of you images to no more
    >than 350 pixels wide each, as you'll need to use the horizonatl scroll bar at
    >800x600, with your original ones
    >
    >I'd also be inclined to hide the table border and use a small border on the
    >images instead.
    >
    ><center>
    ><table border="3" cellpadding="2" cellspacing="0" width="100%">
    ><tr>
    ><td width="50%" align="center"><img src="image1.gif"
    >width="350" height="271" border="1" alt=""></td>
    ><td width="50%" align="center"><img src="image2.gif"
    >width="350" height="271" border="1" alt=""></td>
    ></tr>
    ></table>
    ></center>
    >
    >Steve.
    >
    Cogito, Dec 14, 2003
    #10
    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. Boki
    Replies:
    7
    Views:
    14,104
  2. Richard Burgess
    Replies:
    3
    Views:
    408
    Richard
    Sep 11, 2003
  3. Ron Brennan

    How do I force page to fit screen

    Ron Brennan, Mar 18, 2006, in forum: HTML
    Replies:
    13
    Views:
    9,383
    Jonathan N. Little
    Mar 19, 2006
  4. Piet
    Replies:
    0
    Views:
    510
  5. Steve C. Orr [MCSD, MVP, CSM, ASP Insider]

    Re: Resize Page Header to fit screen

    Steve C. Orr [MCSD, MVP, CSM, ASP Insider], Jan 22, 2007, in forum: ASP .Net
    Replies:
    0
    Views:
    640
    Steve C. Orr [MCSD, MVP, CSM, ASP Insider]
    Jan 22, 2007
Loading...

Share This Page