I have a CSS generated section of an HTML page. It is currently positioned to be in the main content region of the page, which is right of a navigation bar. I have a graph that needs to be centered to the whole HTML page, which includes being under the navigation bar.
How would I use CSS positioning to overlay a block of HTML code (which has some CSS too) to be centered over the whole page.
I have a hunch as to how to do this: I think that I need overlapping CSS section to go under the navigation bar.
.layout #mainContent h6 {
position:absolute;
left:-1000px;
top:-10px;
z-index:5
}
The HTML to be overlayed will go under h6.
The HTML will be written like this
<h6>
All the HTML code to be overlaid
</h6>
I more or less want a way to center all the code in a section of my html, but it has to be centered relative to the whole HTML page, not just the CSS boxed section.
You can do this by setting a fixed width and height to the overlay content. eg:
.layout #mainContent h6 {
width:200px;
height:20px;
position:absolute;
top: 50%;
left: 50%;
margin-top:-10px; /* half element's height */
margin-left:-100px; /* half element's width */
z-index:1000
}