March 6, 2012

Float over iframes html

Question by Ma9ic

Is it possible to float a nav bar over a iframe here is the code that i have so far?

the nav bar as you will be is in the html page and contains buttons that trigger the iframe to go to the next page etc.

Any ideas?

 <!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">
<head>
    <title>Fraud Protection - Course</title>
<style>
    .backbutton[type="button"] {
        border: 0;
        background: url("back.png") no-repeat;
        text-indent: -9999em;
        line-height:3000;
        width: 100px;
        height: 35px;
        cursor:pointer;
    }
        .nextbutton[type="button"] {
        border: 0;
        background: url("next.png") no-repeat;
        text-indent: -9999em;
        line-height:3000;
        width: 100px;
        height: 35px;
        cursor:pointer;
    }
            .savebutton[type="button"] {
        border: 0;
        background: url("save.png") no-repeat;
        text-indent: -9999em;
        line-height:3000;
        width: 100px;
        height: 35px;
        cursor:pointer;
    }
</style>
</head>
<body>

    <iframe src="" width="100%" class="naviframe" id="contentFrame" hieght="100%"></iframe>
    <div id="navDiv">
     <input type="button" class="backbutton" id="butPrevious" onclick="doPrevious();" value="<- Previous"/>
        <input type="button" class="nextbutton" value="Next ->" img src="/images/Btn.PNG" id="butNext" onclick="doNext();"/>
        <input type="button" class="savebutton" value="Save Progress"  img src="/images/Btn.PNG" id="butExit" onclick="doExit();"/>
    </div>

</body>
</html>

Answer by Starx

It is possible. You have to position the element to be floated, as absolute with negative margin.

Demo

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!