标题不会穿过整个页面

我试图让标题遍历整个页面。我在CSS中阅读了CSS全页宽度页眉和页眉，它遍历了页面帖子，&我尝试了一部分CSS中的页眉...使用width：1004px;没有工作。我也尝试宽度100％。我整个下午都在读书，不知道该怎么办。我希望我不会发送不必要的代码。谢谢标题不会穿过整个页面

<html> 
<head>  
    <title>some text</title> 

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

<body> 
    <div id="container"> 

     <div id="header"> 
      <img class="logo" src="file:///Users/janedoe/CGT136as/week07hw/website/images/lily-pads.jpg" alt="Admin Extraordinaire" />   
     </div><!--/#header--> 

    <div id="nav"> 
     <ul> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">About Us</a></li> 
      <li><a href="#">Our Services</a></li> 
      <li><a href="#">Read Our Blog</a></li> 
      <li><a href="#">Contact Us</a></li> 
     </ul> 
    </div><!--/#nav--> 
    </div><!--/#container--> 

</body> 
</html>

/*身体和集装箱 --------------------------------- */

body { 
    font-size: 76%; 
    background-repeat: repeat-x; 
    padding: 0px; 
    margin: 0px; 
} 

#container { 
    overflow: hidden; 
    width: 900px; 
    margin: 0 auto 0 auto; 
} 



/* HEADER AREA 
    ---------------------------------*/ 
    #header { 
     float: left; 
     width: 100%; 
     height: 150px; 
     padding: 0px; 
     margin: 0px; 
     background-color: #baaf07; 
    }

来源

2013-10-17 user2847948

您的div#container有固定的宽度。尝试将其更改为100%这样的：

#container { 
    overflow: hidden; 
    width: 100%; 
    margin: 0 auto 0 auto; 
}

http://jsfiddle.net/wmhAd/

来源

2013-10-17 22:14:48 showdev

这个工作。谢谢你 – user2847948

你必须具有width: 900px;

#container { 
    overflow: hidden; 
    width: 900px; 
    margin: 0 auto 0 auto; 
}

你将不得不放置头该分区外的容器内的头这将是100％。

你也可以给它position: absolute;一个left: 0;和top: 0;。

来源

2013-10-17 22:14:49

谢谢。当你说把这个头部放在那个div的外面时，你的意思是把#header放在#container之前？ – user2847948

是的，除非你想在头文件里面找到那个内容，否则这是最好的结果？ –

这不适合我。也许我有一些旧代码的痕迹。我会再试一次。非常感谢。 – user2847948

您试图将100％的宽度分配给浮动容器。这是行不通的。从#header删除float: left。

来源

2013-10-17 22:15:12 Isaac

'width'可以应用于浮动元素。但在这种情况下，我同意：不需要浮动'＃头文件'。 – showdev

只有固定宽度可以应用于浮动元素。百分比不会有帮助。据我记得，至少。 – Isaac

带浮动的百分比宽度适用于我：http://jsfiddle.net/YdyeE/ – showdev

您的容器有限制（900px）。由于您的标头位于容器内部，因此它也受限于此。通过将position: absolute添加到您的标题，它会忽略容器的限制。然后，您需要添加left: 0以确保标题从页面左侧开始。

Example

#header { 
    position: absolute; 
    left: 0; 
    width: 100%; 
    height: 150px; 
    padding: 0px; 
    margin: 0px; 
    background-color: #baaf07; 
}

来源

2013-10-17 22:16:26 Jonathan

标题不会穿过整个页面

回答

相关问题