Usnig spacer GIFs

  • Thread starter Thread starter Trevor L.
  • Start date Start date
T

Trevor L.

I read a recent post from Regina about using transparent GIFs as spacers

I do this quite often, but I have a small problem.

I have a div which I want to go to the bottom of the page. There is a
background image which I would like to extend further down than the text
and/or images etc. actually extend on the page (just to look prettier).

I found that this is the *only* way I can do it, where class="XXX" specifies
a background image.

<div class="XXX">
Text
More text
Images
etc.
....
display ends here

<table>
<tr><td>
<img src="images/display/blank.gif" width="0" height="400px" alt="">
</td></tr>
</table>

</div>

Because the amount of text, etc. varies from page to page, the height
parameter has to tailored to each page. On one page it is 391px, on another
95px, etc.

Is there a way to display this GIF down the left of the page with a fixed
height, say 600px and then put the rest of the page to the right?
This way, if the rest is less than 600px there will still be the filler with
a background image. If it is more, then it will expand.

I have tried lots of things and none seem to work.
 
Create your page w/ a 2 column table
- 1st Column a fixed height cell w/ your transparent spacer 600 px high
- 2nd Column your content
--

_____________________________________________
SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
"Warning - Using the F1 Key will not break anything!" (-;
To find the best Newsgroup for FrontPage support see:
http://www.frontpagemvps.com/FrontPageNewsGroups/tabid/53/Default.aspx
_____________________________________________


|I read a recent post from Regina about using transparent GIFs as spacers
|
| I do this quite often, but I have a small problem.
|
| I have a div which I want to go to the bottom of the page. There is a
| background image which I would like to extend further down than the text
| and/or images etc. actually extend on the page (just to look prettier).
|
| I found that this is the *only* way I can do it, where class="XXX" specifies
| a background image.
|
| <div class="XXX">
| Text
| More text
| Images
| etc.
| ...
| display ends here
|
| <table>
| <tr><td>
| <img src="images/display/blank.gif" width="0" height="400px" alt="">
| </td></tr>
| </table>
|
| </div>
|
| Because the amount of text, etc. varies from page to page, the height
| parameter has to tailored to each page. On one page it is 391px, on another
| 95px, etc.
|
| Is there a way to display this GIF down the left of the page with a fixed
| height, say 600px and then put the rest of the page to the right?
| This way, if the rest is less than 600px there will still be the filler with
| a background image. If it is more, then it will expand.
|
| I have tried lots of things and none seem to work.
|
| --
| Cheers,
| Trevor L.
| Website: http://tandcl.homemail.com.au
|
|
 
Stefan said:
Create your page w/ a 2 column table
- 1st Column a fixed height cell w/ your transparent spacer 600 px
high
- 2nd Column your content
Click to expand...

I thought it was too good to be true

Here is my attempt to place the gif in one column and the main content in
another
http://tandcl.homemail.com.au/template.html

The result is that the main content appears *below* the spacer. But the
background image extends even further.

Also, the contents doesn't align properly.
This contents are, in this example, a <div> containing a line generated by
the function breadcrumbs() and another <div> containing a button.
The first <div> left aligns as required, but the next centers to the
previous <div>, not to the body itself, which is what I want.

What do I try next?
 
A follow-up to my previous post
Here is my attempt to place the gif in one column and the main
content in another
http://tandcl.homemail.com.au/template.html

The result is that the main content appears *below* the spacer. But
the background image extends even further.
Click to expand...

I think the main content (now just a button) actually centres in the
avalable space in both the x and y directions.
Also, the contents doesn't align properly.
Click to expand...
I fixed the align by adding width="100%" to the <td> tag
 
Back
Top