2014-01-28 39 views
0

我不確定這裏發生了什麼事情,但我正在努力解決這個問題,所以「Welcome to blabla」在我的thead的右側。但它似乎是毛刺?導航文字干擾正常嗎?

截圖:http://i.imgur.com/mCGCE8B.png

CSS代碼:

body { 
    background-image: url('images/bg.png'); 
    background-repeat: repeat; 
    padding: 0px; 
    margin: 0 0; 
} 

.content { 
    max-width: 1200px; 
    height: 800px; 
    margin: 0px auto; 
    background: #B9B9B9; 
    border-top-right-radius: 4px; 
    border-top-left-radius: 4px; 
    box-shadow: 0px 5px 5px #000; 
} 

#navBack { 
    max-width: 1200px; 
    height: 30px; 
    background: rgb(30,87,153); 
    background: rgb(69,72,77); 
    background: rgb(246,248,249); 
    background: -moz-linear-gradient(top, rgba(246,248,249,1) 0%, rgba(229,235,238,1) 50%, rgba(215,222,227,1) 51%, rgba(245,247,249,1) 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,248,249,1)), color-stop(50%,rgba(229,235,238,1)), color-stop(51%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1))); 
    background: -webkit-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); 
    background: -o-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); 
    background: -ms-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); 
    background: linear-gradient(to bottom, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0); 
    margin: 0px auto; 
    border-bottom: solid #424242; 
} 

#navBack ul { 
    list-style-type: none; 
    height: 80px; 
    max-width: 1200px; 
    margin: auto; 
} 

#navBack li { 
    list-style-type: none; 
    height: 80px; 
    width: 100px; 
    margin: 0; 
    text-align: center; 
    float: left; 
} 
#navBack ul a { 
    background-image: url(images/nav_sep.png); 
    background-repeat: no-repeat; 
    background-position: right; 
    padding-right: 0px; 
    padding-left: 0px; 
    display: block; 
    line-height: 30px; 
    text-decoration: none; 
    font-family: Georgia, "Times New Roman", Times, serif; 
    font-size: 16px; 
    color: #000; 
} 

#navBack ul a:hover { 
    color: #fff; 
} 

.copyright { 
    max-width: 1200px; 
    height: 30px; 
    background: rgb(246,248,249); 
    background: -moz-linear-gradient(top, rgba(246,248,249,1) 0%, rgba(229,235,238,1) 50%, rgba(215,222,227,1) 51%, rgba(245,247,249,1) 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,248,249,1)), color-stop(50%,rgba(229,235,238,1)), color-stop(51%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1))); 
    background: -webkit-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); 
    background: -o-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); 
    background: -ms-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); 
    background: linear-gradient(to bottom, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0); 
    margin: 0px auto; 
    border-top: solid #424242; 
    text-align: center; 
    line-height: 30px; 
    box-shadow: 0px 3px 3px #000; 
} 

.copyright a { 
    color: green; 
} 

#theadTitle { 
    max-width: 1200px; 
    height: 30px; 
    background: rgb(246,248,249); 
    background: -moz-linear-gradient(top, rgba(246,248,249,1) 0%, rgba(229,235,238,1) 50%, rgba(215,222,227,1) 51%, rgba(245,247,249,1) 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,248,249,1)), color-stop(50%,rgba(229,235,238,1)), color-stop(51%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1))); 
    background: -webkit-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); 
    background: -o-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); 
    background: -ms-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); 
    background: linear-gradient(to bottom, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0); 
    border-bottom: solid #424242; 
} 

#thead { 
    max-width: 1200px; 
    height: 400px; 
    background-color: #CBCBCB; 
    margin: 20px 20px; 
    box-shadow: 0px 0px 3px #000; 
} 

HTML代碼:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <title>Noszscape - Home</title> 
     <LINK href="style.css" rel="stylesheet" type="text/css"> 
    </head> 
    <body> 
     <div class="content"> 
      <div id="navBack"> 
       <ul> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">Forums</a></li> 
        <li><a href="#">Play Now</a></li> 
        <li><a href="#">Download</a></li> 
        <li><a href="#">Vote</a></li> 
        <li><a href="#">Donate</a></li> 
       </ul> 
      </div> 
      <div id="thead" style="width: 75%"> 
       <div id="theadTitle" > Welcome to Naszscape! </div> 
      </div> 
     </div> 
     <div class="copyright"> 
      <span style="font-style:italic"><strong>All rights reserved &copy;</span> <span style="color: skyblue"><a href="http://www.runelocus.com/forums/member.php?67852-317-Delta-Coder">317 Delta Coder</a></span> <span style="font-style:italic">2014</strong></span> 
     </div> 
    </body> 
</html> 
+0

通常你將有更好的機會得到你正在尋找的答案,並讓他們更快,通過使你的代碼簡短而中肯。嘗試刪除不直接涉及問題發生部分的任何代碼,或嘗試製作簡化的類似代碼,以便爲您展示相同的問題。 – Joeytje50

回答

0

你的width: 75%這是推文離開側面內嵌樣式。

我會刪除那個和max-width: 1200px;並將text-align: right;添加到#theadTitle元素。

See this fiddle.