如何让页眉占据浏览器窗口的整个宽度时使页面居中？

-2

我在网上看到大量的演示，关于如何“简单”将内容置于页面上。我想出了如何让我的页眉占据浏览器窗口的整个宽度，但是每当我尝试以我的内容为中心时，所有的浏览器都会扩展页面的宽度，所以我最终得到了一个水平滚动条。另一个问题是我的头文件与我的其他浏览器颜色不同，所以当我对文本进行更改时，它有时会更改头文件的宽度，以使颜色不填充窗口。这个网站是我试图实现的一个很好的例子http://carlodiego.businesscatalyst.com/如何让页眉占据浏览器窗口的整个宽度时使页面居中？

我也想让我的头部溢出：none;所以如果有人使浏览器窗口变小，标题开始消失。无论我做了什么其他事情，我一直在为此工作数小时。以下是我的代码。对不起，但它很长。

<body> 
<header> 
    <div id="wrapper"> 
     <div id="fixed"> 
      <div id="menu-container"> 
       <ul id="navigationMenu"> 
        <li><a href="#" class="normalMenu">Home</a></li> 
        <li><a href="#" class="normalMenu">About</a></li> 
        <li><a href="#" class="normalMenu">Work</a></li> 
        <li><a href="#" class="normalMenu">Contact Me</a></li> 
       </ul> 
      </div> 
      <div id="title"> 
      <h1>Alex</h1> 
      <h1 id="last">Chaparro</h1> 
      </div> 
     </div> 

</header> 

     <div id="background"> 

     <div id="front-end"> 
      <h1>Front-End <br> Developer</h1> 
     </div> 
     <div id=content> 

      <h1 class="heading">About</h1> 
      <p>content</p> 

      <h2>Currently Using</h2> 
      <p>More Content...</p> 

      <h2>Currently Following</h2> 
      <p>Chris Mills | David Sawyer Mcfarland | Phil Thompson </p> 

      <h1 class="heading">Work</h1> 

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


body { 
    margin: 0; 
    padding:0; 
    border: 0; 
    font-size: 100%; 
    line-height: 1.5; 
    font-family: 'optimusprincepssemiboldRg'; 
    background: #fafafa; 

    background-color: #eeeeee; 
    } 



article, aside, audio, canvas, datalist, details, figcaption, figure, footer, header, hgroup, menu, nav, section, video { 
    display: block; 
} 

#title { 
    font-family: 'optimusprincepssemiboldRg'; 
    color: black; 
} 

#last { 
    font-size: 400%; 
    line-height: 0; 
    margin-top: 40px; 
} 

#menu-container { 
    position: absolute; 
    margin-left: 420px; 
    white-space: nowrap; /* stops text from wrapping */ 
    overflow: hidden; 
} 

#background { 
    background-color: #eeeeee; 
    position: absolute; 
    height: 100%; 
    margin-top: 20px; 
    margin-left: 20%; 
    margin-right: 20%; 
} 

#front-end { 
    margin-top: 100px; 
    font-size: 200%; 
    width: 100%; 
    text-align: center; 
} 

.heading { 
    font-size: 300%; 
} 

#fixed { 
    position: relative; 
    height: 200px; 
} 

header { 
    width: 100%; 
    overflow: hidden; /*This stops the color from going away*/ 
    background-color: #cee3ee; 
} 

#wrapper { 
    margin-left: 20%; 
    margin-right: 20%; 
}

来源

2013-03-17 London804

通过“浏览器”我想你的意思是视口？浏览器是一个软件。不是你在网站上看到的东西。而通过居中，你是指垂直或水平居中？ – Terry 2013-03-17 03:38:15

显示您的代码尝试，以便我们有一些“修复”。我们不打算从头开始编写一个页面。 – Sparky 2013-03-17 03:42:05

你想有一个header和main的div。并使其定位于absolute。和使用margin:0px auto;为主中心。

这样的事情http://jsfiddle.net/WAR4r/

来源

2013-03-17 03:49:46 btevfik

这让我走向了正确的方向。当您最小化页面时，顶部的颜色不会占用全部宽度。如果我没有更清楚地说明问题，我很抱歉。我没有把我的代码放在那里，因为我认为这会很长时间，下次就会完成。 – London804 2013-03-17 04:18:45

你是什么意思顶部的颜色？如果您的意思是标题，那么无论页面大小如何，它都会占用整个宽度。 – btevfik 2013-03-17 04:20:33

没问题。很高兴它有帮助。 – btevfik 2013-03-17 04:32:59

如何让页眉占据浏览器窗口的整个宽度时使页面居中？

回答

相关问题