2014-03-30 30 views
0

我的标题设置为100%的宽度,但在页面的左侧有一个很大的差距,虽然这不在页面的右侧。有什么想法吗?标题没有填满整个页面?

这里是我的代码:

HTML:

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>GS4 Concept Home Page</title> 
<link type="text/css" href="unicss.css" rel="stylesheet"/> 
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'> 
<script src="Script/jquery.js"></script> 
<script src="Script/main.js"></script> 
</head> 

<body> 
    <div id="header"> 
    <div class="nav"> 
     <ul class="navigation"> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">Galaxy S4</a> 
       <ul> 
        <li><a href="#">Verizon</a></li> 
        <li><a href="#">ATT</a></li> 
        <li><a href="#">Sprint</a></li> 
        <li><a href="#">T-Mobile</a></li> 
        <li><a href="#">International</a></li> 
       </ul> 
       </li> 

     </ul> 
    </div> 
</div> 
    <div id="container"> 

    </div> 

</body> 
</html> 

CSS:

@charset "utf-8"; 
/* CSS Document */ 
body{ 
    background-image:url(Images/backgroundmain.jpg); 
    min-width:100%; 
    font-family: Arial, Helvetica,sans-serif; 
    font-size:15px; 
} 

#header{ 
    position:fixed; 
    text-align:center; 
    background-color:#474747; 
    margin:auto; 
    width:100%; 
    height:50px; 
    display:block; 
    min-width:1000px; 
} 

#container{ 
    background-color:#FFF; 
    margin:auto; 
    width:70%; 
} 

.nav{ 
    text-align:center; 
    background-color:#999; 
} 

.navigation { 
    position:fixed; 
    display:block; 
    margin-top:15px; 
    padding:0; 
    list-style:none; 
} 

.navigation li { 
    float:left; 
    width:150px; 
    position:relative; 
} 

.navigation li a { 
    background:#262626; 
    color:#fff; 
    display:block; 
    padding:8px 7px 8px 7px; 
    text-decoration:none; 
    border-top:1px solid #666; 
    border-bottom:1px solid #666; 
    text-align:center; 
    text-transform:uppercase; 
} 
.navigation li a:hover { 
    color:#666; 
} 

.navigation ul { 
    position:absolute; 
    left:0; 
    display:none; 
    margin:0 0 0 -1px; 
    padding:0; 
    list-style:none; 
    border-bottom:1px solid #666; 
} 

.navigation ul li { 
    width:150px; 
    float:left; 
    border-top:none; 
} 

.navigation ul a { 
    display:block; 
    height:15px; 
    padding:8px 7px 13px 7px; 
    color:#fff; 
    text-decoration:none; 
    border-top:none; 
    border-bottom:1px solid #666; 
} 

.navigation ul a:hover { 
    color:#666; 
} 

的JavaScript(如果它的事项..?):

// Executes the function when DOM will be loaded fully 
$(document).ready(function() { 
// hover property will help us set the events for mouse enter and mouse leave 
    $('.navigation li').hover(
// When mouse enters the .navigation element 
     function() { 
//Fade in the navigation submenu 
      $('ul', this).fadeIn(); // fadeIn will show the sub cat menu 
     }, 
// When mouse leaves the .navigation element 
     function() { 
//Fade out the navigation submenu 
      $('ul', this).fadeOut(); // fadeOut will hide the sub cat menu 
     } 
    ); 
}); 

Shows the space on the left hand side.

回答

3

您需要通过添加margin:0去除身体上的默认边距:

body { 
    background-image:url(Images/backgroundmain.jpg); 
    min-width:100%; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size:15px; 
    margin:0; 
} 

jsFiddle example

+1

完美地工作!我不知道我是怎么看不到的,谢谢。 – sirnomnomz

0

尝试设置*{margin: 0; padding: 0;}去除任何填充/保证金的浏览器上的元素会自动将。

0

您使用的是空白和边距body元素之和为30像素 删除空白和边距或使其0 填补宽度