FireFox/NS experts: <iframe> inside <div> question -- help pls!

Discussion in 'HTML' started by Julia Briggs, Nov 12, 2004.

  1. Julia Briggs

    Julia Briggs Guest

    How do I construct a <iframe> or equivalent for FireFox/NS browsers,
    inside a screen centered <div> tag? Can it be done?
     
    Julia Briggs, Nov 12, 2004
    #1
    1. Advertising

  2. Julia Briggs

    mscir Guest

    Julia Briggs wrote:

    > How do I construct a <iframe> or equivalent for FireFox/NS browsers,
    > inside a screen centered <div> tag? Can it be done?


    Does this work for you?

    <style type="text/css">
    ..inline {
    background-color: #FFAABB;
    text-align: center;
    height: 520px;
    width: 520px;
    }
    ..if1{
    width: 500px;
    height: 500px;
    }
    </style>


    <div class="inline">
    <iframe class="if1" SRC="http://www.google.com">
    </iframe>
    </div>
     
    mscir, Nov 12, 2004
    #2
    1. Advertising

  3. Julia Briggs

    RobB Guest

    mscir <> wrote in message news:<>...
    > Julia Briggs wrote:
    >
    > > How do I construct a <iframe> or equivalent for FireFox/NS browsers,
    > > inside a screen centered <div> tag? Can it be done?

    >
    > Does this work for you?
    >
    > <style type="text/css">
    > .inline {
    > background-color: #FFAABB;
    > text-align: center;
    > height: 520px;
    > width: 520px;
    > }
    > .if1{
    > width: 500px;
    > height: 500px;
    > }
    > </style>
    >
    >
    > <div class="inline">
    > <iframe class="if1" SRC="http://www.google.com">
    > </iframe>
    > </div>


    Since this is a JS group, I assume you meant programmatically...

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>foo</title>
    <style type="text/css">

    html, body {
    width: 100%;
    height: 100%;
    }
    #container {
    width: 70%;
    height: 70%;
    margin: 40px auto;
    background: pink;
    }

    </style>
    <script type="text/javascript">
    //<![CDATA[

    function IFramePopulate(ctr_id, src)
    {
    var ctr;
    if (ctr = document.getElementById(ctr_id))
    {
    while (ctr.hasChildNodes())
    ctr.removeNode(ctr.lastChild);
    var ifrm = document.createElement('IFRAME');
    //ifrm.frameBorder = 0; //optional
    ifrm.style.width = String(ctr.offsetWidth + 'px');
    ifrm.style.height = String(ctr.offsetHeight + 'px');
    ctr.appendChild(ifrm);
    ifrm.src = src;
    }
    }

    //]]>
    </script>
    </head>
    <body>
    <div id="container"></div>
    <div style="text-align:center;"><a href="#null"
    onclick="IFramePopulate('container',
    'http://www.google.com')">go</a></div>
    </body>
    </html>
     
    RobB, Nov 13, 2004
    #3
  4. Julia Briggs

    Randy Webb Guest

    RobB wrote:
    > mscir <> wrote in message news:<>...
    >
    >>Julia Briggs wrote:
    >>
    >>
    >>>How do I construct a <iframe> or equivalent for FireFox/NS browsers,
    >>>inside a screen centered <div> tag? Can it be done?

    >>
    >>Does this work for you?
    >>
    >><style type="text/css">
    >>.inline {
    >> background-color: #FFAABB;
    >> text-align: center;
    >> height: 520px;
    >> width: 520px;
    >>}
    >>.if1{
    >> width: 500px;
    >> height: 500px;
    >>}
    >></style>
    >>
    >>
    >><div class="inline">
    >><iframe class="if1" SRC="http://www.google.com">
    >></iframe>
    >></div>

    >
    >
    > Since this is a JS group, I assume you meant programmatically...


    Why rely on a JS dependency when its not needed?

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq
    Answer:It destroys the order of the conversation
    Question: Why?
    Answer: Top-Posting.
    Question: Whats the most annoying thing on Usenet?
     
    Randy Webb, Nov 13, 2004
    #4
  5. Julia Briggs

    Julia Briggs Guest

    Ok, how can I get that to auto-center as an absolute layer? I've tried
    different ways, but can only get it to display in a fixed position.

    Julia
     
    Julia Briggs, Nov 13, 2004
    #5
  6. Julia Briggs

    mscir Guest

    Julia Briggs wrote:

    > Ok, how can I get that to auto-center as an absolute layer? I've tried
    > different ways, but can only get it to display in a fixed position.


    If you mean how can you center the div on the page using CSS, while this
    might not be the best newsgroup for a CSS inquiry, did you try:

    margin: auto;

    maybe something like:

    ..div1{
    width: 420px;
    height: 420px;
    margin: auto; /* center div on page */
    text-align: center; /* center iframe in div */
    }

    <div class='div1'>
    <iframe>
    </iframe>
    </div>
     
    mscir, Nov 13, 2004
    #6
  7. Julia Briggs

    Toby Inkster Guest

    Julia Briggs wrote:

    > Ok, how can I get that to auto-center as an absolute layer?


    div.layer {
    position: absolute;
    left: 50%;
    width: 200px;
    margin-left: -100px;
    }

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
     
    Toby Inkster, Nov 13, 2004
    #7
  8. Julia Briggs

    RobB Guest

    Toby Inkster <> wrote in message news:<>...
    > Julia Briggs wrote:
    >
    > > Ok, how can I get that to auto-center as an absolute layer?

    >
    > div.layer {
    > position: absolute;
    > left: 50%;
    > width: 200px;
    > margin-left: -100px;
    > }


    > Randy Webb wrote:
    >
    > Why rely on a JS dependency when its not needed?


    Thought I covered that: "Since this is a JS group, I assume you meant
    programmatically..."

    Took the meaning of "construct" as signifying "after load" as
    otherwise it's simply an HTML-related query. Could be incorrect,
    although this:

    > Ok, how can I get that to auto-center...


    ....didn't help elucidate the issue. fwiw...

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>foo</title>
    <style type="text/css">

    html, body {
    width: 100%;
    height: 100%;
    }
    #container {
    position: relative;
    width: 600px;
    height: 400px;
    margin: 40px auto;
    border: 3px #000 double;
    background: pink;
    }

    </style>
    <script type="text/javascript">
    //<![CDATA[

    function IFramePopulate(ctr_id, src)
    {
    var ctr;
    if (ctr = document.getElementById(ctr_id))
    {
    while (ctr.hasChildNodes())
    ctr.removeNode(ctr.lastChild);
    var ifrm = document.createElement('IFRAME');
    ctr.appendChild(ifrm);
    ifrm.frameBorder = 0; //optional
    ifrm.style.width = '450px';
    ifrm.style.height = '300px';
    ifrm.style.position = 'absolute';
    ifrm.style.left = String((ctr.offsetWidth - ifrm.offsetWidth) * .5)
    + 'px';
    ifrm.style.top = String((ctr.offsetHeight - ifrm.offsetHeight) * .5)
    + 'px';
    ifrm.src = src;
    }
    }

    //]]>
    </script>
    </head>
    <body>
    <div id="container"></div>
    <div style="text-align:center;"><a href="#null"
    onclick="IFramePopulate('container',
    'http://www.google.com')">go</a></div>
    </body>
    </html>

    Yes. I know, it's JS....
     
    RobB, Nov 15, 2004
    #8
  9. Julia Briggs

    Randy Webb Guest

    RobB wrote:
    > Toby Inkster <> wrote in message news:<>...
    >
    >>Julia Briggs wrote:
    >>
    >>
    >>>Ok, how can I get that to auto-center as an absolute layer?

    >>
    >>div.layer {
    >> position: absolute;
    >> left: 50%;
    >> width: 200px;
    >> margin-left: -100px;
    >>}

    >
    >
    >>Randy Webb wrote:
    >>
    >>Why rely on a JS dependency when its not needed?

    >
    >
    > Thought I covered that: "Since this is a JS group, I assume you meant
    > programmatically..."


    Does that mean if they ask how to set the color of an element, in a JS
    group, then you will give them a JS solution instead of an HTML/CSS
    solution?

    Just because a question is asked in a particular group does not mean
    that the answer is necessarily the topic of that group.

    But this message is not posted solely to c.l.j, it is also posted to
    alt.html

    Again, why rely on a JS dependency when its not needed?

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq
     
    Randy Webb, Nov 15, 2004
    #9
  10. Julia Briggs

    RobB Guest

    Randy Webb <> wrote in message news:<>...
    > RobB wrote:
    > > Toby Inkster <> wrote in message news:<>...
    > >
    > >>Julia Briggs wrote:
    > >>
    > >>
    > >>>Ok, how can I get that to auto-center as an absolute layer?
    > >>
    > >>div.layer {
    > >> position: absolute;
    > >> left: 50%;
    > >> width: 200px;
    > >> margin-left: -100px;
    > >>}

    > >
    > >
    > >>Randy Webb wrote:
    > >>
    > >>Why rely on a JS dependency when its not needed?

    > >
    > >
    > > Thought I covered that: "Since this is a JS group, I assume you meant
    > > programmatically..."

    >
    > Does that mean if they ask how to set the color of an element, in a JS
    > group, then you will give them a JS solution instead of an HTML/CSS
    > solution?
    >
    > Just because a question is asked in a particular group does not mean
    > that the answer is necessarily the topic of that group.
    >
    > But this message is not posted solely to c.l.j, it is also posted to
    > alt.html
    >
    > Again, why rely on a JS dependency when its not needed?


    This is silly. Here's the original Q:

    > How do I construct a <iframe> or equivalent for FireFox/NS browsers,
    > inside a screen centered <div> tag? Can it be done?


    When I read that, it seemed unlikely that anyone would be asking if
    they could 'construct' an iframe (HTML) inside a div (HTML) - that's
    like posting "can I put a image inside a paragraph?" Not impossible,
    but unlikely. I interpreted it as a request for a dynamic solution.
    But, you're right, I am deeply ashamed, and I'll never post here again
    after this unforgiveable lapse.

    > Does that mean if they ask how to set the color of an element, in a JS
    > group, then you will give them a JS solution instead of an HTML/CSS
    > solution?


    Maybe. :D
     
    RobB, Nov 15, 2004
    #10
  11. Julia Briggs

    jsz

    Joined:
    Jan 25, 2010
    Messages:
    1
    Question: Whats the most annoying thing on Usenet?

    Answer: Randy Webb.
     
    jsz, Jan 25, 2010
    #11
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Simon G Best
    Replies:
    3
    Views:
    316
  2. Daedalous
    Replies:
    3
    Views:
    752
    Daedalous
    Jan 16, 2004
  3. Nathan Carr
    Replies:
    0
    Views:
    278
    Nathan Carr
    Sep 17, 2004
  4. Julia Briggs
    Replies:
    7
    Views:
    119
  5. Joe Attardi
    Replies:
    0
    Views:
    521
    Joe Attardi
    Jan 17, 2006
Loading...

Share This Page