标题和图片无法正确显示答案

【问题标题】：Header and Picture won't Display Correctly标题和图片无法正确显示
【发布时间】：2015-01-01 01:00:07
【问题描述】：

我现在正在阅读教程，但由于某种原因，我的代码（即使看起来相同）无法正确显示。我希望有人能解释为什么标题不会在顶部显示黑色并且图像不会自动调整大小。

<html>
<head>
   <title> Englightenment Web Site </title>
   <style type = "text/css">

    * {margin: 0; padding: 0;}
    body {
     font-family: arial;
     background-color: #ebebeb;
     }
     #header {
        background-color: black;
        height: 100px;
        width: 100px;
     }

    .container {
        width: 960px;
        height: auto;
        margin: 0 auto;

    }

    #logoArea {
        width: 300px;
        height: 100px;
        background-image: url(tree.jpg);
        float: left;
        }

    #navArea
    {
        height: 100px;
        float: right;
    }

    #nav
    {
        list-style: none;
        margin-top: 30px;
    }

    #nav a
    {
        color: white;
        text-decoration: none; /*removes underline*/

    }
    #nav li
    {
        float: left;
        margin-left:30px;
        background-color: #252525;
        padding: 8px;
        bording: 1px solid silver;
        border-radius: 5px;
    }

    #nav li:hover
    {
        background-color: gray;
    }

    .page
    {
        background-color: white;
        padding: 20px;
    }

   </style>

 </head>
 <body>

    <div id = "header">
      <div class = "container">
        <div id = "logoArea"></div>
        <div id = "navArea">
           <ul id = "nav">
              <a href = "#"><li> Home </li></a>
              <a href = "#"><li> Forum </li></a>
              <a href = "#"><li> Enlightener </li></a>
              <a href = "#"><li> Contact </li></a>

           </ul>
           </div>
       </div>
    </div>
    <div id = "mainArea">
        <div class = "container page">
            <h3> One Can't Understand without First Listening </h3>
        </div>
    </div>
 </body>

</html>

【问题讨论】：

您可能想要width: 100%; 作为#header，而不是“100px”。
我试过了，但还是不显示。我看到的只是背景颜色
什么的“背景色”？
我认为 76484 是正确的。我想您需要显示徽标（tree.jpg）？然后你需要在css中检查tree.jpg的url是否正确。
仅显示正文背景颜色。我删除了标题的宽度，现在它显示了。我得到了解决，但图像只显示了它的左上角与整个图片。它仍然不会自动调整大小。

标签： html image header

【解决方案1】：

所以我调整了原始图像的大小以修复徽标的 css 格式的大小。现在可以了。猜猜你最初需要一个确切的图片尺寸？看起来有点不对劲，但我已经解决了。

【讨论】：