One concept I find it hard to understand since changing from using tables as a formatting tool, to using CSS, is: what dimensions should I ask my daughter (graphic designer and Photoshop expert) to make my banners and other graphics.

You can have a look at www.boddingtonlionsrodeo.com.au as an example of one of my pages where I have used a banner. Here, I have had her make the banner 800px wide, on the basis that 800x600 is probably the lowest resolution and screen size currently in use with PCs. I have used a black background either side to give the illusion that the banner header goes from edge to edge.

I know that graphics can stretch or compress to fit the container, but this is not always a good thing. Please have alook at my own site:
www.warural.com.au If I stretched that banner to fill the whole screen width then the logo and text would be distorted, and since the banner has a gradient background, being white on one side and deep red on the other, it is hard to match backgrounds as I did with the rodeo Web site.

It worries me that if I make any graphics a set size, for example: 1280px wide; then that graphic might not display properly on anything other than a 1280x1024 screen ... how would it fit on a mobile phone screen, for example? However, if I make all my graphics to fit an 800x600 screen, then most of the world will be looking at banners and graphics that only fill 60% of their screen.

I note that many commercial Web sites still use tables and still set their table widths at 800px or less, so the viewer sees a table layout, centred or left justified, with lots of blank screen on either side, or to the right of the graphics. I could do something like that with CSS, but I feel that one of the advantages of CSS should be to use all of the screen real estate to the best advantage. How do you do this in CSS without overly compressing or distorting your graphics? How do you do it in a way that it will display on a screen smaller than 800px x 600px?

I am sorry for such a long winded query, but I felt I needed to write at length to help you understand exactly where I am coming from and what I would like to learn.

In a nutshell, if I want a banner made up for a page I am building, do i ask my daughter to make it 800px wide, or 1024px, or a certain number of cm? What instructions would you give her?

Many thanks, James

I think both 800 and 1024 are too wide. But I don't understand your main question. Why would tables or CSS layout affect the size of your graphics?

Having spent a lot of words trying to explain my question, I am at a bit of a loss as to how I can re-phrase it so you can understand, but I do appreciate your prompt reply.

Forget the comparison between tables and CSS - that seems to have confused the matter.

1. I am about to build a new Web site, with a friend, and we would like to have a banner header across the top of each page.
2. My daughter is a graphic designer in Sydney (on the other side of Australia) and is happy to design and make the graphic.
3. My daughter wants to know what size to make it (using Photoshop) - I don't know what to tell her, given the different media the pages might be viewed on.

What would you tell her?

Many thanks, James

I suppose the solution is to have a small graphic and left, right, or center it in a container that has an appropriate background colour.

That way the container, and background colour, can stretch to fit the screen size and the graphic simply aligns within it.

QUESTION: given the differing media and screen sizes in use these days, what is a good size for a logo or banner header graphic?

James

Take a look at the header at the top of the igoogle page. There is an image in the middle that is a reasonable width for most people. It's centered, so if the window is too narrow, the ends get chopped off. And behind it is a background color or a tiled background image (depending on the theme) that blends with the ends of the main image. So if the window is wider, the banner stretches to the full width.

That's the kind of flexible layout that works best.

I understand you spent time writing that, but your main point seemed to be that the width of images is a problem with CSS layouts but not with table layouts. And that didn't make sense.

There's some general advice here.
http://www.htmlhelp.com/faq/html/design.html#screen-size

Darin, what igoogle page? I don't think you mean this.
http://www.google.com/ig

In the boddingtonlionsrodeo.com.au pages, the banner is made up of:
1. the lions logo
2. the uppercase words: "BODDINGTON LIONS"
3. the fancy font, larger word: "Rodeo:
4. and, finally, on the RHSide, a picture of the bucking bronco statue

The graphic artist has put these all together to make up one banner graphic measuring 799px wide.

Considering that there might be screens smaller than 800 x 600 these days, would it be better to have made these 4 features of the banner (see list above) separate graphics, and float them all within an external container? That way, if the screen is not wide enough to accommodate their total combined width of 799px, they can float in, one on top of the other, and still be displayed, albeit not as intended.

Regards, James

I don't remember what the default theme for iGoogle is, but here's the image I see in the middle of the top banner on my iGoogle page: http://skins.gmodules.com/ig/skin_fetch?fp...es/louie6pm.png

The orange-white gradient continues to the left and right if my browser window is wide enough. (Actually, at different times of the day, the gradient will be different colors in this theme, but the idea should be clear.)

Again, screen size doesn't matter. The width of the browser window matters. I've run with default browser windows about 600-650px wide, depending on the display environment. And of course, other media (handheld, webtv, and even print) can be narrower still.

But yes, the layout can be more flexible if the various elements are separate, free to flow to fit the available space, whether it's narrower or wider than 800px.

(FWIW, even with 800px resolution, the available display area will be considerably narrower, even with a maximized window. Some space will be used by scrollbars, navigation bars, borders, etc.)

Ah. Here's the default. I wasn't so impressed with that. Note the rightmost column in the form.

Click to view attachment

Thanks for showing us which google image you were referring to - as a matter of interest it is 900px x 175px

James

Yes. But notice that it doesn't force the page to be 900px wide. The page can be wider (and a matching repeating background extends to the edges of the page), or the page can be narrower (and the ends of the background image get lopped off). That's what I was trying to illustrate.

If anyone has a better example of a banner that adjusts to the width of the page, that would be great...

Thanks Darin - I am starting to get the hang of it now.

James