Can I Position an Object Without It Extending the Length of the Page?

Forum Moderators: not2easy

Message Too Old, No Replies

Can I Position an Object Without It Extending the Length of the Page?

duderdude2

7:05 am on Mar 16, 2005 (gmt 0)

I want to position an object on a lower portion of my website. However, I don't want the object to cause the page to be extended in length. Can this be done?

Here's a crappy picture showing what I want to do. The outline represents the visable screen:

--------------------------------
Ś Webpage Content goes here
Ś
Ś
Ś
Ś Webpage content ends
Ś
Ś
Ś--------------------------------

- Object that I want to add here (below webpage)

duderdude2

8:12 am on Mar 16, 2005 (gmt 0)

By longer in length, what i mean is that I don't want a scrollbar to appear to scroll down to the object. I want the browser to pretend that the object doesn't exist.

Saltminer

11:25 am on Mar 16, 2005 (gmt 0)

You can place it in a div and set it to not display


CSS
#hidden {
position:absolute;
top: 2000px;
left: 0;
display: none;
}
HTML
<div id="hidden">
Unseen text
</div>

Note that search engines are wise to hiding things with CSS. If you are feeding them a bunch of text and links that don't appear to the normal visitor you may get caught and penalized.

duderdude2

4:39 pm on Mar 16, 2005 (gmt 0)

Thanks for that, but I do actually want the Div to be visable, if the page extends that far down by itself. I can assure you my intentions aren't deviant, I don't want to hide any text.

I just want to place an object of every page and have it only be visable if the length of the page itself extends that low.

Saltminer

9:34 pm on Mar 16, 2005 (gmt 0)

OK, I see. You may be able to float a div, that would take it out of the page flow, and then margin it way down the screen out of sight. That may prevent the scrollbar from appearing. But it's an unusual layout requirement, I've never seen or tried anything like that.

createErrorMsg

1:30 pm on Mar 17, 2005 (gmt 0)

You may be able to float a div, that would take it out of the page flow, and then margin it way down the screen out of sight.

That's a good idea, but unfortunately doesn't work. Floated elements are actually placed in the flow before being removed and floated, so the margin creates a scrollbar. Even position:absolute doesn't accomplish this task. I don't believe this can be done with actual page content.

The exception would be if the material you want hidden on smaller screens is or can be an image. If so, you can set it as a background on the <body>. You would have to decide on a precise pixel height, though, and make the top of the image that high and empty, with the part of the image you want to become visible when the screen is larger below that.

For instance, if you wanted the material to show up at browser heights larger than 600px, you would need an image with 600px of empty space, followed by your material.

cEM