hi.<br />
<br />
I've been trying to jazz up some pages, give them a new look yada, yada, yada. I am using narrow left borders on some of the pages. I did over 100 pages and they looked great on my screen (800 x 600), then I went to my folks to see it at the 10?? resolution and the background, after hitting the 600 width, started over again. I know they do this, I know why and all that, but how on earth can that be avoided? I obviously used a background made for the 800 x 600 resolution, but I still know little about graphics and wondered how some sites make them look good no matter what resolution. The page doesn't look bad - in fact my folks thought it was supposed to look like that because just where the right side starts to repeat the border it's (luckily) lined up to make it look like the recipes are supposed to be "bordered" with the graphics.<br />
<br />
Anyway, I did make the site using percentages, so am I on the right track that it's the background? Then, another question - if I were to use a background made for the larger resolution, how would that affect it on other resolutions?<br />
<br />
I'll stop there because I'm getting more confused myself now!
<!--content-->what you can do is specify the same background color as the colors at the edge of your image, where the larger browsers will pick up...<br />
<br />
THEN,<br />
use CSS to tell your background to either not repeat, or repeat along the x or y axis (vert or horiz).<br />
<br />
OR...<br />
you could use JavaScript to detect browser size and WRITE which background you want to use. this is also more easily accomplished using CSS.<!--content-->can't remember where i found this. in this example, different colors are used in a BODY tag according to the resolution detected. this of course could SO easily be modified to instead use a background image, or write in a CSS thingie.<SCRIPT LANGUAGE="JavaScript"><br />
<br />
<!-- Begin<br />
var ScrnSize = "UnCommon"<br />
<br />
if (navigator.appVersion.indexOf("4.") != -1 && <br />
navigator.appName.indexOf("Explorer") != -1) {<br />
ScrnSize = screen.width + "x" + screen.height;<br />
}<br />
if (navigator.appVersion.indexOf("4.") != -1 && <br />
navigator.appName.indexOf("Netscape") != -1) {<br />
ScrnSize = screen.width + "x" + (screen.height + 19); //Netscape sees 19 pixels less on Height<br />
}<br />
switch(ScrnSize) {<br />
case "640x480": document.write('<body bgcolor="#FF0000" text="#000000">');<br />
case "800x600": document.write('<body bgcolor="#00FF00" text="#000000">');<br />
case "1024x768": document.write('<body bgcolor="#0000FF" text="#000000">');<br />
case "1152x864": document.write('<body bgcolor="#FFFF00" text="#000000">');<br />
case "1280x1024": document.write('<body bgcolor="#AA0000" text="#000000">');<br />
case "1600x1200": document.write('<body bgcolor="#FF00FF" text="#000000">');<br />
case "1600x1280": document.write('<body bgcolor="#00AA00" text="#000000">');<br />
default: document.write('<body bgcolor="#FFFFFF" text="#000000">');<br />
}<br />
<br />
// The following 3 lines are for display only. They can safely be removed.<br />
document.write('Browser Type=' + navigator.appName + '<BR>');<br />
document.write('Browser Version=' + navigator.appVersion + '<BR>');<br />
document.write('Screen Resolution=' + screen.width + "x" + screen.height);<br />
<br />
// End --><br />
</script><!--content-->as for CSS (MUCH easier), use<STYLE><br />
BODY {<br />
background: #F0F0E0 url("background.jpg");<br />
background-repeat: repeat-y;<br />
background-attachment: fixed;<br />
}<br />
</STYLE><!--content-->Wow - neat! I agree about using CSS - I'm just getting into it now, too. I've only done text so far but what I've learned, I love it. I'll copy that all down and check out the background section of my CSS tutorial - haven't gotten there yet! This is a better way to learn, actually, because I can see it work. <br />
<br />
Thanks so much, transmothra! <br />
<br />
Say, since we're talking about CSS, which board do I go on for it? I wasn't sure when I looked at all the boards. I saw Client Side Scripting - but that isn't it, correct? Because CSS is Casading Style Sheets, right? <br />
<br />
It's been a rough month already - bear with me..
<!--content-->
<br />
I've been trying to jazz up some pages, give them a new look yada, yada, yada. I am using narrow left borders on some of the pages. I did over 100 pages and they looked great on my screen (800 x 600), then I went to my folks to see it at the 10?? resolution and the background, after hitting the 600 width, started over again. I know they do this, I know why and all that, but how on earth can that be avoided? I obviously used a background made for the 800 x 600 resolution, but I still know little about graphics and wondered how some sites make them look good no matter what resolution. The page doesn't look bad - in fact my folks thought it was supposed to look like that because just where the right side starts to repeat the border it's (luckily) lined up to make it look like the recipes are supposed to be "bordered" with the graphics.<br />
<br />
Anyway, I did make the site using percentages, so am I on the right track that it's the background? Then, another question - if I were to use a background made for the larger resolution, how would that affect it on other resolutions?<br />
<br />
I'll stop there because I'm getting more confused myself now!
<!--content-->what you can do is specify the same background color as the colors at the edge of your image, where the larger browsers will pick up...<br /><br />
THEN,<br />
use CSS to tell your background to either not repeat, or repeat along the x or y axis (vert or horiz).<br />
<br />
OR...<br />
you could use JavaScript to detect browser size and WRITE which background you want to use. this is also more easily accomplished using CSS.<!--content-->can't remember where i found this. in this example, different colors are used in a BODY tag according to the resolution detected. this of course could SO easily be modified to instead use a background image, or write in a CSS thingie.<SCRIPT LANGUAGE="JavaScript"><br />
<br />
<!-- Begin<br />
var ScrnSize = "UnCommon"<br />
<br />
if (navigator.appVersion.indexOf("4.") != -1 && <br />
navigator.appName.indexOf("Explorer") != -1) {<br />
ScrnSize = screen.width + "x" + screen.height;<br />
}<br />
if (navigator.appVersion.indexOf("4.") != -1 && <br />
navigator.appName.indexOf("Netscape") != -1) {<br />
ScrnSize = screen.width + "x" + (screen.height + 19); //Netscape sees 19 pixels less on Height<br />
}<br />
switch(ScrnSize) {<br />
case "640x480": document.write('<body bgcolor="#FF0000" text="#000000">');<br />
case "800x600": document.write('<body bgcolor="#00FF00" text="#000000">');<br />
case "1024x768": document.write('<body bgcolor="#0000FF" text="#000000">');<br />
case "1152x864": document.write('<body bgcolor="#FFFF00" text="#000000">');<br />
case "1280x1024": document.write('<body bgcolor="#AA0000" text="#000000">');<br />
case "1600x1200": document.write('<body bgcolor="#FF00FF" text="#000000">');<br />
case "1600x1280": document.write('<body bgcolor="#00AA00" text="#000000">');<br />
default: document.write('<body bgcolor="#FFFFFF" text="#000000">');<br />
}<br />
<br />
// The following 3 lines are for display only. They can safely be removed.<br />
document.write('Browser Type=' + navigator.appName + '<BR>');<br />
document.write('Browser Version=' + navigator.appVersion + '<BR>');<br />
document.write('Screen Resolution=' + screen.width + "x" + screen.height);<br />
<br />
// End --><br />
</script><!--content-->as for CSS (MUCH easier), use<STYLE><br />
BODY {<br />
background: #F0F0E0 url("background.jpg");<br />
background-repeat: repeat-y;<br />
background-attachment: fixed;<br />
}<br />
</STYLE><!--content-->Wow - neat! I agree about using CSS - I'm just getting into it now, too. I've only done text so far but what I've learned, I love it. I'll copy that all down and check out the background section of my CSS tutorial - haven't gotten there yet! This is a better way to learn, actually, because I can see it work. <br />
<br />
Thanks so much, transmothra! <br />
<br />
Say, since we're talking about CSS, which board do I go on for it? I wasn't sure when I looked at all the boards. I saw Client Side Scripting - but that isn't it, correct? Because CSS is Casading Style Sheets, right? <br />
<br />
It's been a rough month already - bear with me..
<!--content-->