0

ブループリント CSS フレームワークを自分の Web サイト プロジェクトに適応させていますが、ブループリントが独自のルールの一部に従っていないことに気付きました。彼らの Web サイトのチュートリアルを実行し、Google でソリューションを試してみましたが、何も機能していません。

次のようなページ レイアウトを設定しようとしています。

-----------------------------------------------------------------------
| Image                     (header)             950px                |
-----------------------------------------------------------------------
|Navbar |             Body (560px)                            | Ad Bar|
|       |                                                     |(190px)|
| 200px |                                                     |       |
|       |                                                     |       |
   ...                       .....                                ...
|       |                                                     |       |
-----------------------------------------------------------------------
|                          (footer)            950px                  |
-----------------------------------------------------------------------

ボディの高さに合わせて高さを拡張する Navbar (右枠付き) と Ad Bar (左枠付き) を Body の両側に配置したい (コンテンツの量に応じてスケーリングする) )、および単純に下部に追加されるフッター。これまでのところ、ヘッダーと本文は完全に表示されています。ただし、Navbar は本体の高さには及びません。また、広告バーは Body の右側には表示されず、左端 (Navbar の左で Body の下) に回り込みます。テキストを中央揃えにするためにフッターを書いたので、フッターもサイトの残りの部分と一致していないようですが、中央からずれています（わずかに左に）。

これが私のHTML5コードです：

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />

        <link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection" />
        <link rel="stylesheet" href="blueprint/print.css" type="text/css" media="print" /> 
        <!--[if lt IE 8]>
            <link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection" />
        <![endif]-->

        <!--Import fancy-type plugin. -->
        <link rel="stylesheet" href="blueprint/plugins/fancy-type/screen.css" type="text/css" media="screen, projection" />

        <link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />     

        <title>My Web Site Home</title>
    </head>

    <body>
        <div class="container">
            <!------------------------------------------------------->
            <div id="header" class="span-24" style="background: #F68712">
                <h1 id="siteheader"><img src="logo.png" alt="Logo" id="header-image" /></h1>
            </div>
            <div id="sidebar" class="span-5">
                <div class="span-6">
                    <a href="#"><img src="home.png" alt="Home" /></a></li>
                </div>
                <div class="span-6">
                    <a href="#"><img src="newmember.png" alt="Member Sign Up" /></a>
                </div>
                <div class="span-6">
                    <a href="#"><img src="memberlist.png" alt="Member List" /></a>
                </div>
            </div>
            <div id="main" class="span-12 prepend-1 append-1" style="background: #F5F5DC">
                <p>Some text.</p>

                <p>Some more text.</p>

                <p>Even more text!</p>
            </div>
            <div id="adbar" class="span-5 last">
                Ads.
            </div>
            <div id="footer" class="span-24" style="text-align: center">
                <h6 class="alt">Copyright &copy;2012 Joe Schmo.</h6>
            </div>
            <!------------------------------------------------------->
        </div>
    </body>
</html>

私はサイトのすべての英語のチュートリアルに従いましたが、なぜ協力したくないのか理解できないようです. Microsoft Webmatrix を使用してサイトを開発しており、IE9 と Chrome の両方でサイトをプレビューしています。誰かが手を貸してくれたら、本当に感謝します。

ありがとうございました！

4

2 に答える 2

0

サイドバーには、span-5のクラスがありますが、3divのspan-6が含まれています。3つのメニューdivのclass属性を削除して、それらを含むdivの全幅にしたい場合、これで問題は解決しますか？

于 2012-12-16T20:39:40.600 に答える
0 
<hr style="clear:both; width:100%" />

フッターdivの直前にこれを試してください

于 2012-12-16T19:09:39.280 に答える