Datatable rides up over top of page header
Datatable rides up over top of page header
I have DataTables working well except for one thing.
My pages have a header bar with the site title and nav links. The header bar (#top) is fixed position so that vertically scrolling page content slides underneath it and it always stays visible.
The problem is that the datatable rides up over top of the header bar instead of sliding under it.
Unfortunately this is on an Intranet page and I can't link to it.
Can anyone help me solve this problem? The relevant CSS is below.
[code]#top_offset, #top {
height:30px;
}
#top_offset {
margin-bottom:25px;
}
#top {
padding: .5em;
border-bottom: 1px solid navy;
color: white;
background-color: #006;
/* ----- MAKE TOP MENU FIXED, CONTENT SCROLLS UNDER ----- */
/* *** DON'T FORGET TO ENABLE #TOP_OFFSET *** */
position:fixed;
top:0;
width:98.5%;
left:50%;
margin-left:-49.825%;
/* ----- /make top menu fixed, content scrolls under ----- */
}[/code]
My pages have a header bar with the site title and nav links. The header bar (#top) is fixed position so that vertically scrolling page content slides underneath it and it always stays visible.
The problem is that the datatable rides up over top of the header bar instead of sliding under it.
Unfortunately this is on an Intranet page and I can't link to it.
Can anyone help me solve this problem? The relevant CSS is below.
[code]#top_offset, #top {
height:30px;
}
#top_offset {
margin-bottom:25px;
}
#top {
padding: .5em;
border-bottom: 1px solid navy;
color: white;
background-color: #006;
/* ----- MAKE TOP MENU FIXED, CONTENT SCROLLS UNDER ----- */
/* *** DON'T FORGET TO ENABLE #TOP_OFFSET *** */
position:fixed;
top:0;
width:98.5%;
left:50%;
margin-left:-49.825%;
/* ----- /make top menu fixed, content scrolls under ----- */
}[/code]
This discussion has been closed.
Replies
[code]
.header {
position:fixed;
left:0;
top:0;
width:100%;
z-index: 100;
background-color: #465a84"
}
[/code]
I wonder if the missing bit in yours is 'z-index'.
Steph
Simply added that one line to my #top and that's it.
I'm going to have to read up on z-index.
Many thanks,
Rob