how to scroll upwards without overlapping the image on top of the page [Archive]

View Full Version : how to scroll upwards without overlapping the image on top of the page

jiam1

04-24-2008, 02:04 AM

Would appreciate if someone could advise:

*left side of webpage
-background image

*right side of webpage (top)
-has an image that is the title for the page

*right side of webpage (bottom)
-news article

May I know how to let the right side "title image" stay put and enable the news article to be scrolled upwards without overlapping the "title image"?

Many thanks in advance.

Medyman

04-24-2008, 02:37 AM

I *think* you might be needing the position:fixed CSS property (http://www.w3schools.com/Css/pr_class_position.asp), but I can't be sure by your description.

Do you have some sample code or better yet a link to a page where we can see the problem? Your description is kind of vague and I don't fully understand what you're trying to accomplish.

jiam1

04-24-2008, 03:13 AM

The codes that I used are as follows:

<HTML><HEAD>
<BODY> <p align=right><img src=title.jpg>
<TABLE BORDER="1" table width=45% CELLPADDING="5" align=right>
<tr><td>lengthy news article.........</td>
</BODY>
</html>

CSS
<BODY
{ background-image: url("image.gif") no-repeat fixed bottom left;}

Medyman

04-24-2008, 02:33 PM

1. The table element isn't meant for creating layouts. Consider using CSS, will make what you want to do a lot easier.

2. The position:fixed CSS property is what you're after. Google it for some more resources.

jiam1

04-24-2008, 11:12 PM

Thanks for your input, Medyman.
I googled using "fixed CSS property" and the following result appears:

The position:fixed CSS property doesn't get used much because IE for Windows (through version 6) still doesn't support this very useful behavior.

Any advice please?

Medyman

04-24-2008, 11:20 PM

You mean you want it to work in all browsers? Why would you do that? I personally like to gamble with what my users are going to see.

lol.

The thing about IE bugs is that sometimes you can use them for good instead of evil. This is one such case.

More information: http://www.cssplay.co.uk/layouts/fixed.html