PDA

View Full Version : Fixed Header and footers



techno_adi
11 Oct 2006, 9:38 PM
hi,
I am trying to build a master page. This page has a fixed header, content area and footer.
Now in the header i have some menu items, when i click on this items the content area gets loaded with some controls and data specific to that menu item.
i am having problems with the content area part, its overlapping the header.
following is my css for this


.pageContainer {
width:100%;
height:100%;
padding:0px;
margin:0px;
overflow:hidden;
}
.pageContainer .fixedHeader {
position: absolute;
top: 0px;
background-color:#1C4B8D ;
background-image: url("../images/header-bar.gif");
border:solid 1px #6593cf;
height:10%;
width:100%;
overflow:hidden;
}
.pageContainer .mainContainer {
position: absolute;
overflow:auto;
background-color:Gray;
border-left:solid 1px #6593cf;
border-right:solid 1px #6593cf;
height:85%;
width:100%;
margin-top:10%;
margin-bottom:5%;

}
.pageContainer .fixedFooter {
position: absolute;
bottom: 0px;
padding: 10px;
background-image: url("../images/gradient-bg.gif");
border:solid 1px #6593cf;
height:5%;
width:100%;
overflow:hidden;
}
#mainlogo {
margin-left:10px;
margin-top:3px;
}
#bmmainmenubar {
visibility: visible;
margin:0px 0px 0px 0px;
}
.loading-indicator {
font-size:8pt;
background-image: url("../images/wait.gif");
background-repeat: no-repeat;
background-position: left;
padding-left:20px;
}

jack.slocum
12 Oct 2006, 5:29 AM
All of your container elements have borders which are going to throw everything off. Because of the flawed W3c standard, the sizes you specify are of the content dimensions and don't include border or padding.

techno_adi
12 Oct 2006, 5:34 AM
Is there a work around for this?

jack.slocum
12 Oct 2006, 5:36 AM
Don't put borders or padding on your layout elements, put it on your content elements instead. Basically, nest everything.

The other solution is to use JS to layout everything. That's what I do.