I need to put a thin banner on the top of the page kinda like the orange notification one on this page. I need it to be absolutely positioned though, because when you click on it it needs to drop down (over the current page, not pushing the current page down). The banner needs to stretch the entire width of window but the content needs to be within 800px in the middle. I have it already made but I am having trouble with the CSS positioning of it.
Thanks!!
#banner {
position: absolute;
top: 0px;
left: 0px;
margin: 0 auto;
text-align: center;
}
#banner_contents {
width: 800px;
}
Should be as simple as making two divs...the main one wraps the content one and centers it.
Below is an example. The main #banner element stretches the full screen and is pinned to the top of the viewport using position: absolute; top: 0; left: 0. The width: 100% makes it stretch the full width.
The #banner-content is where you put your content. This is centered and fixed at 800px in width. I've put a border around it so you can see.
Note: I've also 'reset' the margins and padding of all the elements to clear the default padding. You might want to use something like Eric Meyer's Reset CSS in your final application.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test</title>
<style type="text/css" media="screen">
* {
margin: 0;
padding: 0;
}
div#banner {
position: absolute;
top: 0;
left: 0;
background-color: #DDEEEE;
width: 100%;
}
div#banner-content {
width: 800px;
margin: 0 auto;
padding: 10px;
border: 1px solid #000;
}
div#main-content {
padding-top: 70px;
}
</style>
</head>
<body>
<div id="banner">
<div id="banner-content">
This is your banner text, centered and fixed at 800px in width
</div>
</div>
<div id="main-content">
<p>Main page content goes here</p>
</div>
</body>
</html>