Align image to bottom of nav bar

[codebreaker]

I want to place an image below my nav bar. I'd like the image to be below the text when there is space (when the page is long enough) but to float up under the text (text is covering the image) when the page is short. But I don't want to bottom-align the image to the page, because then on really long pages, the image will be way down the page. Is there an example of how to do this? Any suggestions? Thanks.

[tedster]

This sounds rather difficult to achieve with just standard HTML, because it involves conditions such as "long enough". It sounds like you have three different conditions in mind:

1. When the text is "long enough" - placed below the text content
2. When the text is "too short" - covered by the text
3. When the text is "too long" - ?

Have I got it right? Can you clarify?

[codebreaker]

Thanks for the reply tedster. This is tough to explain. The amount of space under the nav text will be dictated by the main content. When there is sufficient space under the nav text, the image should be below (in y coordinates) the nav text, but always just below. I mean that if there is a lot of space, it is still stuck to the bottom of the nav text. When there is not enough space for the text to be below the nav text, the nav text should flow over it (the image is under the text as in a photoshop layer).

Put another way, the image should be just above the bottom of the container when there is very little space, and just below the bottom of the nav text when there more space.

[tedster]

You will certainly need to quantify what "enough space" means. If you can do that, you can use Javascript to access the DOM and rewrite the position of the image - which you should probably give its own container div so you've got a clear ID attribute to work with. But as I said, this goes well beyond basic HTML.

[codebreaker]

"Enough" simply means more space (height in pixels) below the nav text and above the bottom of the container than the image (height in pixels).

[tangor]

Sounds like what you want to do is declare a nav div with a max height with the background image glued to the bottom. Your nav container could collapse, but cannot exceed. Is that what you have in mind? How to do that for all browsers I'm not sure.