Dear All,
Oh, my; my new layout looks fine at 800x600: a 3-column design, using A List Apart's faux columns to produce full-length color in left and right sides of my pages, while content is in the main (middle) column.
Then I check with 1024x728 resolution, and everything goes kaput, haha! Fun.
At least, though, I can finally see the background color my (copied from A List Apart) code specifies - and I could barely see it at all at 800x600. But oh, my, it does appear at 1024x728. Cute.
The code I'm using (artifically wrapped to try to prevent horizontal scrolling in my post) is:
body.bc1 {background: #ccc
url("images/logos/blanket-09c.gif")
repeat-y 50% 0;}
I have four of these, classed .bc1, .bc2, .bc3, and .bc4.
I notice my (temporary?) green headings and footer (footings?) areas extend the widths of the screen when I change to 1024x768, and if my brain worked anything like that of a programmer, that should instantly suggest how I should fix the problem I'm experiencing, which is that the left and right columns don't stretch to fill the screen at the higher resolution.
So I immediately suspect the problem might be in my use of, or rather, failure to understand - selectors. I can read all about selectors and grouping, and still not understand; that's going to take time for me to track well enough actually to understand it. For now, I'm merely mightily confused.
But maybe if I look at my CSS for the headings and footer area (in which I specify, for the moment, that green background color), I'll get some kind of clue. But my mind breaks!
Also, I wonder if the problem is that my .gif is 740px wide! Does it need to be a lot wider? Say, 1000 px? for a 1024x768 resolution? If I make a .gif that wide (no problem to do - say, 10 minutes), can I use that same one for both, or multiple, resolutions? I'd think so. But then would I have to specify something about overflow being hidden, or somesuch?
Am I lost? Yes!
Can anybody help me sort this out? Point me in a useful direction? See the URL I've now added to my signature to see the effects I mention. They should be visible all over my site.
Sun, 13 Mar 2005 21:03:17Gosh, I'm tired; well, pretty funny!
It was my .gif - not wide enough. How is 740 (not 720) pixels to spread across a 1024x768 viewport? Well, it doesn't. No wonder things looked funny.
So I made new .gifs, 1000 pixels wide. Maybe I should make them 1200px wide, for people who use even higher resolutions.
As soon as I substituted 1000-pixel-wide .gifs for the 740px wide ones, the pages looked fine at 1024x768, and also, at 800x600.
So I guess that teaches me another lesson - it's okay for there to be overflow in the lower resolution. I think. I don't see any problems, anyway. Also, that helped me learn more about the meanings of the code I copied. W3C has a section called "Colors and Backgrounds" that really helped me with my earlier question in another thread (about small gaps) about what percentages mean, used with background images.
Sun, 13 Mar 2005 22:48:08
Oh, my; my new layout looks fine at 800x600: a 3-column design, using A List Apart's faux columns to produce full-length color in left and right sides of my pages, while content is in the main (middle) column.
Then I check with 1024x728 resolution, and everything goes kaput, haha! Fun.
At least, though, I can finally see the background color my (copied from A List Apart) code specifies - and I could barely see it at all at 800x600. But oh, my, it does appear at 1024x728. Cute.
The code I'm using (artifically wrapped to try to prevent horizontal scrolling in my post) is:
body.bc1 {background: #ccc
url("images/logos/blanket-09c.gif")
repeat-y 50% 0;}
I have four of these, classed .bc1, .bc2, .bc3, and .bc4.
I notice my (temporary?) green headings and footer (footings?) areas extend the widths of the screen when I change to 1024x768, and if my brain worked anything like that of a programmer, that should instantly suggest how I should fix the problem I'm experiencing, which is that the left and right columns don't stretch to fill the screen at the higher resolution.
So I immediately suspect the problem might be in my use of, or rather, failure to understand - selectors. I can read all about selectors and grouping, and still not understand; that's going to take time for me to track well enough actually to understand it. For now, I'm merely mightily confused.
But maybe if I look at my CSS for the headings and footer area (in which I specify, for the moment, that green background color), I'll get some kind of clue. But my mind breaks!
Also, I wonder if the problem is that my .gif is 740px wide! Does it need to be a lot wider? Say, 1000 px? for a 1024x768 resolution? If I make a .gif that wide (no problem to do - say, 10 minutes), can I use that same one for both, or multiple, resolutions? I'd think so. But then would I have to specify something about overflow being hidden, or somesuch?
Am I lost? Yes!
Can anybody help me sort this out? Point me in a useful direction? See the URL I've now added to my signature to see the effects I mention. They should be visible all over my site.
Sun, 13 Mar 2005 21:03:17Gosh, I'm tired; well, pretty funny!
It was my .gif - not wide enough. How is 740 (not 720) pixels to spread across a 1024x768 viewport? Well, it doesn't. No wonder things looked funny.
So I made new .gifs, 1000 pixels wide. Maybe I should make them 1200px wide, for people who use even higher resolutions.
As soon as I substituted 1000-pixel-wide .gifs for the 740px wide ones, the pages looked fine at 1024x768, and also, at 800x600.
So I guess that teaches me another lesson - it's okay for there to be overflow in the lower resolution. I think. I don't see any problems, anyway. Also, that helped me learn more about the meanings of the code I copied. W3C has a section called "Colors and Backgrounds" that really helped me with my earlier question in another thread (about small gaps) about what percentages mean, used with background images.
Sun, 13 Mar 2005 22:48:08