SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    Former Staff Member silver trophy Adam P.'s Avatar
    Join Date
    Apr 2001
    Location
    San Francisco
    Posts
    3,288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Webpage in many resolutions......

    I have had trouble designing websites for many different resolutions.

    One site I visited, www.coolhomepages.com , is very good at this. I usually browse the net with resolution of 1024x768. When I changed the resolution to 800x600, the site still looked perfect. How did they achieve this?

    I know of "auto stretch", but I'm not really good with that feature of DW4 yet. I'm also confused because the blue areas on the sides of the content go away, but the center area of the header goes away. How'd they pull that off?

    I'm guessing that the content was centered on the page and just made small enough so that it fits in 800x600, but still, how'd they do the header.

    Thanks in advance
    SPF Mentor/Advisor 2001-2003
    SPF Designer of the Year 2002
    SPF Graphic Designer of the Year 2003
    AdamPolselli.com

  2. #2
    SitePoint Member Craig Armstrong's Avatar
    Join Date
    Jun 2001
    Location
    Vancouver, WA, USA
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Swimm,

    You can do this by having a table at the top with a width of 100%. Inside, have one cell with a 50% width aligned to the left with the left logo, close td, open td, align to the right, with the right logo.

    example:

    Code:
    <table width="100%" cellspacing="0" cellpadding="0">
      <tr>
        <td bgcolor="#002040" width="50%">
          <img src="left_logo" alt="">
         </td>
         <td bgcolor="#002040" width="50%">
           <p align="right">
             <img src="right_logo" alt="" width="360" height="60" border="0">
          </p>
        </td>
      </tr>
    </table>
    --Craig Armstrong

    My site: coldplayonline.com
    Homepage: obscured.reflections

  3. #3
    Bimbo With A Brain! silver trophy Saz's Avatar
    Join Date
    Mar 2001
    Location
    Kent, United Kingdom
    Posts
    5,275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One of the easiest ways to find out how a particular site was put together is to open the page in your wysiwyg editor. It makes things a lot easier to understand than just looking at the source - especially if you're new to this.

    If you open cool homepages, you'll see the table layouts that they've used to put the whole page together. The top one, where the banner is, is set to 100%, rather than a fixed width, so that it scales according to the size of the browser window.

    The main table has a fixed size, aligned to centre, as you thought. Down side to this one is that if anybody views with 640x480, they have to scroll horizontally to view the main contents, but the header still fits! See....not everyone gets it perfectly right all the time.
    Saz: Naturally Blonde, Naturally Dizzy!
    No longer Editor of the Community Crier.

    Don't mind me, I'm having a BLONDE moment!

  4. #4
    Don't get too close, I bite! Nicky's Avatar
    Join Date
    Jul 1999
    Location
    Lancashire, UK
    Posts
    8,277
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi Swimm

    Follow the good advice that our members have given you and you will seen be able to build a site that fits all resolutions.

    As a side comment, please do not confuse a Dreamweaver feature with a design element. The "autostretch feature" is not something that Dreamweaver has magiced up so that you can build a flexible width website, it is a utility that sort of "cheats" and tries to help you build something that HTML coders have been doing for years. Im my opinion you are better off having a go in NotePad first so that you understand the principles of designing for variable widths, before you return to building your site using Dreamweaver.

  5. #5
    The Hiding One lynlimz's Avatar
    Join Date
    Jul 2000
    Location
    Singapore
    Posts
    2,103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you've made the first step! you found a site that can do what you want.
    so what you should do is view the source code and learn from it. experiment with the different table layouts.

    depending on your model of layout/content, different table layouts might not work as designated.

    one important note though. often, i've seen many site layouts which consist of many tables. yes. it will work fine in the various resolutions, but rendering time, load time, and unnecessary complexity in a layout will crap up netscpae 4 too.
    "Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
    -- Albert Einstein

  6. #6
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  7. #7
    SitePoint Enthusiast thenovice's Avatar
    Join Date
    Mar 2001
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have the same prob' as swimm5001...I've designed pages at 800x600 @ work...at home the same pages look yucky @ 1024x768 on a 15" monitor. I tried using %ges for tables...as Creole suggested before. I still can't get them right. May be CSS could help...I'm still learning it.....ALL I can say right now is best of luck.

  8. #8
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thenovice...

    The most important thing about a varialbe width site is to make sure the totals add up.

    Let's take a 2 column table...

    The first column is set to 150 pixels. Right off that means that 150 pixels will ALWAYS exist no matter what. If I then set the second column to 100% it will take up the rest of the window.

    Now let's take a 3 column table...

    The first column is set to 150 pixels. Right off that means that 150 pixels will ALWAYS exist no matter what. Then I set the 3rd column to 100 pixels there are 250 pixels already spoken for before ANY other calculations are made, Then I would HAVE to set the final column to 100% for the values to add up.

    Everything has to add up to 100% minus any pixel values you set. If I have two columns and set one of them to 50%, then the other one would ALSO have to be 50% or some browsers would not render the page correctly.

    Are you following me?
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  9. #9
    Back in Action Winged Spider's Avatar
    Join Date
    Jun 2001
    Location
    outside my mind
    Posts
    900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I hear nails running down mirrors whenever a client wants a stretchy site....

    I just can't take doing it anymore.

    As for advice.....

    Keep the page center aligned, a left aligned stretchy page can get messy real fast.


  10. #10
    SitePoint Enthusiast thenovice's Avatar
    Join Date
    Mar 2001
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree with you Winged Spider.

    Creole u r an ...ur idea worked like a charm. ThankQ.

  11. #11
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it was my pleasure.

    As for variable width sites, it really depends on the type of site that you are going to have. I think that informational sites are ideally suited for variable width. It gives you the most flexibility.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes


Bookmarks

Posting Permissions

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