Text below iframe without breaking masket redirect look so much

Discussion in 'Hire a Freelancer' started by richjtf, Mar 8, 2016.

  1. richjtf

    richjtf Junior Member

    Joined:
    Oct 20, 2015
    Messages:
    184
    Likes Received:
    77
    Occupation:
    Being lost.
    Location:
    Venezuela.
    Hi, i need something done that looks like this:


    cwmhEq9.jpg

    Sometime ago an user here @MrBlue, helped me out with an iframe code:

    Code:
    <iframe src="https://site.com" style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;"> 
       Your browser doesn't support iframes 
    </iframe>
    I used that code to embed a whole site onto a browser page, now however i want to add a little thing, i need to display text below it, one line of text really, i tried removing
    Code:
    "position:fixed; top:0px; left:0px; bottom:0px; right:0px;"
    from the iframe styling, but it breaks the embed look and it no longer resizes to the whole screen accordingly, i just want for there to be 5% or 10% space left at the bottom of the browser and text to be there..

    I'm guessing i'd go with divs but i don't have much idea of how to use them.. Anyway, hope you understood what i need..
     

    Attached Files:

  2. Des_cartes

    Des_cartes Junior Member

    Joined:
    Jan 19, 2012
    Messages:
    194
    Likes Received:
    86
    Is that what you are looking to do?

    HTML:
    <html>
    <head>
        <style type="text/css">
            html, body
            {
                position:           absolute;
                height:             100%;
                max-height:         100%;
                width:              100%;
                margin:             0;
                padding:            0;
            }
            #iframe
            {
                position:           absolute;
                height:             100%;
                width:              100%;
                border:             none;
            }
            #container
            {
                position:           absolute;
                top:                0;
                bottom:             0;
                width:              100%;
                margin-bottom:      40px;
                overflow:           hidden ;
            }
            #footer
            {
                position:           fixed;
                bottom:             0px;
                height:             10%;
                background-color:   #ffffff;
                width:              100%;
                text-align:         center;
            }
        </style>
    </head>
        <body>
            <div id="container">
                    <iframe id="iframe" src="http://example.com/"></iframe>
            </div>
            <div id="footer">This is my footer text</div>
        </body>
    </html>
    
     
  3. richjtf

    richjtf Junior Member

    Joined:
    Oct 20, 2015
    Messages:
    184
    Likes Received:
    77
    Occupation:
    Being lost.
    Location:
    Venezuela.
    That is exactly what i needed, thank you so much!