如何擴展標題div以適合整個頁面？

我意識到這個問題已經被問了很多次了，但我很想搞清楚這個問題。如何擴展標題div以適合整個頁面？

我對html很新，想要構建一個包含我們的徽標，導航欄和一些社交網絡圖標的靜態標頭（940px x 30px）。

我正在努力做的事情是讓標題適合整個頁面，它讓我的背景的一部分顯示在左側，頂部和右側，這令人沮喪。

下面是我用過的代碼。

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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link rel="stylesheet" type="text/css" href="css/style.css" /> 
<title>TWChome</title> 
</head> 
<body> 
    <div id="header"> 
     <div id="headercontents"> 
     Hello 
     </div> 
    </div> 
</body> 
</html>

CSS代碼

@charset "utf-8"; 

/* CSS Document */ 

body { 
    background-image:url(../images/bg.jpg); 
} 

div#header { 
    display:block; 
    width:auto; 
    height:auto; 
    background-image:url(../images/bar.jpg); 
} 

div#headercontents { 
    width:50%; 
}

來源

2012-08-08 Adam Boustead

你似乎在做一個[很好的工作]（http://jsfiddle.net/4KqQc/）保持頭容器適合文檔的寬度。 – 2012-08-08 21:46:24

如果您引用邊距和填充值，則可以重置CSS以清除值，如http://meyerweb.com/eric/tools/css/reset/ – 2012-08-08 21:48:24

噢，這可能是* Normalize。 css *在這裏發言。 – 2012-08-08 21:49:19

試試這個：

body{margin:0;padding:0}

來源

2012-08-08 21:47:42 mittmemo

是actualy並不難：

#header { 
width: 940px; 
height: 30px; 
margin: 0 auto; 
}

首先，您設置您要求的尺寸，然後將其居中。沒有更多的了。此外，我不知道爲什麼你的＃標題，內容設置爲50％的寬度......與背景圖像頭

更新：

#header { 
    height: 30px; 
    background: url(../images/bar.jpg) no-repeat center center; /* for a single image with height of approx 30px */ 
    background: url(../images/bar.jpg) repeat; /* alternative for a tile you want to repeat */ 
} 
#headercontents { 
    width: 940px; 
    margin: 0 auto; 
}

確實總是採用一些復位CSS的規定由他人。

來源

2012-08-08 22:28:17 Pevara

沒有工作，標題的背景需要是一個圖像... – 2012-08-08 22:40:52

upadted我的答案爲您的背景 – Pevara 2012-08-08 22:43:56

我知道我聽起來像一個完整的業餘愛好者在這個背景圖像：（URL）;走？謝謝你的幫助，以及:) – 2012-08-08 22:45:33

如何擴展標題div以適合整個頁面？

回答

相關問題