Background aligned with bottom problem - white space because node content loads too late

By ALT83 on 26 Feb 2006 at 15:57 UTC

Hi,

Trying to develop a theme with a background image which is a gradient aligned with the bottom of the body:

body {
  background: #FFFFFF url('images/gradient.gif') bottom repeat-x;
  height: 100%;
  margin: 0;
  padding: 0;
  color: #000000;
  font: 76% Verdana, Arial, Helvetica, sans-serif;
}

My problem is that because this element loads before the node content, the node content overlaps it instead of pushing the background down.

I've tried lots of different combinations, including having the bottom gradient as a table row, but this is no good when the page content is smaller then the viewing window as it effectively gives the same problem.

Any ideas?

Thanks,

Alex

Comments

Maybe.

t4him commented 26 February 2006 at 17:28

You may try adding another <div> after the node, then applying the background.gif to that <div>. That way it will alway's appear after the node is loaded reguardless of node height.

this is just a suggestion; I am away from my Development Computer and cannot try it first. You will have to add the <div> in the node.tpl.php file.

Let me know how it works out.

Thanks for your quick

ALT83 commented 26 February 2006 at 18:30

Thanks for your quick reply.

The problem with that is I want this gradient at the bottom of the page. By putting it in node.tpl.php it will appear at the bottom of each node.

I've tried divs with clear: both properties on both page.tpl.php and node.tpl.php to no avail...

I therefore have the choice between 2 configurations:
1) the gradient is associated with the body of the page - this doesn't work well in long pages e.g. node lists.

2) the gradient is the background of a 100% wide div or table at the bottom of everything. This work well with content such as node lists as it is simply pushed down with them. However, with shorter content, such as a node page the it is just white (my bgcolor) once the gradient div ends (60px in height)

Option 2 is better if there is no solution to option 1. And I guess add a lot of padding-bottom to nodes so that for most resolution there is no white. (But this gives unneccesary vertical scrolling...)

Oh the troubles of dynamic content!

How High is the 'Full Gradient'?

t4him commented 26 February 2006 at 18:59

What is the height of the full gradient part of the .gif image? Not the entire image?

You can scale, use %, your image height . . .

The trouble with that is,

ALT83 commented 26 February 2006 at 19:52

The trouble with that is, its not a pure gradient, diagonal lines etc. which would distort, plus there is a gradient at the top which is supposed to match.

I guess I'm just going to have to pad out the node and hope noone has a really high res screen ;)...

I'm sure other Drupallers must have the same problems....

Thanks for all your suggestions though.

Alex