Forum Moderators: not2easy
I am having a nightmare with a specific design, I am trying to develop a single column down the centre of the page, then have a banner about 2em's from the top of the browser window and 100% width of the window. This banner also needs to lay above the main column.
Using the below code puts the banner in the right place, but pushes the main column below the banner.
Any help would be much appreciated.
Thanks
Morledge
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Page</title>
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
.oneColElsCtr #container {
width: 46em;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
z-index:10;
}
.oneColElsCtr #mainContent {
padding: 0 20px;
}
.oneColElsCtr #fixedBanner {
position:fixed;
width:100%;
margin-top:2em;
background:#FF00FF;
z-index:20;
}
-->
</style></head>
<body class="oneColElsCtr">
<div id="fixedBanner">Fixed Banner</div>
<div id="container">
<div id="mainContent">
<h1> Main Content </h1>
</div>
</div>
</body>
</html>
position:fixed does not work in all browsers. I am assuming you want the banner over the top of the main column? Using that assumption, change:
.oneColElsCtr #fixedBanner {
position:fixed;
width:100%;
margin-top:2em;
background:#FF00FF;
z-index:20;
}
to:
.oneColElsCtr #fixedBanner {
position:absolute;
top: 2em;
width:100%;
/*margin-top:2em; REMOVE */
background:#FF00FF;
z-index:20;
}
If my assumption is wrong and you merely want the banner at the top, then remove position:fixed from .oneColElsCtr #fixedBanner
Marshall
That is exactly what I am looking for. I tried all the different position options but non of them seemed to work. I see my error was including "margin-top" rather then just "top".
Thanks for the help :-)
Marshall
