Repeatable Images - Oh No!

[8point2]

Hi! I'm designing my first site for a client, and hosted with TCH. These forums are really great, and have been useful for finding answers. I'll try to explain the problem I'm facing trying to finish my site, and hope that someone out there will be able to help.

 

The main page sits in the middle of the screen, and when the browser width extends out, the user just sees a solid background color. But dividng the main page from the background, I have used a one-pixel high graphic with a "drop shadow" effect, which I basically just repeated to a fixed pixel height so that it would run to the bottom of the screen, creating two vertical shadow lines. (hope that was clear)

 

The problem I've found, is that if the user increases their browser TEXT size (and the target audience for the site includes many elderly users), these shadows can fall short of the bottom of the page, because the text has grown so much in size.

 

Is there an elegant way to fix this problem? Perhaps with CSS? I am not very good with CSS for laying out page elements.

 

Any help would be great. Thanks!

[TCH-RobertM]

Hello 8point2,

 

Can you provide a link ? or possibly the code so that we can see ?

 

Thank you

[owatagal]

8point2,

 

I think what you're saying is that you have some sort of main content box with a drop shadow (on the left and right?) that you've set to specific heights -- say 600px. And so when you increase the text size, the window scrolls but because you set the drop shadows to a specific height they don't increase. Is that it?

 

If it is, take a look at A List Apart's faux column layout:

 

http://www.alistapart.com/articles/fauxcolumns/

 

This has you use a background image that repeats down the page--it's still just 1px high, but it's however wide your content is. You don't set the height, so it adjusts with your content; it'll always go to the bottom of the page. Pretty elegant setup, actually.

[D.Slatk]

Hi! I'm designing my first site for a client, and hosted with TCH. These forums are really great, and have been useful for finding answers. I'll try to explain the problem I'm facing trying to finish my site, and hope that someone out there will be able to help.

 

The main page sits in the middle of the screen, and when the browser width extends out, the user just sees a solid background color.  But dividng the main page from the background, I have used a one-pixel high graphic with a "drop shadow" effect, which I basically just repeated to a fixed pixel height so that it would run to the bottom of the screen, creating two vertical shadow lines.  (hope that was clear)

 

The problem I've found, is that if the user increases their browser TEXT size (and the target audience for the site includes many elderly users), these shadows can fall short of the bottom of the page, because the text has grown so much in size.

 

Is there an elegant way to fix this problem?  Perhaps with CSS? I am not very good with CSS for laying out page elements.

 

Any help would be great. Thanks!

<{POST_SNAPBACK}>

Yeah, I don't really udnerstand either, but I'll try to help. If your problem is when the shadow starts to tile itself after the cell it's in is stretched, you can control tiling with css.

 

You can assign the cell containing the background a css class. First, remove the background="..." attribute from the <td> tag. Then, add a class, using a name that you can identify the cell easily with. For example, <td class="rightDropshadow">. Now go to your CSS, and use something along the following lines:

 

.rightDropshadow

{

background-image: url(UrlToBackground.jpg);

background-repeat: repeat-y;

background-position: top left;

}

 

For the repeat you have the following options:

 

repeat

repeat-x

repeat-y

no-repeat

 

Repeat-x repeats it once on the x axis (horizontally). Repeat-y will repeat it on the y axis (vertically). Repeat will just tile it throughout the whole thing. No-repeat will use the image just once and not repeat it at all.

 

For the position, it determines where the first instance of the background is placed in the available space to use as the background:

 

top left

top center

top right

center left

center center

center right

bottom left

bottom center

bottom right

 

Hope this helps some... css is really ncie to use for controlling backgrounds.