34 users online (1 members and 33 guests)  


  Results 1 to 5 of 5

Related

  1. a html code to make a picture smaller    Forum: HTML Forum
    Replies: 1
  2. How do you make pix smaller?    Forum: Graphics Forum
    Replies: 5
  3. Splash Screens    Forum: Graphics Forum
    Replies: 4
  4. How do you make pix smaller?    Forum: HTML Forum
    Replies: 0
  5. Splash Screens    Forum: General Discussion
    Replies: 3
  1. #1
    jwgav's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2007
    Location
    Iowa
    Posts
    5

    Format Tables for smaller res screens

    Hello, I am a new user, and just starting a web design degree.
    My final project is to create a web-page. I have a lot of stuff working well and the page looks great on my computers at home, but when I look at the page on a computer at the school the screen resolution is smaller and my tables are all much larger than they should be...
    Is there any way to make the tables fluid to fit any size screen...i have tried a lot of codes to make the table more fluid but none have worked.
    Do I need to resize all of my pictures or is there some way to do this. A CSS perhaps?
    Thanks for any help...here is the code it has no pictures but you can see the problem...
    Code:
    <html>
    <head>
    <title>Katiecandraw.com, Katie Cook's Portfolio</title>
    <style type="text/css">
    A:link {text-decoration: none; color: gray}
    A:visited {text-decoration: none; color: lime}
    A:active {text-decoration: none}
    A:hover {text-decoration: none; color: red;}
    h1,h2,h3,h4,h5,h6{color: gray}
    </style>
    </head>
    <body>
    <table align="center" border="4" bordercolorlight="lightblue" bordercolordark="darkblue" width="50%">
    <tr>
    <td style="text-align: center"><a href="aboutkatie.htm"><img src="button_about_katie.jpg" alt="Katie's Biography" border="0"></a></td>
    <td style="text-align: center"><a href="<A href="http://www.etsy.com/shop.php?user_id=23487"><img">http://www.etsy.com/shop.php?user_id=23487"><img src="button_shop.jpg" alt="Katie's Online Shop" border="0"></a></td>
    <td style="text-align: center"><a href="commission.htm" border="0"><img src="button_commish.jpg" border="0"></a></td> 
    <td style="text-align: center"><a href="katieappearances.htm" border="0"><img src="button_appear.jpg" border="0"></a></td>
    <td style="text-align: center"><a href="<A href="mailto:girlgenius&#64aol.com"><img">mailto:girlgenius&#64aol.com"><img src="button_email.jpg" alt="Contact Katie" border="0"></a></td>
    <td style="text-align: center"><a href="links.htm" border="0"><img src="button_links.jpg" alt="Favorite Links" border="0"></a></td> 
    </tr>
    </table>
    <br />
    <br />
    <br />
    <h1 style="font-family: Kristen ITC, Helvetica, sans-serif" align="center">Portfolio</h1>
    <table border="0" width="100%" cellspacing="0" cellpadding="O">
    <tr>
    <td style="font-family: Kristen ITC, Helvetica, sans-serif" colspan="2" align="center"><h2>Sketch Cards</h2></td>
    </tr>
    <tr>
    <td colspan="2" align="center"><a href="sketchcards.htm"><img src="pictures/cartooning/sketchcard/lotr5.jpg" alt="Sketch Cards"></a></td>
    </tr>
    <td style="font-family: Kristen ITC, Helvetica, sans-serif" align="center"><h2>Cartooning<h2></td><td style="font-family: Kristen ITC, Helvetica, sans-serif" align="center"><h2>Comic Strips</h2></td>
    </tr> 
    <tr>
    <td align="center" valign="top"><a href="cartooning.htm"><img src="pictures/cartooning/cartoon/katiecookiedance.jpg" alt="CARTOONING"></a></td>
    <td align="center" valign="top"><a href="comicstrips.htm"><img src="pictures/comicstrip/picsentwined/entwinedduo.jpg" alt="COMIC STRIPS"></a></td>
    </tr>
    <br />
    <br />
    <tr>
    <td style="font-family: Kristen ITC, Helvetica, sans-serif" align="center"><h2>Illustration<h2></td><td style="font-family: Kristen ITC, Helvetica, sans-serif" align="center"><h2>Fun Stuff</h2></td>
    </tr>
    <tr>
    <td border="0" align="center" valign="top"><a href="illustration.htm"><img src="pictures/illustration/elegantfairy.jpg" align="center" alt="ILLUSTRATION"></a></td>
    <td border="0" align="center" valign="top"><a href="funstuff.htm"><img src="pictures/design/star_wars_easter_favor_boxes_by_katiecookie.jpg" alt="FUN STUFF"></a></td>
    </tr>
    </table>
    <br />
    <br />
    <br />
    <br />
    <h1 style="font-family: Kristen ITC, Helvetica, sans-serif" style="font-family: Kristen ITC, Helvetica, sans-serif"align="center">Card Sets</h1>
    <table align="center">
    <tr>
    <td><a href="dclegacy.htm"><img src="logos/dclegacylogo.gif"></td>
    <td><a href="heroes.htm"><img src="logos/heroeslogo.jpg"></td>
    <td><a href="starwars30th.htm"><img src="logos/starwarslogo.jpg"></td>
    <td><a href="lotr.htm"><img src="logos/lotrlogo2.jpg"></td>
    </tr>
    </table>
     
    <p align="right"><a href="navigationpage.htm"><img src="button_blog.jpg" alt="Blog"></a></p>
    <h5 align="right"><p>All content on this site is copyright &#174 2007 Katie Cook</p>
    </body>
    </html>
    Last edited by vinyl-junkie; 11-28-2007 at 11:39 PM. Reason: Added code tags

  2. #2
    coreybryant's Avatar
    Texan at Heart

    Status
    Offline
    Join Date
    Jun 2003
    Location
    Castle Rock, CO
    Posts
    107

    Re: Format Tables for smaller res screens

    I saw 50% at one point. This basically says that your website will be half the size of the browser. So if I have a browser opened at 1024X768, then the table will be around 500 pixels in width.

    What part are you having problems with exactly?

  3. #3
    jwgav's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2007
    Location
    Iowa
    Posts
    5

    Re: Format Tables for smaller res screens

    That is the problem for some reason it is not working. All of the photos I put in the table stay the same size and do not become "fluid" like they are supposed to.
    If you put the code into a notepad you will see the boxes that represent the photos (I don't have it on a public server yet to show you the actual site) But if you change the res on your computer then the photos will be the same size.
    So if you do it on a 1280 X 800 it looks great, but if the res is down to a 800 x 600 all the pictures are huge and scroll bars pop up everywhere.
    I tried putting the entire page into a table and make a 10% buffer on the left and right side but the tables still does not act "fluid" like it should....

  4. #4
    coreybryant's Avatar
    Texan at Heart

    Status
    Offline
    Join Date
    Jun 2003
    Location
    Castle Rock, CO
    Posts
    107

    Re: Format Tables for smaller res screens

    How large are the pictures? You have two on there so if those two are more than 770 pixels in width, this could cause some other problems as well.

    Chances are users who still are using a lower screen resolution though are probably used to some things a miss on a website because a lot of webmasters don't look at 800X600.

    You might want to validate your code as well.

  5. #5
    Tony89's Avatar
    New User

    Status
    Offline
    Join Date
    Dec 2007
    Posts
    2

    Re: Format Tables for smaller res screens

    Why not define the height and width of the images? I am not sure if you can define percentages, but why not define them to be smaller than needed.

    When I design, I always try and stick to designing for the smallest resolution currently in use. I am sure if your website doesn't fill the entire screen, you will be fine. Making it functional for the 800x600 users is most important.

    On a note for future designs: I find that using div and css to position the div elements is the best way to design, but that is a personal preference.



Tags for this Thread