www.webdeveloper.com
Results 1 to 8 of 8

Thread: Image positioning for all screen sizes

  1. #1
    Join Date
    Jan 2011
    Posts
    5

    Image positioning for all screen sizes

    Hi,

    my image position keeps changing when I view my webpage in different screen sizes.
    Could someone please suggest a technique to standardize this?

    thanks a lot.

  2. #2
    Join Date
    Jan 2011
    Posts
    5
    can someone please help?

  3. #3
    Join Date
    Aug 2006
    Posts
    1,910
    Need some more detail to give you an exact answer. Presumably your image position is changing *relative to something* when you change the browser size? If you want an image to remain a fixed distance from something else, typically you set that position in pixels, via a margin or padding in your css.

    Dave

  4. #4
    Join Date
    Jan 2011
    Posts
    5
    Hi Dave,

    could you please give me a sample code. OK, heres my code. but the poisition keeps changing with different screen sizes.

    <img
    style="position: absolute; top: 420px; left: 884px; width: 155px; height: 99px;"
    src="eye.jpg" /></p>
    </a>
    <img
    style="position: absolute; top: 262px; left: 390px; width: 250px; height: 250px;"
    src="keybnw.jpg" />
    <p>

  5. #5
    Join Date
    Aug 2006
    Posts
    1,910
    Do you have this posted online somewhere? With that example you've absolutely positioned two images, and for me (tried both FF and IE8) they stay exactly where you've put them, regardless of the window size I use. So I don't see the problem...

    Dave

  6. #6
    Join Date
    Jan 2011
    Posts
    5
    DAve,

    am sorry i was not clear. I am not talking about different browsers. I am talking about different monitor sizes. if you view it in a bigger resolution monitor it is placed different compared to a small netbook

  7. #7
    Join Date
    Jan 2011
    Posts
    5
    check out the webpage i am building:

    http://injithinnakurangu.com/

    view this in 2 different screens of diferent sizes, they will be shifted

  8. #8
    Join Date
    Aug 2006
    Posts
    1,910
    I don't have a netbook to try out what you're saying, so I can't help with that. But it is not normal for a web site to be affected by the resolution of the monitor, rather it is based on the resolution of the browser window. Perhaps a netbook does something different, I don't know.

    But the site you've shown is mixing two methods, maybe that's what you're having trouble with. The images as positioned absolutely, and stay in the same place regardless of your browser size. But the text (say the H1 tag) is centered on the page. So regardless of the window size, your H1 tag is moved to the center of the page. Those two (center versus absolutely positioned) are different things, of course. If this is the issue you're trying to fix, I think perhaps what you want is the images NOT to be always in the same place, but to center them as well, so that on a smaller, or bigger window they will be centered, underneath your heading?

    Dave

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles