2015-06-20 52 views
0

直指点;在我的网站有一个边缘边框,我似乎无法删除它...我尝试了一切,禁用了一些CSS,..我真的不知道那边是在那里做什么。我的网站边框

图像:

enter image description here

索引码:

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>XylCro Home</title> 
<link rel="stylesheet" type="text/css" href="style/style.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> 
    <script src="js/jquery-scrolltofixed-min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      // grab the initial top offset of the navigation 
      var stickyNavTop = $('.nav ul').offset().top; 

      // our function that decides weather the navigation bar should have "fixed" css position or not. 
      var stickyNav = function(){ 
       var scrollTop = $(window).scrollTop(); // our current vertical position from the top 

       // if we've scrolled more than the navigation, change its position to fixed to stick to top, 
       // otherwise change it back to relative 
       if (scrollTop > stickyNavTop) { 
        $('.nav ul').addClass('sticky'); 
       } else { 
        $('.nav ul').removeClass('sticky'); 
       } 
      }; 

      stickyNav(); 
      // and run it again every time you scroll 
      $(window).scroll(function() { 
       stickyNav(); 
      }); 
     }); 
    </script> 
</head> 
<body> 
<div id="container"> 
    <div id="wrapper"> 
     <div id="header"> 
      <!-- div socialbar and logo --> 
     </div> 
     <div class="nav"> 
       <ul> 
        <li><a href="#">Test1</a></li> 
        <li><a href="#">Test2</a></li> 
        <li><a href="#">Test3</a></li> 
        <li><a href="#">Test4</a></li> 
        <li><a href="#">Test5</a></li> 
       </ul> 
     </div> 
     <!-- other divs --> 
     <div id="content"> 
      <!-- content here --> 
      <p>Content comes here</p> 
     </div> 
     <div id="footer"> 
      <!-- copyright here --> 
     </div> 
    </div> 
</div> 
</body> 
</html> 

CSS代码:

@charset "utf-8"; 
/* CSS Document */ 
hr{ 
    display:block; 
} 
html{ 
    background-image:url(img/static/bg.jpg); 
    background-repeat:repeat; 
    background-position:top center; 
} 
body{ 
    font-family:helvetica; 
    font-size:1em; 
    line-height:1.4; 
} 
#wrapper{ 
    background-color:#C00; 
    background-image:url(img/static/headertest.fw.png); 
    background-position:top center; 
    background-repeat:no-repeat; 
    padding:0; 
} 
#header{ 
    height:260; /* need to change */ 
} 
/* social and logo */ 
.sticky { 
    position:fixed; 
    width: 100%; 
    left: 0; 
    top: 0; 
    z-index: 100; 
    border-top: 0; 
} 
/* content and other divs */ 
.nav ul{ 
    list-style: none; 
    background-color: #444; 
    text-align: center; 
    padding: 0; 
    margin: 0; 
} 
.nav li{ 
    display: inline-block; 
    margin-right: -4px; 
    font-size: 1.2em; 
    line-height: 40px; 
    height: 40px; 
    border-bottom: 1px solid #888; 
} 
.nav a { 
    text-decoration: none; 
    color: #fff; 
    display: block; 
    transition: .3s background-color; 
} 
.nav a:hover { 
    background-color: #005f5f; 
} 

.nav a:active { 
    background-color: #fff; 
    color: #444; 
    cursor: default; 
} 
@media screen and (min-width: 600px) { 
    .nav li { 
    width: 120px; 
    border-bottom: none; 
    height: 50px; 
    line-height: 50px; 
    font-size: 1.4em; 
} 

回答

2
body

标签具有默认余量。要防止它,请添加

body { 
    margin: 0 
} 

请参阅fiddle与您的代码与修复程序。

+0

非常感谢! – XylCro

+0

欢迎。为了解决这样的问题,使用代码检查器,例如用于Firefox的Chromes调试器或Firebug。可以选择任何元素并查看其所有参数:高度,宽度,边距和其他参数。然后问题变得清晰。 – user3272018