Results 1 to 9 of 9

Thread: Resizing Site

  1. #1
    Join Date
    Mar 2003
    Location
    Canada
    Posts
    9,852

    Resizing Site

    What is the best way to have your site dynamically resize to look good at all resolutions?
    What code to phpBB and Vb use for this and would you use the same code for a plain html site?

  2. #2
    Join Date
    Jan 2002
    Location
    Charlotte, NC
    Posts
    527
    You pretty much would need to design it from the start with that in mind. Not completely necessary, though that would be the easiest to me at least.

    But basically just have your tables set for 100% and have your items that won't expand in width-defined cells and then have an expandable cell (with an undefined width) that uses a background image that will give the impression of fluidity upon expansion. Not sure if I explained that well

    Jason
    http://www.charlottezweb.com
    HOSTING your livelihood

  3. #3
    Join Date
    Mar 2004
    Posts
    407
    <html>
    <head>
    <title>Untitled</title>
    </head>
    <body>
    <table width=100%>
    ***put all your HTML in here and it will then resize with the persons browser. If you are using server side code have it output the HTML in here**
    </table>
    </body>
    </html>

  4. #4
    Join Date
    Jan 2002
    Location
    Charlotte, NC
    Posts
    527
    ...um, i'm not trying to be rude, but making the table 100% isn't going to make the content liquid...there's a lot more too it than that.

    Regards,
    Jason
    http://www.charlottezweb.com
    HOSTING your livelihood

  5. #5
    Join Date
    Mar 2003
    Location
    Canada
    Posts
    9,852
    Originally posted by Charlottezweb
    You pretty much would need to design it from the start with that in mind. Not completely necessary, though that would be the easiest to me at least.

    But basically just have your tables set for 100% and have your items that won't expand in width-defined cells and then have an expandable cell (with an undefined width) that uses a background image that will give the impression of fluidity upon expansion. Not sure if I explained that well

    Jason
    Ok Jason. So I make a table with 3 cells. Cell one (the main cell) is set to 100% width. Cell two (the background cell) is set with an undefined width, and cell 3 (the body of the site) is set to say 70%.

    Is this what you mean?

  6. #6
    Join Date
    Mar 2004
    Posts
    407
    Originally posted by Charlottezweb
    ...um, i'm not trying to be rude, but making the table 100% isn't going to make the content liquid...there's a lot more too it than that.

    Regards,
    Jason
    Yes it will make it liquid. It might not look good, but it will make the site grow/shrink. Now if you are asking for it to look good that is a much more complicated question.

    If the point is just that people of any size resolution could read it then you should design the site so it fits under 800 width as majority of users are 800+

    Looking at my code again I did make a small mistake. In the table tags you also want the tr and td tags.

    <tr>
    <td>
    **html code here. could be more tables or html created by server side code**
    </td>
    </tr>

  7. #7
    Join Date
    Jan 2002
    Location
    Charlotte, NC
    Posts
    527
    Originally posted by blue27
    Ok Jason. So I make a table with 3 cells. Cell one (the main cell) is set to 100% width. Cell two (the background cell) is set with an undefined width, and cell 3 (the body of the site) is set to say 70%.

    Is this what you mean?
    Ummm...not exactly, unless I'm misunderstanding your terminology of "cell." Okay, here's what I mean.

    For an example, we'll use WHT's second table on this site (the one that has the WHT logo image and the banner ad):

    They have a table with a width of 100% (which is what alvinks is referring to). This will physically make the table span the whole page obviously, but will not make the site liquid in the sense that your design will look the same and expand properly in every browser and resolution. That has to be done with further cell coding. For example:

    Their table then has two cells: The left cell has
    a defined width which is set to the same size as the logo image that's in it. Then they have a right cell (that has the banner ad script in it) that is set to be a width of 100%. It will expand to cover the rest of the space. The banner ad is right aligned in that cell to always show up at the far right edge of the screen. I usually just leave that cell width as undefined (like I mentioned in my first post, and that will work if you have the table set to 100% and all other cells with a defined size, but using 100% as they did apparently also will do the trick.

    Finally, they have a background sliver (the blue-gray bars) that the main table has defined as the background for the whole table. No matter who big/small the table is, that right column and any "blank" area will show that bkgrnd image bar behind it. This is the true key to making the site liquid. You need to have some sort of background image defined for all expandable areas that can be tiled (or repeated horizontally as many times as necessary) that will always connect.

    Hopefully that helps?

    Jason
    http://www.charlottezweb.com
    HOSTING your livelihood

  8. #8
    Join Date
    Mar 2003
    Location
    Canada
    Posts
    9,852
    Helps a lot. Thanks Jason.

  9. #9
    Join Date
    Jan 2002
    Location
    Charlotte, NC
    Posts
    527
    no problem
    http://www.charlottezweb.com
    HOSTING your livelihood

Posting Permissions

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