SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    can graphics be positioned with reference to pixels?

    can graphics be positioned with reference to pixels? im trying to position a few photos on my page but they go all over the place . it is on wordpress. is it possible to position the photo by specifiying how many pixels left and right you want it?

    thanks

  2. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,097
    Mentioned
    153 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by rispodium View Post
    can graphics be positioned with reference to pixels? im trying to position a few photos on my page but they go all over the place . it is on wordpress. is it possible to position the photo by specifiying how many pixels left and right you want it?

    thanks
    By using CSS position absolute this is definitely possible.
    Take care however that you're only designing it on your screen, so positions from the left and top of the page might look very different on your monitor that it would on a monitor with a different resolution.
    Unless you use CSS position relative somewhere else on the website, but's quite too involved too sum up here and since there are lot's of good tutorials on the subject out there I say google is your friend
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  3. #3
    SitePoint Member
    Join Date
    May 2009
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The W3 schools position attribute -- look it over on google for css positioning

    h2
    {
    position:absolute;
    left:100px;
    top:150px;
    }

    More examples at the bottom of this page.
    Definition and Usage

    The position property is used to position an element.

    Default value: static
    Inherited: no
    Version: CSS2
    JavaScript syntax: object.style.position="absolute"

    The position property is supported in all major browsers.

    Note: No versions of Internet Explorer (including IE8) support the property value "inherit".

    Property Values

    Value Description
    absolute Generates an absolutely positioned element, positioned relative to the first parent element that has a position other than static. The element's position is specified with the "left", "top", "right", and "bottom" properties

    fixed Generates an absolutely positioned element, positioned relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties

    relative Generates a relatively positioned element, positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position

    static Default. No position, the element occurs in the normal flow (ignores any top, bottom, left, right, or z-index declarations)

    inherit Specifies that the value of the position property should be inherited from the parent element

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    can graphics be positioned with reference to pixels? im trying to position a few photos on my page but they go all over the place . it is on wordpress. is it possible to position the photo by specifiying how many pixels left and right you want it?
    They can be (any element can be), but as Scallio warned, that's not necessarily a good idea.

    You should probably post what you have and what it looks like in the CSS section of Web Design here.

  5. #5
    SitePoint Member
    Join Date
    Oct 2009
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cloudtap View Post
    The W3 schools position attribute -- look it over on google for css positioning

    h2
    {
    position:absolute;
    left:100px;
    top:150px;
    }

    More examples at the bottom of this page.
    Definition and Usage

    The position property is used to position an element.

    Default value: static
    Inherited: no
    Version: CSS2
    JavaScript syntax: object.style.position="absolute"

    The position property is supported in all major browsers.

    Note: No versions of Internet Explorer (including IE8) support the property value "inherit".

    Property Values

    Value Description
    absolute Generates an absolutely positioned element, positioned relative to the first parent element that has a position other than static. The element's position is specified with the "left", "top", "right", and "bottom" properties

    fixed Generates an absolutely positioned element, positioned relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties

    relative Generates a relatively positioned element, positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position

    static Default. No position, the element occurs in the normal flow (ignores any top, bottom, left, right, or z-index declarations)

    inherit Specifies that the value of the position property should be inherited from the parent element


    Ya I am agree with you nice post dear keep posting


    Thanks

  6. #6
    SitePoint Member
    Join Date
    Oct 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    I read some opinion in this topic. I do not agree above ideal. We can find out some articles at about.com, I think that it is useful for our community.

    Rgs

  7. #7
    SitePoint Member
    Join Date
    Nov 2009
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would use padding instead of absolute positioning. This is much more consistent cross-browser, and is easier to code frankly. IE6 does some funky things with you abuse absolute positioning, and it entails larger CSS because you'll have to add position:relative to the container. It's much cleaner and easier to structure your markup semantically, and just use padding/margins for positioning.

  8. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    I'm not too hot on using padding unless the padding is invisible. Margins I trust more but then I have to worry/watch out for margin collapse.


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
  •