【发布时间】：2013-03-05 14:47:07
【问题描述】：
我在网络上看到了大量关于将内容集中在您的页面上是多么“简单”的演示。我想出了如何让我的标题占据浏览器窗口的整个宽度但是每当我尝试将我的内容居中时，我的所有浏览器都会扩展页面的宽度，所以我最终有一个水平滚动条。另一个问题是我的标题与浏览器的其余部分颜色不同，所以当我对正文进行更改时，有时它会更改标题的宽度，这样颜色就不会填满窗口。这个网站是我努力实现的一个很好的例子http://carlodiego.businesscatalyst.com/
我还希望我的标题有溢出：无；这样如果有人让浏览器窗口变小，标题就会开始消失。我已经为此工作了好几个小时，无论我做什么其他事情都会中断。下面是我的代码。抱歉，篇幅较长。
<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%;
}
【问题讨论】：
-
“浏览器”我想你的意思是视口？浏览器是一个软件。不是您在网站上看到的东西。居中是指垂直居中还是水平居中？
-
显示您的代码尝试，以便我们“修复”一些东西。我们不会从头开始编写页面。