SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    position inside of the iframe

    Hello. I have an iframe that the src is a site that doesnt belong to me. I want the iframe to be in the middle of the site, not to start from the beginning. How can I do that?! thanks!

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Place the iframe in it's own wrapping div and center it with auto margins as I explained in Your Other Thread.

  3. #3
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by xionhack;
    ... I want the iframe to be in the middle of the site, not to start from the beginning.
    The iframe is an inline frame and as such it can only be centred by the text-align property on its container.

    However, you can give it a block display and then use auto side-margins to centre it.
    Code:
    iframe{
    	display:block;
    	margin:0 auto;
    }
    Happy ADD/ADHD with Asperger's

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi Erik,
    That makes sense about it being an inline element, I never really even noticed that.
    It appears that an iframe is a replaced inline element as well since it is able to take dimensions, similar to an image.

    I can't seem to find a detailed list of replaced inline elements.
    Would you happen to know where one might be found?

    The SP reference makes note of a few of them but does not go into detail with a thorough list.
    http://reference.sitepoint.com/css/replacedelements

    In this test code below I can set dimensions on the iframe which seem to confirm it as a replaced element.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Centered Iframe</title>
    <style type="text/css">
    body {
        background: #fff;
        font-size:100%;
    }
    #wrapper {
        width:900px;
        margin:0 auto;
        padding:0 0 20px;
        background:#777;
        text-align:center;/*center the iframe*/
    }
    iframe{
        width:50%;
        height:500px;
    }
    </style>
    </head>
    <body>
    
    <div id="wrapper">
        <h2>Main wrapping div with text-align:center</h2>
        <iframe name="myFrame" src="http://www.rayswoodworks.com/css-demos.html" frameborder="0"></iframe> 
    </div>
    
    </body>
    </html>

  5. #5
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the nearest of such list I can recall, it unsorted lists replaced and non replaced inline elements but refers to HTML 4.0 and maybe is not accurate in some statements.

    The iframe element is not a replaced element, it is embedding a document into an inline subwindow. It much acts like the img element though it lacks an intrinsic size, so instead of collapse unset lengths the UA is recommended to use: 300px width and 150px height.
    Happy ADD/ADHD with Asperger's

  6. #6
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Erik, Thanks for taking the time to explain and provide links.

  7. #7
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello. The only thing is that i dont want to position the iframe, but only the information inside of the iframe. I only want to display something that will be in the middle of the iframe.


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
  •