Плавающая над фреймами HTML - PullRequest
0 голосов
/ 06 марта 2012

Возможно ли разместить панель навигации над iframe, вот код, который у меня есть?

панель навигации, как вы будете, находится на html-странице и содержит кнопки, которые запускают iframeперейти на следующую страницу и т. д.

Есть идеи?

 <!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>

Ответы [ 3 ]

1 голос
/ 06 марта 2012

Это возможно. Вы должны расположить элемент, который должен быть перемещен, как absolute с отрицательным полем.

Демо

1 голос
/ 06 марта 2012

Возможно с положением: абсолютное;

0 голосов
/ 06 марта 2012

Простой CCS для панели навигации:

.navDiv{
  position: absolute;
  top: 100px;
  left: 100px;
}

Просто измените значения для top и left, как вам нужно.В этом случае эти значения относятся к document.body.

. В вашем коде есть неправильный атрибут height для iframe.Также кажется, что процент не разрешен для iframe высоты, вместо этого вы должны использовать какой-то другой юнит.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...