重新學習HTML

我已經在這個行業工作了很多年，但在過去的10年裏，我自己並沒有做過很多的HTML工作。我最近成爲了工作中唯一的開發人員，因此我也必須自己完成所有的HTML。重新學習HTML

通常這不會是一個問題，但我試圖堅持與我的PHP/MySQL/JavaScript/jQuery工作相同的質量標準。所以表格絕對不存在問題（上次我必須自己編寫HTML/CSS的時候，嵌套表格是可以接受的）。

我一直在HTML div s和CSS，我有一些相當重大的問題與它，並沒有發現任何東西在網上除了發佈在W3Schools廢話也沒有幫助。

讓我們先來看看一些代碼，我的工作，這裏的HTML：

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <title>Page Title</title> 
     <link href="inc/css/style.css" rel="stylesheet"> 
    </head> 
    <body> 
     <div id="page_wrapper"> 
      <div id="content"> 
       <header>this is the header...</header> 
       <div id="content-wrapper">sdasd</div> 
       <footer> 
        this is the footer 
       </footer> 
      </div> 
     </div> 
    </body> 
</html>

和CSS：

html, body { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
} 

body { 
    background: gray; 
} 

#page_wrapper { 
    background: yellow; 
    height: 100%; 
    width: 100%; 
} 

#content { 
    width: 980px; 
    background: white; 
    height: 100%; 
    margin: 0 auto; 
} 

header { 
    height: 160px; 
    width: 980px; 
    background: blue; 
} 

#content-wrapper { 
    background: green; 
    width: 100%; 
} 

footer { 
    height: 120px; 
    margin-top: -120px; 
    width: 980px; 
    background: orange; 
}

我已經嘗試這樣幾個變化，和我一直無法讓它看起來應該如此。請注意，我專門使用背景顏色來說明所有內容的位置，因爲這更像是一個學習練習，而不是一個真實世界的例子。

我必須創建的許多頁面都有一個背景圖像，就像很多網站一樣。那麼內容將是980像素寬。我上面的代碼的一個大問題是，內容包裝器div需要100％的可用空間，如果內容不夠長，不足以將其壓低。

當我在CSS中將height: 100%添加到該聲明中時，它似乎呈現得很好，但它將其放到窗口的100％，使其與包含它的page_wrapperdiv重疊。

我想完全不使用overflow聲明，因爲每次我這樣做時都會出現某種原因。

所以我想真正的問題和/或要求在這裏將是一個兩個部分的事情：

我怎麼做我想在上面的代碼呢？
您建議學習或重新學習建立網站的div/CSS方法的任何網站（W3Schools垃圾除外）？

來源

2011-12-26 Justin

考慮像Bootstrap（http://twitter.github.com/bootstrap/）這樣的框架作爲起點（或960或其他人之一）。它可以幫助您更快地完成成品，它將爲您提供可靠的學習參考。 – toddsundsted 2011-12-26 23:59:38

https://developer.mozilla.org/> w3schools – 2011-12-27 00:00:22

[Garbage is right]（http://w3fools.com）。我覺得這個問題有點寬泛......即使你最後把它縮小了，也有兩個單獨的問題。考慮將其分解，也許更具體。 – Purag 2011-12-27 00:01:50

HTML：

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Page Title</title> 
</head> 
<body> 
<div id="page_wrapper"> 
    <div id="content">       
     <div id="content-wrapper"> 
      <header>this is the header...</header> 
      test 
      <footer>this is the footer</footer> 
     </div> 
    </div> 
</div> 
</body> 
</html>

CSS：

html, body { 
height: 100%; 
width: 100%; 
margin: 0; 
padding: 0; 
} 

body { 
background: gray; 
} 

#page_wrapper { 
background: yellow; 
height: 100%; 
width: 100%; 
} 

#content { 
width: 980px; 
background: white; 
height: 100%; 
margin: 0 auto; 
} 

header { 
height: 160px; 
width: 980px; 
background: blue; 
} 

#content-wrapper { 
background: green; 
height: 100%; 
position:relative; 
} 

footer { 
height: 120px; 
width: 980px; 
background: orange; 
position:absolute; 
bottom:0; 
}

來源

2011-12-26 23:59:25

我已經添加了位置：相對於#content，它什麼也沒做。我將它添加到＃content-wrapper並且它工作，但它仍然是窗口本身的100％，它完全隱藏了頁腳... – Justin 2011-12-27 00:03:18

嗯......第二個...... – 2011-12-27 00:04:38

這就是我看到的（最新的FireFox）：http://screencast.com/t/u1g7kwXmgABD不是你所期待的？ – 2011-12-27 00:09:54

-1

body標籤已經是「可用空間的100％，如果內容不夠長推下來」

所以，只需使用該元素爲你需要的任何東西（背景圖像等）。查看諸如background-position之類的CSS屬性，以控制<body>標記內的某些內容。

否則，我會在包裝上使用min-height: 100%;，但我不確定它與舊版IE的兼容性如何。它可能會或可能不會在觸摸屏設備上做出時髦的事情。

但是，一般來說，HTML在垂直佈局上並不是很好。特別是關於瀏覽器窗口的高度。大多數問題都可以在現代瀏覽器中解決，但最好僅僅接受這個約束，並圍繞假設你無法控制高度來設計你的網站。這不值得頭痛。

來源

2011-12-27 00:00:44

如果我可以downvote這我會。這個答案完全是愚蠢的。舊版本的IE我不關心..簡單地說，如果你不能更新你的網絡瀏覽器，你不需要看到我的網站..這也是爲什麼我使用HTML5和CSS3 ..特別是BECAUSE舊的瀏覽器不支持...升級或錯過...簡單，真的......退出迎合白癡，無法找到公然的彈出窗口說'嘿，有一個瀏覽器升級，你想要安裝它/ – Justin 2011-12-27 05:14:03

認真？你應該感謝一個曾經爲成千上萬個提供幫助你學習的網站工作的人。我不會再在這裏浪費你的時間。 – 2011-12-29 20:14:28

您不需要頁面包裝器或內容div。您可以將身體寬度設置爲980像素。你也可以將你的html和body設置爲你想要的任何顏色。

儘管W3Schools得到了一個理所當然的說唱樂，但他們已經清理了很多，並不是一個糟糕的，快速的參考。

來源

2011-12-27 00:10:31 Rob

隨着背景圖像，我會經常使用，沒有這有用... 身體：背景圖像，寬度必須是100％流體寬度的樣子。 no page_wrapper：表示沒有標題背景圖像，也是全寬。沒有內容div，表示頁面也是100％不是980喜歡在這種情況下首選。我的語法會改變超時嗎？是的，我確定它會，但這些建議並沒有真正的幫助。 – Justin 2011-12-27 00:14:50

@Justin - 你爲什麼認爲你不能在這些元素上有背景圖像或者是全寬？爲什麼你認爲身體不會像你想的那樣將這些元素包含到980？ – Rob 2011-12-27 00:17:13

body元素將保持爲980或960等。但是，如果我將身體的寬度設置爲960像素或980像素或任何小於100％的變體..當您在body {}聲明下有背景圖像時CSS，它也會被限制在這個寬度上。 – Justin 2011-12-27 00:22:38

重新學習HTML

回答

相關問題