Text over Image but what with RESOLUTION – Text is moving ?

  • I have added a text over a background image. No problem with that but on different screen resolution the text is in different place. When I resize the IE window the text is moving as well. How can I make it stay in one place: I used this code, which I added to my sidebar.php.

    I have tryed to chnage px to % but nothing helps the text is still moving.

    <style type=”text/css”>
    <!–
    #apDiv1 {
    position:absolute;
    left:58px;
    top:78px;
    width:59px;
    height:23px;
    z-index:1;
    }
    –>
    </style>
    </head>

    <body>
    <div id=”apDiv1″>TEXT</div>
    </body>

Viewing 3 replies - 1 through 3 (of 3 total)

  • Text is moving? As in, continuously moving, as in, with Javascript?

    Background images don’t resize, so it’s normal for the text to resize and move to a different place and for the background image to stay the same.

    Thread Starter hellows

    (@hellows)

    On a screen with 1024×768 the text is in correct place over the image but on my laptop which is using 1680×1050 res the text is in a different place. I know that 58px are not the same place on my screen as on a screen with a lower res. But how can I make sure the text stays over the image regardless of the screens res.

    PS: I know it is normal but on pages like let say yahoo.com the text links are over images and they are in the same place every screen.

    Difficult to say from your code, because I don’t know what it relates to. If you’ve got a backghround image such as a photo it won;t resize, so keeping things simple the normal thing to do is have a fixed size div.

    Within that fixed size div you’re going to have some text. At different resolutions the text might appear bigger or smaller in relation to that div, and therefore will appear to move left or right.

    For a paragraph of text that has room to expand downwards because you left lots of space until the bottom of the div. that’s not a major problem. For a button, it might be. For buttons, use text-align:center to keep it always centered.

    Another alternative is to make your div massive, and have the background image centred within that div. Percentage changes in the position of the text aren’t so noticeable.

    From my notes:

    There’s a very good analysis of the problems of positioning text within divs at:
    https://www.boutell.com/newfaq/creating/centervertically.html
    Another analysis here: https://www.wpdesigner.com/2007/06/04/wordpress-date-button/
    The official view here: https://www.w3.org/Style/Examples/007/center.html

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Text over Image but what with RESOLUTION – Text is moving ?’ is closed to new replies.