Printable View
I´m in a novice user of html and css and there´s something I am cannot get to work. I have some images that should be positioned at at certain coordinates. I have done this in css like this:
#trappediagram {
position:absolute;
bottom: 300px;
left: 175px;
}
For some reason, this image moves when I refresh my internet browser while scrolling down. Can anyone help me on this?
The bottom attribute is in relation to the bottom of the objects parent element. The parent element is the one that first encapsulates the child. For example, if you were to have <div><p><span>Text or Object</span></p></div>, the P tag is the parent of the SPAN tag and also the child of the DIV tag. The SPAN tag is not a child of the DIV tag, but a child of its child(P).
If you would like the image to be placed 300px from the bottom of the opening screen, create a DIV or TABLE/TR/TD the size of your desired opening screen (perhaps width:800px;height600px) and make the image a child of it. Otherwise, to make the image relative to the entire document, make sure the image is a child of the BODY tag.
I hope this helps as I'm not sure quite how you want your image to be.
Also, please keep in mind that the bottom attribute was not adopted in Netscape Navigator until version 6.0 and Internet Explorer until version 5.0!
Thank you very much Nephalim. You have been most helpful. I´ll try take a look at it.
I think I found the problem. I used the bottom attribute to muliple images at different places which resulted in confusion I guess. Seems like the top attribute worked better. Thanks again.