I've seen tons of demos on the web about how "simple" it is to center the content on your page. I figured out how to make my header take up the entire width of the browser window however whenever I try to center my content all my browsers extend the width of the page, so I end up having a horizontal scrollbar. The other problem is my header is a different color than the rest of my browser so when I make changes to the body sometimes it changes the width of the header so that the color doesn't fill the window. This website is a great example of what I am trying to achieve http://carlodiego.businesscatalyst.com/
I also want my header to have overflow: none; so that if someone makes the browser window smaller the header begins to disappear. I've been working on this for hours a regardless what I do something else breaks. Below is my code. Sorry but it's lengthy.
<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%;
}
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
