# Solved: Setting screen width parameters



## DaveSS (Jun 18, 2002)

Hi folks,

When validating my site, I began looking at the screen size question. Width in particular. 

A stats report show that most of my potential visitors will be at 1024 + 

As I am new to all this I kind messed up and have my pages at 1050. 

When validating and playing with code (which I do not know) I see that putting in something like <table width="100%" allows the width of the tables involved to expand and contract according to the visitors screen etc. 

Is this the best way to set everything? 

It would mean going back and changing a lot. 

But also poses the problem of my header image. It the picture changes on each page. Meaning when a view of say 1280 comes along, the image begins to tile. e.g. the right and side starts again with the beginning of the left hand side of the picture.

The main attraction(hook) to the site are these header images. I am looking at another similar site and they have set it to 1024 fixed. So with 1280 the images are fine.

I am thinking of adjusting the whole site to 1020 and not doing the <table width="100%" thing 

What would people advise in this situation? 


Dave
P.S. The site is in Tables, with no CSS


----------



## tomdkat (May 6, 2006)

DaveSS said:


> But also poses the problem of my header image. It the picture changes on each page. Meaning when a view of say 1280 comes along, the image begins to tile. e.g. the right and side starts again with the beginning of the left hand side of the picture.
> 
> What would people advise in this situation?


You can use CSS to prevent the tiling of the background header image and position the image to be centered. As for the widths of browser windows (which is how I like to think of things instead of focusing on screen resolution), if your layout is "fluid" (meaning it will change size as the browser window changes size), you should be set. Of course, you will want to test at different browser window sizes to make sure the site lays out the way you want at various sizes.

The only way to know how your site will react to various browser window sizes is to test.

A lot of people run their browser fullscreen but some (like myself) don't. So, even though I'm running at a screen resolution higher than 1024x768 my browser window won't necessarily be wider than 1024 pixels. In fact, I'm running the Google Chrome browser right now and it's at 987x686. 

Peace...


----------



## caraewilton (Nov 7, 2007)

I personally prefer to have my pages width set to 800. The reason is, there are still people out there that use this size screen. As you have pointed out, setting widths to 100% will theoretically result in the width appearing the same size as the browser width, but then you hit problems with the size of the picture. Using CSS it is possible to have your picture also appear at 100%, but this is not what you want to do.
Personally, I think you should leave things as they are. One day when you have a little spare time, you can learn CSS and then you'll have a lot more options.

If you want to see a page that resizes no matter what the screen size, look here. I made this for another posters question. Change the size of the window, and you'll see the text and columns automatically adjust to the size of the new window. This has been done with CSS although the same effect would occur with tables. Personally I think it starts to look messy when you start adding pictures. While you can have these appear at 100%, the aspect ratio goes all whack. My opinion is that sort of layout only really works for pure text sites. Hence why I recommend just leaving your site as it is. People with bigger screens will see everything just fine, and the few people out there with smaller screens will just have to scroll right.


----------



## DaveSS (Jun 18, 2002)

Thanks for the help guys.

I tried on just that one page entering 


