Results 1 to 7 of 7
  1. #1
    Member
    Join Date
    January 18th, 2005
    Posts
    76
    Hi:

    I was setting up a table using after setting up my display to be 800X600 so as not to have those with that popular display size not have to horizontal scroll.

    But then I went to several sites and noticed that whether I was set at 800 X 600 or 1024 x 768 their sites nicely filled the screen. They were not all tiny and only a percent of the screen at the higher resolution and they were not spilling off it at the lower resolution.

    When I went to my site's Product Gallery(that I am trying to reconfigure) the differences were huge! My table spills way off to the left in the low mode and looks fine in the high, unlike the other sites that make it work in either mode. How do they do that? A java script? Or do they struggle through trying to set their tables as a percent instead of absolute pixel widths?

    I played around with Frontpage using the percent widths and found that it was tough to get any consistency. It seemed as soon as you added graphics, all the columns were that were the same width lined up nicely in Normal, but then when you switched to Preview the first column was way too wide and the others were all smaller. Is there a way to set the width of the table to 100% of available screen in either resolution and then do the cells as percent of that table width?

    What am missing here? This shouldn't be that hard!!

    Thanks,

    Harvey
    www.gas-scooters-on-the-web.com

  2. #2
    Member
    Join Date
    January 18th, 2005
    Posts
    76
    Whoops...that should have read "spilling off the right" not left! It was a late night last night!

    Harvey

  3. #3
    ABW Ambassador
    Join Date
    January 18th, 2005
    Posts
    742
    You say you want 800x600, but your table with the scooter images is set for 842. Plus you have your image index adding an additional 130 pixels. So right off the bat you're at least 972 in width.

    If you want to keep the same image size, go to 4 iamges per row and eliminate the "Urban Scooters - Click the Pics" on the left side. That will get you nearer to where you want to be.

    I'd also reduce the size of those images as they will take a long time to load for someone who is not on broadband.

  4. #4
    ABW Ambassador
    Join Date
    January 18th, 2005
    Posts
    742
    Get rid of the bold on mouseover also. It makes everything jump. You'd be better off having the titles appear in a different color rather than have them go bold.

  5. #5
    Member
    Join Date
    January 18th, 2005
    Posts
    76
    Bob:

    Thanks for the input. If I reduce the size of the table plus nav bar to 800, will it still fill the screen for the higher resolution or will there be big white gutters to the right?

    Thanks,

    Harvey

  6. #6
    ABW Ambassador CrazyGuy's Avatar
    Join Date
    January 18th, 2005
    Posts
    1,463
    Bear in mind also that 800 includes all the windows frippery - frames, scroll bars etc, so you usually have less than 800 to work with.

    But you can't control the size of those things - people can configure their systems to have chunky scrollbars etc.

    Bottom line: it's difficult to design for a universal <800 width.

    One way around this (if it suits your site) is to have some element of the design (often the middle "content" column set as 100% rather than a fixed pixel width. This then expands/contracts with window size so your design always fills the browser window.

    You might also want to look at designing using CSS (style sheets) as these allow even more flexible control of widths (like "100% but never less than 500 pixels") and more graceful degradation (like a right-side column sliding under the main column rather than bleeding off the page.


    --------------
    Are you Crazy?

  7. #7
    ABW Ambassador
    Join Date
    January 18th, 2005
    Posts
    742
    Best thing to do is either make the table widths 100% or not specify a size. That will allow the tables to adjust themselves to the size of the viewer's screen.

    You have some pretty big images there, so don't make the mistake that 99% of people who create web pages make, i.e., creating a table and then putting tables inside of the main table. A page doesn't load until everything within a table loads. That's the primary reason you sometimes get a blank page when you open ABW.

    Instead, break the page into a series of tables of 3 columns. In the left column, put the navigation info (products, compare scooters, etc). Levave the 2nd column blank as a a buffer column but assign it a width of 10-20 pixels. In the 3rd column put your products in a separate table. Suggest you limit the number of products in each row to 4. Do this for all your products. So if you have 20 products, you'll have 5 tables.

    For table #2 to the last table, figure out the width that the 1st column on the 1st table takes up. Then create a blank image of 1 pixel high and "x" pixels in width and put that in the 1st column of all the subsequent tables. That way, all the rows and columns in all the tables will line up evenly.

    I'd also get rid of anything that tells users to click images or links. Also get rid of the grey area below 'our newsletter'. You won't need it if you do it the way I just described.

    Let me know if you need any more help.

  8. Newsletter Signup

+ Reply to Thread

Similar Threads

  1. Horizontal Drop Down or Vertical Menu?
    By Cheesehead in forum Midnight Cafe'
    Replies: 4
    Last Post: February 10th, 2008, 07:29 PM
  2. Can Webmerge do Horizontal Lists?
    By johnnyWebAffiliate in forum WebMerge (Fourthworld.com)
    Replies: 16
    Last Post: July 14th, 2006, 01:12 AM
  3. Read Before Scrolling Down To Photo!
    By Jon@Fluxads in forum Virtual Family and Off-Topic
    Replies: 21
    Last Post: May 28th, 2006, 07:38 PM
  4. Problem scrolling in ABW?
    By Radegast in forum Midnight Cafe'
    Replies: 2
    Last Post: December 3rd, 2003, 05:14 PM

Posting Permissions

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