SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Positioning unaffactable bu Screen resolution or Zoom, Possible?

    Hello SitePointers !!!

    Well, everytime I want to use CSS for positioning an element in a particular place, I tend to test incrasing and decreasing margins until I reach the position I want.

    Well, I've been using em, px and %, but the problem is as soon as the page is seen on a different resolution, everything I have been positioning for hours turns to a mess.

    If you're already sleeping, well here is an example: contactmailing . 50webs . com / webpage.html

    Margins are in px now, I had tried with em, and % before but the problem persists.

    In my screen, every element is placed where I want it to be, Any other resolution or any Zoom In or Out , nothing maintains its appropriate position.

    Could you please advise me few techniques I should follow to avoid such isses.

    Thank you!

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,759
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    That's the drawbacks of absolute positioning. You have to rewrite your CSS to use floats/margins as they are a much more stablle method
    Floats VS Position.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you RyanReese,

    Well, is it still called absolute even when I always try to postion according to the relative position.

    Well sometimes, and actually in that example, I want to position some text over an image or even a small photo over another bigger one.

    In my example, when the text is getting bigger or smaller, the photo always keep same width and height and that's actually a problem

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,759
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ammoun View Post
    Thank you RyanReese,

    Well, is it still called absolute even when I always try to postion according to the relative position.
    Even still. It's actually worse IMO .

    Well sometimes, and actually in that example, I want to position some text over an image or even a small photo over another bigger one.
    If you know what your doing then AP should be just fnie, just not for the entire layout!

    In my example, when the text is getting bigger or smaller, the photo always keep same width and height and that's actually a problem [/QUOTE]
    Photos should be in px to keep it looking good. It shouldn't be in %'s or anything else unless you have a reason.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, Ryan let's make it more concrete example... Let's suppose a simple one: Well I want to position a small photo let's call it "small" over another bigger one let's call it "big" in a very specific position... How would you suggest to position them... which one should be floated, which should be Absolute and which Relative.

    Please forgive my illetracy, but I just try to understand things with concrete examples

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,759
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Well it depends on how the setup was, but I would most likely AP it into place.

    That's fine, but to have AP set up your actual layout structure is not ok.

    Although you could just rework the image to include both couldn't you ?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh well, the idea is fine, but when it comes to positioning the input field I guess it would turn out to be the same issue

    I appreciate your patience, and if you don't mind I may erase everything and just put minimum code to make the testings from scratch.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Let's suppose a simple one: Well I want to position a small photo let's call it "small" over another bigger one let's call it "big" in a very specific position...
    You put both images in the same container which itself has position:relative applied.

    You then position the second image exactly where you need it to be on top of the bigger image and it will always stay with that image no matter if the parent is moved anywhere.

    Absolute elements are placed in relation to the nearest positioned ancestor and if none exists then they are placed from the viewport.

    You just need to set a stacking context with position:relative and then child absolute elements relate to that parent and not the viewport.


Bookmarks

Posting Permissions

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