html - フレームセットの下に背景を配置する

Question

私がやろうとしていることは、おそらく非常に単純です。現在、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 ファイルを取得して背景色を透明にし、すべての背後に背景画像を配置して、ページが 5 ページではなく 1 ページのように見えるようにすることでした。まとめる。これが私のコンテンツページのトップです：

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

これを達成するにはどうすればよいですか？

score 1 · Accepted Answer

いいえ、フレームを使用すると、各ドキュメントが個別になり、それ以外は許可されません (ほとんどの場合、下部のコードは一部のブラウザーで動作する可能性があります...) 次のようにハッキングできます。

top_nav.html の css:

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

menu_1.html の css:

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

content.html の css:

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

related.html の css:

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... */
}

footer.html の css:

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;
}

score 1 · Accepted Answer

フレームは一切使用しないでください。古くて信頼できません。使用する必要があるのは div です。ページの一部だけを変更したい場合は、javascript と jQuery を使用できます。

div を使用する場合background、CSS でプロパティを使用して、特定の要素の背景を操作できます。次に例を示します。

background-color: #FFF;

また、別の CSS ファイルを使用し、head タグでそのファイルにリンクする必要があります (JavaScript ファイルの前に):

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

score 0 · Accepted Answer

試してみてください

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

score 0 · Accepted Answer

あなたがやろうとしていることを行う現代的な方法は、Javascript を使用することです。たとえば、メニューに何かを追加するたびに 10 ページを編集する必要なく、多くの静的ページを作成して Web サイトを構築したいとします。

私はあなたに同意しませんが、とにかく、あなたは Ajax コンテンツの読み込みを探しています (ページを 1 つに読み込みます)。

または、メインページレイアウトを作成してから 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>

それは働いています

html - フレームセットの下に背景を配置する

4 に答える 4

Related

Reference