> .val {
> background-color: #000000;
> background-image: url(Images/Photos/backdrops/blog-girls-iran.gif);
> background-repeat: no-repeat;
> background-position: center;


For just that page, and no difference.

I also tried:



> .Background {
> background-color: #000000;
> background-repeat: no-repeat;
> background-position: center center;


For main CSS I have: again no difference I am using http://www.thepcmanwebsite.com/screen_resolution.shtml

I think with all this validation etc. I am seeing double 

This being an editable region and wanting the background to change on each page, I think it's going to cause problems?

Leaving the site good at 1024 might be the best if it is. Though it would be nice to know if there is a solution?

Just another point about width. On DW there is a ruler, but it tells me I am at 1060. Yet the code is 900 for the tables. And the screen on the above tester is at 1024 and is fitting perfectly? I don't get it?


----------



## tomdkat (May 6, 2006)

caraewilton said:


> I personally prefer to have my pages width set to 800. The reason is, there are still people out there that use this size screen. As you have pointed out, setting widths to 100% will theoretically result in the width appearing the same size as the browser width, but then you hit problems with the size of the picture. Using CSS it is possible to have your picture also appear at 100%, but this is not what you want to do.


That is where the 'max-width' style rule comes into play. We've discussed using percentages for image dimensions on this forum, so you might want to search on 'max-width' to find that discussion. Unfortunately, IE doesn't support 'max-height' or 'max-width' but the other modern browsers do. 'max-height' and 'max-width' can come in _very_ handy. 

Peace...


----------



## tomdkat (May 6, 2006)

DaveSS said:


> I tried on just that one page entering
> 
> (snip)
> For just that page, and no difference.


Are you saying you want the header image to scale as the page is resized or did you want it to simply be centered on the page as the page is resized?

Peace...


----------



## DaveSS (Jun 18, 2002)

> Are you saying you want the header image to scale as the page is resized or did you want it to simply be centered on the page as the page is resized?


Actually that poses a good question in itself. If the scaling is not done correctly it might distort the the image? If it does not, then I would go with scaling , whereas if it does distort, then I would go for centering.

But yes I just tried it on IE 7 with 100% and it left a large margin down the right hand side.

Since the validation is coming along, I just started to play with this again.

Its that header editable region which is causing problems alight. As I updated the validation on the other pages via the template to make sure everything was still functions. It was  I had a go at resizing to fit 1024 best. The center (header) editable region as it was editable will have to be manually done for all the pages already created. But after that the template will churn them out correctly.

The thing that keeps putting me off here is that on DM, in code, I am imputing


>






This fits perfectly into a 1024 wide screen, according to the previous websites.

So how come a 970 fits 1024? Are they different measurements?


----------



## tomdkat (May 6, 2006)

DaveSS said:


> Actually that poses a good question in itself. If the scaling is not done correctly it might distort the the image? If it does not, then I would go with scaling , whereas if it does distort, then I would go for centering.


A scaling image _can_ distort the image if the image is scaled to dimensions larger than it's actual dimensions. It would be "upscaled", in this case. The distortion comes into play as image quality starts to suffer. This can be easily dealt with but, once again, IE doesn't support that method so you will probably want to stick with centering the header. Based on the site you linked to above, it looks like going with a fixed width page is what you want, anyway.



> But yes I just tried it on IE 7 with 100% and it left a large margin down the right hand side.


Could you post a screenshot of that?



> So how come a 970 fits 1024? Are they different measurements?


Yes, but not really.  Both are a measurement of width in pixels BUT you are comparing apples to oranges. Let's start with 1024. 1024 is the width of a screen at 1024x768 resolution. 1024 pixels wide by 768 pixels high. This is the resolution of the *entire* screen.

When you open your browser and view a page, you will notice the browser window is shown and inside it is the page you're viewing. I know this is obvious but it's also part of the reason for the apparent "discrepancy" in the measurements you posted above. The browser window _itself_ takes up some of the 1024 pixels of screen width and the area where the page is displayed, called the "viewport" (you should do a search on this to read about it), has the amount of space that will be available for displaying the page.

So, if you open your browser window maximized on a screen at 1024x768 resolution, the viewport in the browser window won't be 1024 pixels wide and will be some number lower than 1024 (1000, 970, I don't know and I'm not sure how to find out). As you add scroll bars, the viewport becomes more narrow, I believe.

Now, if you open your browser window in a _windowed_ fashion on a screen at 1024x768 resolution, the viewport in the browser window will be *n* pixels wide in relation to the browser window being *x* pixels wide. So, if the browser window is 925 pixels wide, the viewport will be 825 pixels wide, let's just say. These are NOT real numbers but I use them purely as an example.

I don't think all browsers will have the same sized viewports when running on screens at the same resolution but I don't really know.

I've read about the 970 width being optimal for a screen at 1024x768 resolution and I'm think that's a "sweet spot" kind of number based on the viewport width of the browser window when displayed maximized on a screen at that resolution.

Peace...


----------



## DaveSS (Jun 18, 2002)

> Quote:
> But yes I just tried it on IE 7 with 100% and it left a large margin down the right hand side.
> Could you post a screenshot of that?


Yep it should be here.



> Based on the site you linked to above, it looks like going with a fixed width page is what you want, anyway.


I would like that header image to remain much as it is. As I messed up with starting with a 1024 width, I will have to resize all my pages again as is without delving into something new. I am pretty happy with the header as is now. So long as it all holds together 



> I've read about the 970 width being optimal for a screen at 1024x768 resolution and I'm think that's a "sweet spot" kind of number based on the viewport width of the browser window when displayed maximized on a screen at that resolution.


How, I wish I new about this before  it was through trial and error I found it. And lots of http://browsershots.org time.

You explained it all perfectly and it makes perfect sense! Thank you!


----------



## tomdkat (May 6, 2006)

DaveSS said:


> Yep it should be here.


Thanks for the screenshot. The screenshot is of a different page than the one you linked to above. Given the page in the screenshot, we should be able to get that content to adjust without much pain. I'll play with that when I'm in the office. 



> I would like that header image to remain much as it is. As I messed up with starting with a 1024 width, I will have to resize all my pages again as is without delving into something new. I am pretty happy with the header as is now. So long as it all holds together


Don't start on this yet. 

Peace...


----------



## DaveSS (Jun 18, 2002)

Yes it is a different link. Apologies. I was using separate files, so I would not mess up 

thelongestwayhome.com/val2.html

There's a link to the file. 

The code is old though as it's not attached to the template that is being validated


----------



## tomdkat (May 6, 2006)

Ok, this is easy. 

Here is the original HTML source:

```
<td height="471" colspan="3" align="center" valign="bottom" nowrap="nowrap" bordercolor="#000000" [b][color=red]background="Images/Photos/backdrops/blog-girls-iran.gif"[/color][/b] bgcolor="#000000">
```
Remove that (per the validation work above) and use this instead:

```
<td height="471" colspan="3" align="center" valign="bottom" nowrap="nowrap" bordercolor="#000000" [b][color=red]style="background-image: url(Images/Photos/backdrops/blog-girls-iran.gif); background-repeat: no-repeat; background-position: center;"[/color][/b] bgcolor="#000000">
```
That should cause the background to be centered in that table cell and it should NOT repeat as the width of the table increases.

If that works, you could put that inline CSS style in a style rule in your external CSS stylesheet and apply it to other header images, as necessary.

Peace...


----------



## DaveSS (Jun 18, 2002)

It's actually coming up the same?

IE still has that black border on the right.


----------



## tomdkat (May 6, 2006)

Did you make the change to val2.html? Did you upload the updated val2.html file? The val2 page I see, from the link above, still has the old background setting in it:

[TD]

You need to change the above to:

[TD]

EDIT: Here is a test case for you to experiment with:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>Table cell background</title>
</head>
<body>
<table style="text-align: left; width: 100%;" border="2" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td style="background-repeat: no-repeat; background-position: center; height: 150px; background-image: url(file:///D:/techguy/Sunset.jpg);" colspan="2"></td>
    </tr>
    <tr>
      <td align="undefined" valign="undefined"></td>
      <td align="undefined" valign="undefined"></td>
    </tr>
  </tbody>
</table>
<br>
</body>
</html>
```
Peace...


----------



## DaveSS (Jun 18, 2002)

Yep it uploaded with this



> [TD]


thelongestwayhome.com/val2.html

IE7 at 1280 X 1024 is still coming out like the screen shot above


----------



## tomdkat (May 6, 2006)

DaveSS said:


> Yep it uploaded with this
> 
> thelongestwayhome.com/val2.html
> 
> IE7 at 1280 X 1024 is still coming out like the screen shot above


*Sigh* Now can you see why IE gets slammed so much? 

Ok, the reason IE7 displayed the table in the funky manner is it was NOT centering the table as you had instructed. I got it to center the table by changing THIS line of HTML:

<td *width="963"* height="1107" align="center" valign="top">

to NOT have the width specified. Removing the width attribute caused IE7 to center the table with the cell with the background, as you desired. Of course, Opera and Firefox centered the table with your original HTML but IE being the piece of.... well, you get the idea. 

If you wanted to see your test page with the centered background in IE7, change the above line to this:

[TD]

Peace...


----------



## DaveSS (Jun 18, 2002)

Ah ha, works great now. 

I see that because of the way I have things set up I would have to change every page already created as it's not in the template. But I think a search and replace will do it.

So now I need to pose my self the aforementioned question about centering the image or scaling it? As you mentioned IE doesn't scale, that actually rules out the scaling! Leaving me with this option.

I also note that the [TD] Code caused my Countries Visited section to the left to center too. Which I think can be corrected by another table. But also shows me how tables are affected


----------



## tomdkat (May 6, 2006)

DaveSS said:


> So now I need to pose my self the aforementioned question about centering the image or scaling it? As you mentioned IE doesn't scale, that actually rules out the scaling! Leaving me with this option.


IE WILL scale the image. The problem is you can't control the scaling IE will do like you can with every other modern browser, at least not with IE7 and older browsers. IE8 might actually behave like current no-IE browsers.



> I also note that the [TD] Code caused my Countries Visited section to the left to center too. Which I think can be corrected by another table. But also shows me how tables are affected


Actually, I think this is an example of just how problematic using tables for page layout can be. You've got more than enough table nesting right now and the last thing you need is yet more tables.

If you want to center the list of countries visited, you could center the text in the paragraph that contains the list, like this:

Portugal

Peace...


----------



## DaveSS (Jun 18, 2002)

Right, I just spent the day buggering up my site again 

I backed it up only to realize I actually backed up an old backup that had a similar name 

It took a while but have everything somewhat back to normal.

The biggest problem I have with the 100% width rule is That the background image is not in the template with an image. So only after I insert an image do I get this ono a regualr .html file.



> [TD]







meaning the template keeps changing things in the code.

I have the site set to 970 now. (though not all pages uploaded). And am quite happy with it like this. But am curious if it is still possible to get the scaling to work given the above?

Based on analytics and my blog. 75% of most people are unfortunately looking at it through IE so I have to work with that. Also, while traveling my self, I have to use a lot of older machines, and 800 width screens. So eventually it would be nice to have scaling work!


----------



## tomdkat (May 6, 2006)

DaveSS said:


> The biggest problem I have with the 100% width rule is That the background image is not in the template with an image. So only after I insert an image do I get this ono a regualr .html file.
> 
> (snip)
> 
> meaning the template keeps changing things in the code.


Then, you will have to look more closely at the template to find out why it's generating the code it is. For example, the "background" attribute is being used to reference the background image for the table heading. This will NOT validate since the "background" attribute doesn't exist for [TH]. Why DW keeps generating things, considering you're using an XHTML DOCTYPE, concerns me unless it's something you've coded in the template-related code somewhere or somehow. If DW is generating the non-XHTML code on its own, shame on DW. What version of DW are you using?



> I have the site set to 970 now. (though not all pages uploaded). And am quite happy with it like this. But am curious if it is still possible to get the scaling to work given the above?


I think it can. I see how you have the CSS style rule in place to set the height of the table and that is not being changed. Given how IE is behaving with your table structure, you will probably want to forget the image scaling stuff for now. You can read this thread to see previous discussion here on using image scaling.

Peace...


----------



## DaveSS (Jun 18, 2002)

CS3. The problem relates to the editable regions I am using for the backdrop. It caused all sorts of issues after the validation. I had to reestablish the background as an editable region and have it match up in the template. 

Unfortunately when I did that, DW editable region cut the code that makes the backdrop in half. So every page the template churns out is cut in half that way. It's fixable. But considering it looks like I will stick with 970 and it's working, I think it's better to stay as is.


----------



## tomdkat (May 6, 2006)

Sounds like a plan to me. 

Peace...


----------

