將頂部和底部添加到IFRAME

我目前已經設置了一個iframe來覆蓋我的大部分網頁並點擊它的鏈接。現在，我在iframe的頂部顯示了我的網站徽標和一個關閉它的按鈕。這是我使用的代碼：將頂部和底部添加到IFRAME

<div id="iframe1_div" class="iframe1"> 

    <div class="iframe1_points" id="iframe1_points"> 
     <table cellspacing="0" cellpadding="0" width="100%" height="50px"> 
     <tr> 
     <td width="110px" align="center"><img src="http://mysite.com/logo.png" alt="Website TItle" /></td> 
     <td>Website Name</div></td> 
     <td width="50px" align="center"><a href="#;" class="close"><img src="http://mysite.com/close.png" class="noborder" title="Close Window" alt="Close" /></a></td></tr> 
     </table> 
    </div> 

    <iframe id="iframe1_self" style="width:100%;height:100%;" scrolling="yes" frameborder="0"></iframe> 

</div>

這是與它相關的CSS：

.iframe1{display: none;background: #FFFFFF;margin-top:50px;margin-bottom:50px;float: left;position: fixed;top: 50%; left: 50%;z-index:99999;} 

.iframe1_points{display:none;background:#505469;background-repeat:repeat-x;background-position:bottom;color:#f0f0f0;font-size:12px;font-weight:normal;font-size:12px;}

現在，這裏就是我想不出更棘手的部分。我試圖在iframe的底部添加一個部分，就像我在頂部一樣，並且需要它是64px高，而不是頂部的50px。

所以，我想在重複在的頂部做，只是修改高度64PX和下方添加像這樣：

<div id="iframe1_div" class="iframe1"> 

    <div class="iframe1_points" id="iframe1_points"> 
     <table cellspacing="0" cellpadding="0" width="100%" height="50px"> 
     <tr> 
     <td width="110px" align="center"><img src="http://mysite.com/logo.png" alt="Website TItle" /></td> 
     <td>Website Name</div></td> 
     <td width="50px" align="center"><a href="#;" class="close"><img src="http://mysite.com/close.png" class="noborder" title="Close Window" alt="Close" /></a></td></tr> 
     </table> 
    </div> 

    <iframe id="iframe1_self" style="width:100%;height:100%;" scrolling="yes" frameborder="0"></iframe> 

    <div class="iframe1_points" id="iframe1_points"> 
     <table cellspacing="0" cellpadding="0" width="100%" height="64px"> 
     <tr> 
     <td width="110px" align="center"><img src="http://mysite.com/logo.png" alt="Website TItle" /></td> 
     <td>Website Name</div></td> 
     <td width="50px" align="center"><a href="#;" class="close"><img src="http://mysite.com/close.png" class="noborder" title="Close Window" alt="Close" /></a></td></tr> 
     </table> 
    </div> 

</div>

然而，問題是，現在的頂部和底部部分延伸頁面，只顯示他們應該的一半。任何幫助將不勝感激...謝謝！

來源

2013-01-07 Tryin2Code

頁面佈局10年前出去使用。 –

這實際上並不適用於查看我自己的網站，它用於查看其他網站鏈接到我的網站，而不會離開我的網站。 – Tryin2Code

我看到你的html問題 - 首先，你應該使用css而不是寬度，高度，cellspacing，cellpadding和align屬性，並且你有兩個相同的id。 – Matt

繼承人包括您的表的redev，但HTML的其餘部分是有點不同於您的原始。我希望結果是你以後的樣子。

HTML部分

<body> 
     <div id="container"> 
      <div id="controls"> 
       <table> 
        <tr> 
         <td width="110px" align="center"><img src="http://mysite.com/logo.png" alt="Website TItle" /></td> 
         <td>Website Name </td> 
         <td width="50px" align="center"><a href="#;" class="close"><img src="http://mysite.com/close.png" class="noborder" title="Close Window" alt="Close" /></a></td> 
        </tr> 
       </table> 
      </div> 
      <iframe src="http://ebay.com/"> 
       &nbsp; 
      </iframe> 
      <div id="bottom"> 
       <table> 
        <tr> 
         <td width="110px" align="center"><img src="http://mysite.com/logo.png" alt="Website TItle" /></td> 
         <td>Website Name </td> 
         <td width="50px" align="center"><a href="#;" class="close"><img src="http://mysite.com/close.png" class="noborder" title="Close Window" alt="Close" /></a></td> 
        </tr> 
       </table> 
      </div> 
     </div> 
    </body>

CSS部分使用框架和表格

<style> 
    div {border: 1px solid red;display: block;} 
    #container {border: 1px solid blue;} 
    #controls {height: 50px;} 
    iframe {width: 100%;height: 500px;} 
    #bottom {height: 64px;overflow: hidden;} 
    table{width:100%;padding:0;} 
</style>

來源

2013-01-11 06:37:08 lukeocom

將頂部和底部添加到IFRAME

回答

相關問題