SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)

    display absolute.

    I was wondering if there was a way to cause an AP element to display as something other than block or none? I figure that if this is possible its an override of some standard setting, but i just dont know how or if it's even possible.


    example:

    p{ position: absolute; top: 0; right:0 ; display:table-cell; vertical-align:middle; height:200px;}

    <p>sample text</p>

    The sample text will fail to display in the middle, because the P element is being displayed as a block and not a table-cell. I think I know a work around, but it requires extra mark up :/

  2. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,031
    Mentioned
    152 Post(s)
    Tagged
    2 Thread(s)
    display: inline;

    ?

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, position:absolute overweighs any other display property . So no, it's impossible.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Thanks, Ryan. I just wanted to confirm that.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Glad to help . If you have questions on what does what with properties (hard to explain) then you can go to w3.org and I'm sure what they say there can back up what I said (or vice versa)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    The sitepoint reference shows a table of values.

    Position the element first and then align the inner element.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    p {
        background:red;
        position: absolute;
        top: 0;
        right:0;
        height:200px;
    }
    span {
        display:table-cell;
        vertical-align:middle;
        height:200px;
    }
    </style>
    </head>
    <body>
    <p><span>sample text</span></p>
    </body>
    </html>
    (Not ie7 and under)


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
  •