HTML5佈局和頁腳錯誤

我是新來的HTML5的世界，我想建立一個佈局，讓我更好地瞭解如何從HTML4上移動。我當前已建成了佈局，但要檢查：HTML5佈局和頁腳錯誤

如果我的代碼編寫正確（任何提示或建議將非常感激，因爲我第一次在HTML5中我寫了這麼要確保即時通訊做的事情右）
試圖修復頁腳坐在頁面底部，重疊側欄和第2部分，但目前它顯示在頁面中間。
我注意到，當在Firefox瀏覽網站並使用Firebug時，該網站並未顯示出我在CSS中定義的確切尺寸，因此想要了解爲什麼會這樣。

以下是我的代碼：

<!DOCTYPE html> 
<html> 
<head> 
<title>BrightBees Layout</title> 
<link href="styles2.css" rel="stylesheet" /> 
</head> 
<body> 
<div id ="container"> 
    <header> 
     <h1>This my Header</h1> 
     <nav><h2>My Navigation Bar<h2></nav> 
    </header> 
    <div id="banners"><h2>My Banners<h2></div> 
    <aside id="sidebar"><h2>My SideBar<h2></aside> 
    <section id="content"><h2>This is my section1</h2></section> 
    <section id="list"><h2>This is my section2</h2></section> 
</div> 
<footer> 
     <h3>This is my footer</h3> 
</footer> 
</body> 
</html>

我的CSS：

body { 
background:#FFF; 
} 

#container { 
margin: 0px auto 0px auto; 
width:960px; 
border:1px solid #CCC; 
} 

header { 
margin:0; 
padding:0px; 
text-align:center; 
height:166px; 
} 

nav { 
height:65px; 
text-align:center; 
background:#CCC; 
} 

#banners { 
margin:0; 
height:253px; 
background:#01AEF0; 
text-align:center; 
} 

#sidebar { 
height:600px; 
width:310px; 
background:#ec8400; 
float:left; 
text-align:center; 
} 

#content { 
height:300px; 
width:650px; 
background:#CCC; 
float:right; 
text-align:center; 
} 

#list { 
height:300px; 
width:650px; 
background:#01AEEF; 
float:right; 
text-align:center; 
} 

footer { 
margin:0; 
padding:0; 
text-align:center; 
font-weight:bold; 
height:167px; 
background:#efefef; 
z-index:-1px; 
text-align:center; 
}

預先感謝看着這一點，任何建議將不勝感激。

來源

2015-10-06 Michael Owen

'z-index：-1px'肯定不符合 – Jay

給予高度在CSS文件中的「容器」應該是「像素」 ......

例如

#container { margin: 0px auto 0px auto; width:960px; border:1px solid #CCC; height: 600px }

它應該在正常工作

來源

2015-10-06 09:56:05 Reoxey

一些步驟，以第一個：刪除默認的瀏覽器邊距和填充。

* { 
    margin: 0px; 
    padding: 0px; 
}

刪除保證金：0和填充：0從.header，.footer和#banner。

使用中繼檢視區標記，使之更加適應：

<head> 
    <title>BrightBees Layout</title> 
    <link href="styles2.css" rel="stylesheet" /> 

    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head>

來源

2015-10-06 10:07:57 Koen

使用類而不是ID的，他們太具體。留下JS的ID。

在這裏看到的ID和類之間的區別： https://css-tricks.com/the-difference-between-id-and-class/

來源

2015-10-06 10:10:46

感謝這個傢伙，真的很感激它。一些有用的提示。頁腳現在位於側欄/ section2下方，我如何獲得頁腳重疊，以便在側欄/部分的背景中以大約40px開始。 –

我已經添加了以下到CSS文件我的頁腳標籤，這重疊的側邊欄/節，我需要後面。