2011-07-03 39 views
0

我有一个页面,它具有主容器的背景颜色,但由于某种原因,颜色在标题div下方结束。尽管如此,页面和CSS在W3验证器中验证,我不知道为什么和我尝试了几种不同的修复方法。XHTML CSS背景没有填充整个div

CSS

body{ 
    margin:0; 
    padding:0; 
    line-height: 1.5em; 
    background-color: #e5e5dc; 
    color: #000; 
} 

#maincontainer{ 
    background-color: green; 
    width: 98%; 
    margin: 0 auto; 
    border: 1px solid black; 
} 

#topsection{ 
    background-color: transparent; 
    height: 90px; /*Height of top section*/ 
} 

#logo{ 
    background-image: url(); 
    text-align: center; 
    margin: 0 auto; 
    width: 100%; 
} 

#contentwrapper{ 
    float: left; 
    width: 100%; 
    background-color: transparent; 
} 

#contentcolumn{ 
    margin-right: 230px; /*Set right margin to RightColumnWidth*/ 
} 

#rightcolumn{ 
    float: left; 
    width: 230px; /*Width of right column in pixels*/ 
    margin-left: -230px; /*Set left margin to -(RightColumnWidth) */ 
    background-color: transparent; 
} 

#footer{ 
    clear: left; 
    width: 100%; 
    background-color: transparent; 
    text-align: center; 
    padding: 4px 0; 
    border-top: 1px solid black; 
} 

.innertube{ 
    margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/ 
    margin-top: 0; 
} 

.error{ 
    background-image: url("images/misc/scroll.jpg"); 
    background-position: top left; 
    background-repeat: no-repeat; 
} 

a:link, a:visited{ 
    color: #000; 
    text-decoration: none; 
} 

a:hover, a:active{ 
    color: #000; 
    text-decoration: underline; 
} 

编辑 - 直接从查看源文件原始的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" lang="en" xml:lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Haven &bull; Login</title> 
    <link href="includes/style.css" rel="stylesheet" type="text/css" /> 


    <script src="includes/jquery.js" type="text/javascript"></script> 
    <script type="text/javascript"> 

    function init() 
    { 
     var e = document.createElement('script'); 
     e.src = 'includes/all.js'; 
     document.getElementById('script_insertion').appendChild(e); 
    } 
    </script> 
</head> 
<body onload="init();"> 
<div id="script_insertion"></div> 
<div id="maincontainer"> 
    <div id="topsection"> 
     <div class="innertube"> 
      <h1>IMG</h1> 
     </div> 
    </div> 

    <div id="contentwrapper"> 
     <div id="contentcolumn"> 
      <div class="innertube"> 
       <form action="./login.php?mode=login" method="post"> 
        <table> 
         <tr> 
          <td>Username:</td> 
          <td><input type="text" name="username" id="username" size="10" title="Username" /></td> 
         </tr> 
         <tr> 
          <td>Password:</td> 
          <td><input type="password" name="password" id="password" size="10" title="Password" /></td> 
         </tr> 
         <tr> 
          <td><input type="reset" value="Clear" /></td> 
          <td><input type="submit" name="login" value="Login" /></td> 
         </tr> 
        </table> 
        <input type="hidden" name="remember" value="true" /> 
       </form> 
       <br /> 
       Don't have an account yet? <a href="./register.php">Register here!</a> 
      </div> 
     </div> 
    </div> <div id="rightcolumn"> 
     <div class="innertube"> 
      Chat 
     </div> 
    </div> 
</div> 
</body> 
</html> 
+1

为什么在示例中包含php脚本? CSS只用于处理纯html - 如果你知道这一点,那么它似乎是你倾倒你的工作对某人... +这个问题甚至没有在php标签 - 所以它不应该包含PHP! 请隔离有问题的html ... – Erric

+0

@erric问题在于引用已发布的CSS和HTML。仅仅因为有PHP的实例意味着我的问题不能得到回答?我把它们留在那里,以便人们可以看到整个代码,有时候,只需要一个错位的标签。我不知道“有问题的HTML”。它可以在代码块中的任何地方,但我认为语法绝对没有错,亲自 – chaoskreator

+0

您的问题是关于浏览器中的HTML和CSS呈现。 PHP与它无关。向我们展示呈现的HTML ...不是PHP。 –

回答

2

你是浮动#contentwrapper这需要它的文件流,从而#maincontainer不再包含它的。

要包含它,你需要给#maincontainer一个溢出属性(自动应该工作)。如果你想添加边框到你的元素,这是一个调试像这样的东西的好方法。

+0

的末端我认为可能值得将此链接添加到答案中 - 这是一个'float'元素的很好的破坏。 [http://css-tricks.com/795-all-about-floats/](http://css-tricks.com/795-all-about-floats/) – Beno