SUCCESS!
It took a little while, but I succeeded in getting my header to remain fixed at the top of the screen in all browsers!
The tutorial article I referenced above gave all the tools, but of course I had to adapt things for use with Atahualpa. Here is a summary of what I added and changed to make this work:
In ATO > Style & edit HEADER AREA -
HTML Code:
<div id="header-wrap">
<div id="header-container">
%pages %logo %bar1 %image %bar2
</div>
</div>
In ATO > Add HTML/CSS Inserts > CSS Inserts -
Code:
#header-wrap {
position: fixed;
width: 1000px;
top: 0px;
}
#header-container {
height: 90px;
}
To keep the center and sidebars from running up underneath the fixed header, one needs to adjust the top padding to keep that part of the browser window clear. In ATO > Style & edit CENTER COLUMN > Center Column style - adjust the top padding, the first number in the padding list (the default is 10px) to accommodate the Header height - I set mine to 120px and my line became:
Code:
padding: 120px 15px;
In ATO > Style & configure SIDEBARS - adjust the top padding (first parameter in the padding list) for each relevant sidebar style - mine became:
Code:
border-right: dashed 1px #CCCCCC;
padding: 120px 10px 10px 10px;
background: #ffffff;
This completes the work for Firefox, Safari, Chrome, and IE 7 & 8!
Since IE6 does not handle CSS position: fixed properly, if one wants to keep the site working for IE6 visitors, one has to add a few additional things.
Return to ATO > Add HTML/CSS Inserts, and in the Header, put in conditional code that only IE6 will execute that loads a supplemental style sheet:
HTML Code:
<!--[if IE 6]>
<link href="http://www.yoursite.com/css/ie6-fixed-header.css" rel="stylesheet" type="text/css" />
<![endif]-->
One needs to create the CSS file for this, and name and place it in the proper directory and URL referenced above. The CSS file is simple:
Code:
html, body{
height: 100%;
overflow: hidden;
}
#header-wrap {
position: absolute;
}
#header-container {
margin-right: 17px;
}
#ie6-container-wrap {
width: 100%;
height: 100%;
overflow: auto;
}
Finally, one needs to create an extra "ie6-container-wrap" DIV that will contain the entire BODY of the site, that only has an effect in IE6.
In ATO > Add HTML/CSS Inserts > Body Top - add the following line:
HTML Code:
<div id="ie6-container-wrap">
In Body Bottom, add the following to close the DIV:
As far as I can remember, these are the steps that I did to achieve the effect.
I hope some others in the Atahualpa community find this useful!
P.S. One last thing - I noticed that the Flash videos on some of the pages on my site had a strange behavior. When I scrolled the page, they went up underneath part of the header (the page menu bar) normally, but slid on top of the header graphic images, which looked pretty odd. I was able to find an article that gave me a clue for how to deal with this:
http://www.communitymx.com/content/a....cfm?cid=e5141
The solution to this problem is to change the "wmode" parameter for the Flash video from its default value ("window") to "opaque". This makes the Flash video position itself directly within the page, rather than being in a separate layer; this makes it both opaque (you can't see through it, even if part of the video is transparent), but ALSO makes it possible for other graphic elements (e.g. the header images) to cover it up as they cover up neighboring elements on the page.
For more details on this topic, please visit the web page referenced here.