1

最も重要な情報を明らかにするために中央の要素がスクロールする複数の固定要素を配置したい Web ページに取り組んでいます。ただし、私のページでは、オブジェクトが画面の下に移動するとスクロール バーが有効になりません。スクロール バーを強制的に表示すると、横に非アクティブなスクロール バーが残るだけです。html {overflow: auto;}と他のバリエーションを使用してみましたが、役に立ちませんでした。

以下は、これまでの私のコードです。下部の画像とウェルカム画像をヘッダーの後ろに上にスクロールし、側面の画像はそのままにしたいと思います。

    <!DOCTYPE html>


<!-->Information for the Div's used.</-->
<style>
    .header {position: fixed; top: 5px; right: 6px; height: 120px; width: 100%; background-color: white;}
    .Title {position: fixed; background-color: white; width: 432px; height: 55px; top: 5px; left: 318px;}
    .machine {position: fixed; background-color: white; width: 119px; height: 71px; top: 8px; left: 241px;}
    .bars {position: fixed; background-color: white; width: 981px; height: 56px; top: 90px; left: 9px;}
    .nav {position: fixed; background-color: white; width: 204px; height: 80px; top: 1px; left: 22px;}
    .lborder {position: fixed; background-color: white; width: 193px; height: 518px; top: 145px; left: 16px; }
    .rborder {position: fixed; background-color: white; width: 193px; height: 518px; top: 140px; left: 827px; }
    .welcome {position: absolute; background-color: white; width: 211px; height: 50px; top: 150px; left: 387px; }
    .whitespace {position: absolute; background-color: grey; width: 211px; height: 200px; top: 584px; left: 301px; }
</style>

<!-->Information for font styles. </-->
<style type="text/css">
    .textstyle0 {font-family:Arial;font-weight:normal;font-style:normal;font-size:8pt;text-decoration:none;color:#0000a0;}

</style>


<!-->This contains all of the objects that will remain static in all pages.
    They will not move when you scroll the page, and are carried over through the whole site. </-->
<div class="header">
    <div class="Title"><img src="files/IMG_5.jpg"</div>
    <div class="machine"><img src="files/IMG_0-test.jpg" /></div>
    <div class="bars"><img src="files/IMG_25.jpg" /></div>
    <div class="nav">  
        <table width="100%">
            <tr>
                <td class="auto-style2"><span class="textstyle0"><a href="page1.html">About Us</a></span></td>
                <td class="auto-style2"><span class="textstyle0"><a href="Directions.html">Directions</a></span></td>
                <td class="auto-style2"><span class="textstyle0"><a href="default.htm">Home Page</a></span></td>
            </tr>
            <tr>
                <td class="auto-style3"><span class="textstyle0"><a href="Contacts.html">Contacts</a></span></td>
                <td class="auto-style3"><span class="textstyle0"><a href="Customers.html">Customers</a></span></td>
                <td class="auto-style3"><span class="textstyle0"><a href=""></a></span></td>
            </tr>
            <tr>
                <td><span class="textstyle0"><a href="Products.html">Products</a></span></td>
                <td><span class="textstyle0"><a href="Links.html">Links</a></span></td>
                <td><span class="textstyle0"><a href=""></a></span></td>
            </tr>
            <tr>
                <td><span class="textstyle0"><a href="Facilities.html">Facilities</a></span></td>
                <td><span class="textstyle0"><a href="Contact Form.html">Contact Us</a></span></td>
                <td><span class="textstyle0"><a href=""></a></span></td>
            </tr>
        </table></div>
    <div class="lborder"><img src="files/IMG_1.jpg" /></div>
    <div class="rborder"><img src="files/IMG_3.jpg" /></div>
</div>

<!-- Scrollable elements -->
<div class="welcome"><img src="files/IMG_7.jpg" /></div>
<div class="whitespace"><img src="files/IMG_34.jpg" /></div>

4

1 に答える 1

0

ここではjsfiddleまたはその他のコード例が役立つと思いますが、簡単に見つけられる問題がいくつかあります-

a) IMG_5 の最初のイメージ タグが適切に閉じられていないため、一貫性のない動作が発生する可能性があります

b）絶対位置と固定位置を使いすぎています。すべてのスタイルを削除し、必要な結果を得るために絶対に必要な場所にのみ追加してみます。

CSS レイアウトを自分で実装することに慣れていない場合は、Twitter BootstrapやZurb Foundationなどを参照することをお勧めします。

テーブルで解決しようとしているように見える問題のより良い解決策になると思うので、リストに関するこの記事も読んでみたいと思います: http://alistapart.com/article/taminglists/

于 2013-08-28T16:01:37.477 に答える