1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

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:
    164
    Likes Received:
    80
    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!