Text below iframe without breaking masket redirect look so much

Status
Not open for further replies.

richjtf

Regular Member
Joined
Oct 20, 2015
Messages
200
Reaction score
87
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..
 

Attachments

  • T5tumll.jpg
    T5tumll.jpg
    19.2 KB · Views: 7
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>
 
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>

That is exactly what i needed, thank you so much!
 
Status
Not open for further replies.
This thread has been auto closed due to the forum's thread age policy. Read more.
Back
Top