Tables page w/ Gradient sidebar

S

Studio472

New Member
I have a page based on tables. Menu bar is placed on the left and this spans 2 rows. The right side is a top bar and content (two rows).

On the left bar, I have a gradient. The gradient fades from white to green top to bottom (theres a reason for it to go top to bottom...) The image is 1000px in height. I thought this would be big enough but its not. One of my pages length goes down 3x as long (say 3000px) from top to bottom. I have it set to repeat as a default. Instead of a repeat of the background gradient, I would be fine with a solid color (same as gradient) but I don't believe you can use a bground image AND a bground color...

The only thing I can think of is to create the super-long gradient to match the style I need it to. Is there a better way?

I thought about creating a new row on the left side with a solid color in it, but with the height problems (with tables) in Firefox, I couldn't get this to work.

Any ideas? Thanks everyone.
 
voodish

voodish

New Member
You can use a background color and background image; like so:

CSS code
Code: 
body {
  background: #009966 url(background.jpg) ;
  }

Where #009966 is the hexadecimal for 'a green color' change this value accordingly.

Hope this helps :)
 
S

Studio472

New Member
It's not working, not sure why...

I tried also making the image fixed...but it doesn't position it correctly when you resize the web page.

Still lost
 
Last edited:
S

Studio472

New Member
Progress?

Using this code, I get what I want...sortof...

td.left
{
vertical-align : top;
background : url(leftbar.jpg);
background-attachment : fixed;
width : 225px
}

The problem is that it seems to put down TWO background images. Both scroll properly which is what I want. But one grows/shrinks/moves when you resize the window while the other stays put. Any mods in the code I've tried just messes with the image that is the way it should be, not the repeated one.

Ideas?
 
voodish

voodish

New Member
Ahh, I see, you will need to wrap it in a DIV so that you can style it effectively, try example below:

CSS Code
Code: 
<style>
	#wrapper table td.left {background: #009966 url('images/bg-head.jpg') top no-repeat; width:225px}
</style>

HTML Code
Code: 
<div id="wrapper">
	<table width="100%" border="0" cellspacing="0" cellpadding="10">
  		<tr>
    		<td rowspan="2" align="left" valign="top" class="left">sidebar</td>
    		<td>content</td>
  		</tr>
	</table>
</div>

Complete document to try
Code: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>voodish</title>
<style>
	#wrapper table td.left {background: #009966 url('images/bg-head.jpg') top no-repeat; width:225px}
</style>
</head>

<body>

<div id="wrapper">
	<table width="100%" border="0" cellspacing="0" cellpadding="10">
  		<tr>
    		<td rowspan="2" align="left" valign="top" class="left">sidebar</td>
    		<td>content</td>
  		</tr>
	</table>
</div>

</body>
</html>

Hope that helps :)
 
S

Studio472

New Member
Thanks!

Thanks Voodoo, the original suggestion worked once I tweaked it.

Thanks for you help!


td.left
{
vertical-align : top;
background : url(leftbar1.jpg);
background-repeat : no-repeat;
background-color: #71AFB7;
width : 225px
}
 
S

Studio472

New Member
Because the old site was based on tables, frames didn't cut it and I could get it to do what I wanted with frames.

Stupid question... Is there a better way?
 
You must log in or register to reply here.
Top