Text moves under different resolutions

http://rssreaderbg.n开发者_C百科et/pubsubbub/example/cssexam/index.php Click on the clover.After the animation text shows. On bigger resolutions text changes his position.It because position: absolute; top: 35px; left: 400px; But I don't know how to position it in another way. If I set some margins or paddings ,whole page moves down.

---

You have the position: absolute; referencing the body (i.e. you havn't set it anywhere else)

If you put

position: relative;

on your header in the CSS, it should make the position absolute relative to that div, so resizing the window won't move the text.

#header {
    background: url("headers.jpg") repeat-x scroll 0 0 transparent;
    position: relative; /*add this line in*/
    height: 139px;
    margin: 0 auto;
    width: 990px;
}