2011-07-03 60 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