將框架放在框架下

我想要做的事情可能很簡單。我目前在我的index.html中有框架。我有一個頂部，左側，右側底部和中心框架。這使我的頁面看起來很尷尬。這是我的index.html：將框架放在框架下

<html> 
    <head> 
    <title>Support Portal</title> 
    </head> 
    <frameset rows="28,*,5" frameborder="0" border="0" framespacing="0"> 
     <frame name="topNav" src="top_nav.html" scrolling="no" noresize> 
    <frameset cols="110,*,110" frameborder="0" border="0" framespacing="0"> 
     <frame name="menu" src="menu_1.html" marginheight="0" marginwidth="0" scrolling="auto" noresize> 
     <frame name="content" src="content.html" marginheight="0" marginwidth="0" scrolling="auto" noresize> 
     <frame name="related" src="related.html" marginheight="0" marginwidth="0" scrolling="auto" noresize> 
    </frameset> 
     <frame name="footer" src="footer.html"> 
    <noframes> 
    <p>This section (everything between the 'noframes' tags) will only be displayed if the users' browser doesn't support frames. You can provide a link to a non-frames version of the website here. Feel free to use HTML tags within this section.</p> 
    </noframes> 

    </frameset> 
    </html>

我希望做的是把我的「content.html」和我所有的其他的html文件，使背景色透明，然後把背景圖像背後一切都讓頁面看起來更像1頁，而不是5個放在一起。以下是我的內容頁面的頂部：

<!DOCTYPE html> 
    <html> 
    <head> 
    <style type="text/css"> 
    body { 
     font-family:Ubuntu, sans-serif; 
     font-size:10pt; 
     margin:10px; 
     background-color:transparent; 
     } 
    a { 
     color:white; 
     }

我該如何去完成此操作？

來源

2013-03-28 brandoncluff

不，與框架，每個文件都是獨立的，沒有別的允許（主要是在底部的代碼可能會在某些瀏覽器工作...），你可以種本事在像這樣：

在CSS的top_nav.html：

body { 
    background-image: url('path/to/image.jpg'); 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
}

在CSS的menu_1.html：

body { 
    background-image: url('path/to/image.jpg'); 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
    background-position: -28px 0; 
}

在CSS的content.html：

body { 
    background-image: url('path/to/image.jpg'); 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
    background-position: -28px -110px; 
}

在CSS相關。 html：

body { 
    background-image: url('path/to/image.jpg'); 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
    background-position: -28px right; 
    /* this may not work as the image may be too big... */ 
}

在CSS的footer.html：

body { 
    background-image: url('path/to/image.jpg'); 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
    background-position: bottom 0; 
    /* this may not work as the image may be too tall... */ 
}

這將是跨瀏覽器的解決方案，最有可能的工作。不過，我覺得在某些瀏覽以下工作。

frameset { 
    background-image: url('path/to/image.jpg'); 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
}

來源

2013-03-28 20:28:25 philwills

所有答案都是正確的：這不是我應該這樣做的方式。雖然你的答案很獨特/有趣。謝謝，乾杯和+1。 – brandoncluff

根本不應該使用框架。這是舊的，不可靠。你應該使用的是divs。如果你只想改變頁面的一部分，你可以使用javascript和jQuery。

使用div的，你可以使用background財產CSS來處理特定元素的背景，如：

background-color: #FFF;

你也應該使用一個單獨的CSS文件，並鏈接到它的頭部標籤（BEFORE任何JavaScript文件）：

<link rel="stylesheet" type="text/css" href="styles.css">

來源

2013-03-28 20:08:26

的「你應該不用框架，使用，它是老不可靠的。」評論需要詳細說明，以免誤導。一切都比其他目的更適合某些目的。 – Lyndon

做你正在做的事的現代方式是使用Javascript。您希望有許多靜態頁面，並且每次在菜單上添加某些內容時都無需編輯10頁，從而構建了一個網站。

我不同意你，但無論如何，你正在尋找Ajax內容加載（你加載你的網頁到一個）。

或者你可以建立你的主頁面佈局，然後把iframe與頁面背景。

我真的不認爲你應該做臨時工但...

<html> 
    <head> 
     <title>Support Portal</title> 
     <style> 
      body{ 
       /*background-image here*/ 
      } 
     </style> 
    </head> 
    <body> 
     <div style="position:absolute;top:0px;bottom:0px;left:0px;right:0px;"> 
      <iframe name="topNav" src="top_nav.html" scrolling="no" style="border:0px;width:100%;position:absolute;top:0px;left:0px;right:0px;height:28px;"></iframe> 
      <div style="position:absolute;top:28px;bottom:5px;left:0px;right:0px;"> 
       <div style="position:relative;height:100%;width:100%;"> 
        <iframe name="menu" src="menu_1.html" scrolling="no" style="border:0px;position:absolute;top:0px;left:0px;bottom:0px;width:110px;height:100%;"></iframe> 
        <div style="position:absolute;top:0px;left:110px;right:110px;bottom:0px;"> 
         <iframe name="content" src="content.html" scrolling="no" style="border:0px;width:100%;height:100%;"></iframe> 
        </div> 
        <iframe name="related" src="related.html" scrolling="no" style="border:0px;position:absolute;top:0px;right:0px;bottom:0px;width:110px;height:100%;"></iframe> 
       </div> 
      </div> 
      <iframe name="footer" src="footer.html" scrolling="no" border="0" style="border:0px;width:100%;position:absolute;bottom:0px;left:0px;right:0px;height:5px;"></iframe> 
     </div> 
    </body> 
</html>

據工作

來源

2013-03-28 20:38:54 DarkThanos

嘗試它爲我的作品

<html> 
<head> 
    <title>Support Portal</title> 
    <style> 
     HTML{ 
      /*background-image here*/ 
     } 
    </style> 
</head> 
<body> 
    <div style="position:absolute;top:0px;bottom:0px;left:0px;right:0px;"> 
     <iframe name="topNav" src="top_nav.html" scrolling="no" style="border:0px;width:100%;position:absolute;top:0px;left:0px;right:0px;height:28px;"></iframe> 
     <div style="position:absolute;top:28px;bottom:5px;left:0px;right:0px;"> 
      <div style="position:relative;height:100%;width:100%;"> 
       <iframe name="menu" src="menu_1.html" scrolling="no" style="border:0px;position:absolute;top:0px;left:0px;bottom:0px;width:110px;height:100%;"></iframe> 
       <div style="position:absolute;top:0px;left:110px;right:110px;bottom:0px;"> 
        <iframe name="content" src="content.html" scrolling="no" style="border:0px;width:100%;height:100%;"></iframe> 
       </div> 
       <iframe name="related" src="related.html" scrolling="no" style="border:0px;position:absolute;top:0px;right:0px;bottom:0px;width:110px;height:100%;"></iframe> 
      </div> 
     </div> 
     <iframe name="footer" src="footer.html" scrolling="no" border="0" style="border:0px;width:100%;position:absolute;bottom:0px;left:0px;right:0px;height:5px;"></iframe> 
    </div> 
</body>

來源

2018-02-04 19:02:27 Feckie

僅通過添加一些解釋就可以提高代碼的答案。對於像這樣的較老的問題，尤其是接受的答案，解釋您的答案與現有答案的不同之處或者它給這個問題帶來什麼新信息很有用。 –

@feckie - 我很高興你以某種方式找到了你的這條舊帖子，但我認爲一般的共識是iframes已被棄用。如果需要iframe，這個問題應該用JS或CSS黑客來解決。 – brandoncluff

將框架放在框架下

回答

相關問題