MediaWiki:Common.css: Difference between revisions
Fix z-index to stop content from swallowing buttons, and pull login tools down |
Total reset of header using absolute positioning to fix all overlaps |
||
| Line 738: | Line 738: | ||
position: relative !important; | position: relative !important; | ||
z-index: 1 !important; | z-index: 1 !important; | ||
} | |||
/* --- 25. The Ultimate Absolute Header Reset --- */ | |||
/* Make page-base absolute so it stops interfering with vertical flow */ | |||
#mw-page-base { | |||
position: absolute !important; | |||
top: 0 !important; | |||
left: 0 !important; | |||
right: 0 !important; | |||
height: 180px !important; /* Keep the sky banner 180px tall */ | |||
} | |||
/* Hardcode the header container to exactly 90px tall at the top of the page */ | |||
#mw-head { | |||
position: absolute !important; | |||
top: 0 !important; | |||
left: 0 !important; | |||
right: 0 !important; | |||
width: 100% !important; | |||
height: 90px !important; | |||
margin: 0 !important; | |||
z-index: 50 !important; /* Ensure header is always above content */ | |||
} | |||
/* Force personal tools (login) to sit at the absolute top right, far away from tabs */ | |||
#p-personal { | |||
position: absolute !important; | |||
top: 10px !important; | |||
right: 15px !important; | |||
margin: 0 !important; | |||
z-index: 100 !important; | |||
} | |||
/* Force Left Navigation (Main Page tab) to sit at the absolute bottom left of the 90px header */ | |||
#left-navigation { | |||
position: absolute !important; | |||
bottom: 0 !important; | |||
left: 175px !important; | |||
margin: 0 !important; | |||
float: none !important; | |||
} | |||
/* Force Right Navigation (Read/Edit/Search) to sit at the absolute bottom right of the 90px header */ | |||
#right-navigation { | |||
position: absolute !important; | |||
bottom: 0 !important; | |||
right: 15px !important; | |||
margin: 0 !important; | |||
float: none !important; | |||
} | |||
/* Ensure the beige bar spans the entire width and anchors to the bottom */ | |||
#mw-head::before { | |||
content: ""; | |||
position: absolute !important; | |||
bottom: 0 !important; | |||
left: 175px !important; | |||
right: 0 !important; | |||
height: 46px !important; | |||
z-index: 0 !important; /* Behind the tabs */ | |||
} | |||
/* Push the content box down by exactly 90px so it latches perfectly to the header */ | |||
#content { | |||
margin-top: 90px !important; | |||
margin-left: 175px !important; | |||
position: relative !important; | |||
z-index: 1 !important; /* Safely under the header */ | |||
} | |||
/* Reset the active tab overlap to the correct 3px now that everything is perfectly absolute */ | |||
.vector-menu-tabs .vector-menu-content-list > li.selected { | |||
margin-bottom: -3px !important; | |||
} | } | ||