site graphics resizing

resize for different screen res.

[thehittmann]

we have a title bar on each page of our site. The full width of the page @ 1280 x 760. How can we make this title bar scale to the appropriate size say the full width of an 800 x 600 aswell.

I've heard about ems sizing but how do I do it?

[stever]

If you've got a suitable graphic you can make it fit the 780px size and then tile a background across the rest of a div (or table cell if you are that way inclined). Quite a few designs will fade into a colour to enable this to happen.

[jimbeetle]

Happened to run across this thread yesterday:

[webmasterworld.com...]

Look at rcjordan's msg 28.

And there's a discussion about it in this thread:

[webmasterworld.com...]

[thehittmann]

ermmm the title gif's on each page do fade into the background colour at the end but 780 wide would be small on anything higher that 800 x 600. I want the image to be full screen no matter what the screen resolution is of the user.

[thehittmann]

thanks for the info on the the other topic. Is there a way to do it thats not javascript aswell. css would be better.

[jimbeetle]

Your going to have to use js to sniff window.screen.width and do or set something. CSS can't do that.

In that same thread above, see Bob's msg 29 "Change style sheet based on resolution". Maybe try fiddling this around to see if you can come with with something.

[thehittmann]

i found this js on in another topic on webmasterworld

<script type="text/javascript" language="JavaScript1.2">
<!--
var resWidth = window.screen.width;
if(resWidth > 1024) {
image1_width = 440;
}
else if(resWidth == 1024) {
image1_width = 380;
}
else if(resWidth == 800) {
image1_width = 320;
}
else if(resWidth < 800) {
image1_width = 260;
}
else {
image1_width = 260;
}
var image1 = '<img src="logo.gif" width="' + image1_width + '">';
document.write(image1);
// -->
</script>

the image widths are not what mine would be these are just examples but i think this will do the job for now. Im still pretty green on css I dont know how to specify image sizes using css. I'll ask in that forum.

[jimbeetle]

Hmmm. Isn't that the script from the thread I referred you to above?

Specifying image sizes in css is straightforward, just define a class or ID and set the width to whatever you want:

.titlebar { width: 800px }

But css can't really do anything, it's simply something that is read and interpreted. You still have to use js to do something: either set the width directly as in the first script, tell the browser which style sheet to use as in the second script or some magic that one of the css gurus can come up with.

[thehittmann]

yeah thats where i found it, lol
it works great theres not really any point to using 2 seperate css files now seeing id still have to use js anyway. Works a treat thankyou for pointing me there.