1

私は CSS / HTML にまったく慣れていないので、この小さなバグの原因を見つけることができません。バナーとナビゲーションバーがくっつくように消したいです。どんな助けでも大歓迎です!!

これがサイトのコードです。関係のないコードをいくつか取り出しました。

               <!DOCTYPE html>
<html>



<!-- *****CSS CODE START*****-->
<style type="text/css">

#container
{
    margin: 0 auto;
    width: 900px;
    background: #fff;

}

#header
{
    margin-top: 0px;
}

#header h1 { margin: 0; }

#navigation
{
    float: left;
    width: 900px;
    background: #333;
}

#navigation ul
{
    margin: 0;
    padding: 0;
}

#navigation ul li
{
    list-style-type: none;
    display: inline;
}

#navigation li a
{
    display: block;
    float: left;
    padding: 5px 10px;
    color: #fff;
    text-decoration: none;
    border-right: 1px solid #fff;
}

#navigation li a:hover { background: #383; }

#content-container
{
    float: left;
    width: 900px;
    background: #fff url(/wp-content/uploads/layout-two-fixed-background.gif) repeat-y 100% 0;
}

#content
{
    clear: left;
    float: left;
    width: 619px;
    height: 720px;
    padding: 10px 0;
    margin: 0 0 0 0px;
    display: inline;
    overflow: auto;
}

#content h2 { margin: 0; color: #003D5D; padding:10px; }

#contentBody
{
    padding:10px;
    font-size:22px;
}

#aside
{
    float: right;
    width: 280px;
    padding: 20px 0;
    margin: 0 0px 0 0;
    display: inline;
    background: #cccccc;
    height: 700px;
    border-left: 1px solid #333 ;
}

#aside h3 { margin: 0 20px; color: #003D5D; font-family: Times New Roman; }

#asideText { margin: 0 20px; font-family: Times New Roman;}

#footer
{
    clear: both;
    background: #ccc;
    text-align: right;
    padding: 5px;
    height: 1%;
    border-top: 1px solid #333 ;
}

</style>
<!-- *****CSS CODE END***** -->





<!-- *****HTML CODE START***** -->
<body>

<div id="container">
    <div id="header">

            <img src = file:///Users/jduffy/Desktop/projectSite/banner1.jpg>
            </img>

    </div>
    <div id="navigation">
        <ul>
            <li><a href="file:///Users/jduffy/Desktop/projectSite/home">Home</a></li>
            <li><a href="file:///Users/jduffy/Desktop/projectSite/theProject">The Project</a></li>
            <li><a href="file:///Users/jduffy/Desktop/projectSite/Pictures">Pictures</a></li>
            <li><a href="file:///Users/jduffy/Desktop/projectSite/Contact">Contact us</a></li>
        </ul>
    </div>
    <div id="content-container">
        <div id="content">
            <h2>
                Page heading
            </h2>
            <div id="contentBody">
            <p>
                home pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome page                home pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome page
                home pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome page


            </p>
            <p>
                test2
            </p>
            <p>
                test3
            </p>
            </div>
        </div>
        <div id="aside">
            <div id="asideHeading">
                <h3>
                Aside Heading
                </h3>
            </div>
            <div id="asideText">
            <p>
            test5
            </p>
            </div>
        </div>
        <div id="footer">

            <text id="footerDate">0</text>


        </div>
    </div>
</div>
</body>
<!-- *****HTML CODE END***** -->

</html> 


<!-- *****JavaScript CODE START***** -->
<script type="text/javascript">

/*date*/
var today = new Date();
document.getElementById("footerDate").innerHTML = today;


</script>
<!-- *****JavaScript CODE END***** -->
4

4 に答える 4

2

display: blockヘッダーimgで使用します。

詳細：HTML5のcanvas / video/audio要素の下に4pxのギャップがあります

于 2012-07-06T15:19:50.380 に答える
2

追加するだけ

#header img {
    float:left; 
}

あなたのCSSに。

于 2012-07-06T15:12:14.667 に答える
0

ShogunArts.deの答え-

#header img {
    float:left; 
}

ベーシックブリッジの答え-

#header { margin-bottom: -5px; }

Guillaume86の答え-

#header img {
    display:block; 
}

すべてが完璧に機能しました！みんなありがとう。

于 2012-07-06T15:21:13.453 に答える
-1

これは無効な HTML です:

 <img src = file:///Users/jduffy/Desktop/projectSite/banner1.jpg>
            </img>

次のようにする必要があります。

<img src="file:///Users/jduffy/Desktop/projectSite/banner1.jpg"/>

マークアップのバージョン/タイプによっては引用符が必要ない場合がありますが、イメージ タグは常に自己終了です。

奇妙なレイアウトのバグが発生した場合は常に、検証済みの HTML を使用してトラブルシューティングを開始します。

http://validator.w3.org/

于 2012-07-06T15:14:32.843 に答える