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

只需添加

#header img {
    float:left; 
}

到你的 CSS。

于 2012-07-06T15:12:14.667 回答
2

display: block在您的标题 img 上使用。

更多信息：HTML5 中的 canvas/video/audio 元素下方有 4px 的间隙

于 2012-07-06T15:19:50.380 回答
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 回答