2013-01-19 131 views
0

我想了解如何獲得全寬頭。問題是標題周圍有一個很薄的白色邊框,而不是全寬。如果重要,我不使用任何網格系統。全寬頭和圖像CSS

HTML

<!DOCTYPE html> 
    <html> 

    <head> 
    <link rel="stylesheet" href="css/style.css" type="text/css" display="screen" > 

<title> 
    test app 
</title> 

</head> 

<body> 
<div id="header"/> 
</div> 


</body> 

</html> 

CSS

#header { 

    float:left; 
    padding:15px 0; 
    min-width:100%; 
    background: #5FBEED; 

} 

任何幫助非常讚賞的感謝。

回答

0

我想問題是要得到它周圍的白色邊框。 A div自動填充整個窗口的寬度,所以刪除min-width風格:Example fiddle

CSS:

#header { 
    padding: 15px 0; 
    border: 10px solid white; 
    background: #5FBEED; 
} 
+0

非常感謝但我不想要那麼薄的白色邊框,這是我的觀點。我看起來像你的小提琴沒有邊框造型。所以它有沒有我宣佈的白色邊框。 – JackLalley

0

添加到您的CSS

body{ margin: 0; padding: 0; } 

瀏覽器添加自己的CSS的HTML元素,這從瀏覽器變化到瀏覽器。 margin和padding也適用於UL和其他一些要素...

你可以閱讀更多關於此這裏... http://clagnut.com/blog/1287/

+0

鏈接文章中提到的技術是危險的imho。 '* {margin:0;填充:0; }'打破了用戶貢獻的HTML ...我與很多電子商務商店合作,有時我們將我們的切片出售給第三方。當他們添加這個危險的小片段時,店主的產品細節UL-LI破裂,段落停止適當間隔,並出現許多其他問題。我個人更喜歡使用共享CSS [上海社會科學院的'@ extend'(http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#extend),或[標準化CSS文件(HTTP針對性復位: //necolas.github.com/normalize.css/)。 – thirdender

+0

工作非常感謝!當我有足夠的聲望和關心thirdender時,我會投票。我目前只是一名初學者,但當我達到更高級別時,我會考慮CSS重置和SASS,感謝您的回覆。 – JackLalley

+0

我同意thirdender,直到你知道你在做什麼不要使用* {margin:0; } –

0

白色邊框最有可能由BODY標籤的固有margin增加。嘗試添加下面的CSS:在這種情況下

body { 
    margin: 0; 
} 
+0

也工作過一種享受。當我有足夠的聲望時,也會投票。謝謝! – JackLalley

0
html, body{ 
padding: 0; 
margin 0; 

}

#header { 
padding: 15px 0; 
border: 10px solid #5FBEED; 
background: #5FBEED; 

}

你的邊界將顏色作爲標題背景顏色相同