0

我有以下 HTML 页面，内容的背景颜色与主体背景颜色没有区别。我已经盯着这个看了一个多小时，找不到错误。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="twoColLiqLtHdr.css" rel="stylesheet" type="text/css" /><!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
ul.nav a { zoom: 1; }  /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
</style>
<![endif]-->
</head>

<body>

<div class="container">
  <div class="header"><img src="logo.png" width="35%" height="90" style="background: #A9B92E; display:block;" /> 
    <!-- end .header --></div>

  <div class="sidebar1">
    <ul class="nav">
      <li><a href="home.php">Home</a></li>
      <li><a href="search.php">Search</a></li>
      <li><a href="codebook.php">Tag Codebook</a></li>
      <li><a href="articleadmin.php">Article Admin.</a></li>
    </ul>
    <p>&nbsp;</p>
    <!-- end .sidebar1 --></div>

  <div class="content">
      <form id="form" name="form" action="" method="post">
      <input type="hidden" name="id" value="<?php echo $id; ?>"/>
        <h1>Edit Details for &nbsp; &nbsp;<?php echo $articletitle; ?></h1>
        <table width="100%" border="0" cellpadding="6">
          <tr align="center" valign="middle">
            <td colspan="2"><legend>Article details</legend></td>
          </tr>
          <tr>
            <td width="26%" align="right"><span class="field">Article Title</span></td>
            <td width="74%" align="left"><span class="field">
              <input name="articletitle" type="text" value="<?php echo $articletitle; ?>" size="50"/>
            </span></td>
          </tr>
          <tr>
            <td align="right"><span class="field">Article Author</span></td>
            <td align="left"><span class="field">
              <input name="articleorganization" type="text" value="<?php echo $articleorganization; ?>" size="50"/>
            </span></td>
          </tr>
          <tr>
            <td align="right"><span class="field">Article Date</span></td>
            <td align="left"><span class="field">
              <input name="articledate" type="text" value="<?php echo $articledate; ?>" size="50"/>
            </span></td>
          </tr>
          <tr>
            <td align="right"><span class="field">Article Url:</span></td>
            <td align="left"><span class="field">
              <input name="articleurl" type="text" value="<?php echo $articleurl; ?>" size="50"/>
            </span></td>
          </tr>
          <tr>
            <td align="right"><span class="field">Article Tags:</span></td>
            <td align="left"><span class="field">
              <input name="articletags" type="text" value="<?php echo $articletags; ?>" size="50"/>
            </span></td>
          </tr>
          <tr align="center" valign="middle">
            <td colspan="2"><input type="submit" name="submit" value="Submit" /></td>
          </tr>
        </table>
          </div>
       </form>
    </div>
  </div>
  <div class="footer">
    <p>My Footer</p>
    <!-- end .footer --></div>
</body>
</html>
4

2 回答 2

1

查看您的 CSS 后，您还没有为您的内容类定义背景颜色

   .content {
    padding: 10px 0;
    width: 80%;
    float: left;
   }

我建议您使用ID而不是Class，因为您的内容 div 是唯一的。

编辑

我认为你的意思是为什么 div 类容器没有显示它 background-color = #FFF; ? 抱歉弄错了您的问题，您应该添加 .container css。

overflow: hidden;
于 2012-06-15T08:02:19.053 回答
0

此时您需要清除浮动 - 添加<div style="clear:both;"></div>我放置的代码。

    </form>
    <div style="clear:both;"></div>
    </div>      
  </div>
  <div class="footer">

演示：http: //jsfiddle.net/UAbe9/1/

于 2012-06-15T07:27:51.150 回答