2014-11-08 78 views
1

我必須在學校使用HTML和CSS做一個項目,到目前爲止,所有我試圖做的是頁面佈局和任何原因,當我把我的網頁的頁腳它彈出頂部的頁面,而不是底部,我也有一些麻煩試圖調整它來修復整個頁面。HTML和CSS學校項目

#wrapper { 
 
     width: 1024px; 
 
     height: 768px; 
 
     background-color: #E1E0E0; 
 
    } 
 
    #banner { 
 
     width: 1024px; 
 
     height: 220px; 
 
     background-color: #6E6A6A; 
 
    } 
 
    #menuTop { 
 
     width: 1024px; 
 
     height: 35px; 
 
     background-color: #ACAAAA; 
 
    } 
 
    #columnLeft { 
 
     width: 220px; 
 
     height: 438px; 
 
     background-color: #CBCACA; 
 
     float: left; 
 
    } 
 
    #columnRight { 
 
     width: 220px; 
 
     height: 438px; 
 
     background-color: #CBCACA; 
 
     float: right; 
 
    } 
 
    #content { 
 
     width: 584; 
 
     height: 438; 
 
     background-color: #E1E0E0; 
 
     margin-left: 220px; 
 
    } 
 
    #footer { 
 
     width: 1024px; 
 
     height: 75px; 
 
     background-color: #6E6A6A; 
 
    }
<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <link rel="stylesheet" type="text/css" href="FinalHTML.css"> 
 
    <title></title> 
 
</head> 
 

 
<body> 
 
    <div id="wrapper"> 
 
    <div id="banner"> 
 
    </div> 
 
    <div id="menuTop"> 
 
    </div> 
 
    <div id="columnLeft"> 
 
    </div> 
 
    <div id="columnRight"> 
 
    </div> 
 
    <div id="content"> 
 
    </div> 
 
    <div id="footer"> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

+0

一般來說,堆棧溢出的用戶不鼓勵這樣的問題。要求社區爲你做功課不是這個網站的目的。 – 2014-11-08 03:05:09

+0

只是好奇,但...爲什麼這裏沒有關閉按鈕這個問題? – Ekin 2014-11-08 03:06:12

+6

如果OP如果他沒有做任何事情的時候要求他做功課,我會低估這個問題,但是OP已經做出了明智的努力並遇到了一個他看不見的問題 - 有成千上萬的SO這樣的問題與接受的答案。我沒有看到區別。 – Adam 2014-11-08 03:07:12

回答

4

heightwidth必須有一個單元,如PX,DPI等

#wrapper { 
 
     width: 1024px; 
 
     height: 768px; 
 
     background-color: #E1E0E0; 
 
    } 
 
    #banner { 
 
     width: 1024px; 
 
     height: 220px; 
 
     background-color: #6E6A6A; 
 
    } 
 
    #menuTop { 
 
     width: 1024px; 
 
     height: 35px; 
 
     background-color: #ACAAAA; 
 
    } 
 
    #columnLeft { 
 
     width: 220px; 
 
     height: 438px; 
 
     background-color: #CBCACA; 
 
     float: left; 
 
    } 
 
    #columnRight { 
 
     width: 220px; 
 
     height: 438px; 
 
     background-color: #CBCACA; 
 
     float: right; 
 
    } 
 
    #content { 
 
     width: 584px; // here you frogot the unit (px in this case) 
 
     height: 438px; 
 
     background-color: #E1E0E0; 
 
     margin-left: 220px; 
 
    } 
 
    #footer { 
 
     width: 1024px; 
 
     height: 75px; 
 
     background-color: #6E6A6A; 
 
    }
<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <link rel="stylesheet" type="text/css" href="FinalHTML.css"> 
 
    <title></title> 
 
</head> 
 

 
<body> 
 
    <div id="wrapper"> 
 
    <div id="banner"> 
 
    </div> 
 
    <div id="menuTop"> 
 
    </div> 
 
    <div id="columnLeft"> 
 
    </div> 
 
    <div id="columnRight"> 
 
    </div> 
 
    <div id="content"> 
 
    </div> 
 
    <div id="footer"> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

+0

你倒了另外兩個答案? – JakeParis 2014-11-08 03:07:12

+0

沒辦法......我只是回答。 – 2014-11-08 03:07:57

1

你忘了你的高度和寬度上的內容DIV之後鍵入px

width: 584; 
height: 438; 

應該

width: 584px; 
height: 438px; 
+0

發生了什麼事?兩個降價?這個答案是正確的? WTF? – JakeParis 2014-11-08 03:07:57

+1

我想downvoter試圖阻止在「作業」問題上的答案(即使我認爲這個問題是完全有效的)。 – Adam 2014-11-08 03:09:06

+0

傑克我也收到downvote .. – 2014-11-08 03:09:51

1
#content { 
width: 584; 
height: 438; 
background-color: #E1E0E0; 
margin-left: 220px; 
} 

你忘了 「PX」