2011-11-25 37 views
0

enter image description here網站div不會從左到右伸展,你如何修復css?

enter image description here

#header { 
    z-index: 1; 
    width: 100%; 
    padding: 8px 0px 8px 0px; 
    background-image: url('img/head-img.png'); 
    background-repeat: repeat; 
} 

#nav { 
    z-index: 1; 
    margin: 0px auto; 
    text-align: center; 
    font-size: 25px; 
} 

#nav a { 
    color: white; 
    text-decoration: none; 
    padding-right: 10px; 
    font-family: fantasy; 
} 

#nav a:hover { 
    color: black; 
    text-decoration: underline overline; 
} 

#dlogo { 
    position: absolute; 
    /* background-color: #feffe3; */ 
    z-index: -1; 
    width: 100%; 
    height: 100%; 
} 

#dtext { 
    position: absolute; 
    z-index: -1; 
    margin: 0px auto; 
    width: 100%; 
    height: 100%; 
} 

#blogo { 
    display: block; 
    margin-top: 12%; 
    margin-left: auto; 
    margin-right: auto; 
} 

#btext { 
    margin-top: 55px; 
    margin-left: 40%; 
} 

#wrapper { 

} 

#content { 
    margin: 0px auto; 
    margin-top: 60px; 
    min-width: 600px; 
    max-width: 1000px; 
    font-size: 22px; 
    font-family: sans-serif; 
} 

#content h1, h2 { 
    color: orange; 
    font-family: serif; 
} 

#content a { 
    color: black; 
    text-decoration: none; 
} 

#content a:hover { 
    color: red; 
} 

#footer { 
    z-index: 1; 
    width: 100%; 
    height: 200px; 
    background-color: #1d726d; 
    margin-top: 40%; 
} 


<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <link rel="stylesheet" type="text/css" href="style.css" /> 
     <title></title> 
    </head> 
    <body> 
     <div id="dlogo"> 
       <img id="blogo" src="img/back-img2.png" /> 
     </div> 
     <div id="dtext"> 
       <img id="btext" src="img/f-it2.png" /> 
     </div> 
     <div id="header"> 
      <div id="nav"> 
       <a href="">Home</a> 
       <a href="">About Us</a> 
       <a href="">Solutions</a> 
       <a href="">Success Stories</a> 
       <a href="">Contracts</a> 
       <a href="">Careers</a> 
       <a href="">Contact Us</a> 
      </div> 
     </div> 
     <div id="wrapper"> 
      <div id="content"> 

      </div> 
     </div> 
     <div id="footer"> 

     </div> 
    </body> 
</html> 

如果你仔細觀察,你會看到黑色導航欄/頭不會拉伸從側面一路到另一側。

這似乎是一個10px的保證金已被應用到整個網站。

我該如何擺脫我從未應用的「保證金」,但不會發生在任何其他網站上。

我正在使用netbeans,chrome和xampp。

回答

2

您應該使用重置樣式表來重置瀏覽器添加到網頁的默認規則。 Eric Meyer'sYUI's重置樣式表適合大多數網頁。就我個人而言,我使用Eric Meyer作爲我的網頁。確保將重置樣式表放在任何其他樣式表之前。

+0

作爲快速修復,將身體的邊距設置爲零。 –

+0

重置後它的身體工作得很好,謝謝! – Zeveso

0

難道你不能這樣做嗎?

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

還是我錯過了這裏的觀點?如果你能詳細說明,沒有給出很多細節?它有助於。 :D

另外,給你的div負值margin值是我有時做的。