A Smarter Way To Learn HTML & CSS(2015)
68
Layout:
a modern header part 5
In the last two chapters we created headers with a fixed position at the top of the browser window. In Chapter 66, you learned to create a header with absolute positioning that scrolls. In Chapter 67, you learned to create a header with fixed positioning that doesn’t scroll. We’ll soon be adding more to the HTML document, with the intention of building a page whose content looks like this. (I’m showing only a top portion of the page.)
The picture above shows what we want, but that’s not what we’re going to get. When you specify position: absolute or position: fixed, you remove the div from the normal flow of the HTML page. The div goes where you tell it to go, ignoring the natural flow of the other HTML elements. They return the favor by totally ignoring the div element. They behave as if it weren’t there. What this means is that when you force a header to take a particular position, the other stuff on the page won’t respectfully make room for it. Since the other elements don’t know it’s there, they’ll position themselves as if it isn’t there, right where the div is, violating the natural law that says two things can’t occupy the same space. Unaware of the div, they’ll flow normally and will wind up under the div. They’ll be invisible.
You could style the sidebar and main section with big top margins to move them down below the header so they’re in the clear. But I prefer a more elegant solution.
Create a duplicate of the header—a copy of it that isn’t fixed, a header that is part of the main flow. You make this header visible to the browser but invisible to the user. In effect, it’s a spacer.
div#invisible-header {
width: 100%;
visibility: hidden;
}
Add a new selector to the header’s h2 styling so the invisible heading is styled like the visible heading:
div#header h2, div#invisible-header h2 {
font-family: Verdana, Geneva, sans-serif;
font-weight: 900;
color: white;
font-size: 2em;
margin-left: 2%;
padding: 0;
}
Do the same thing for the image.
div#header img, div#invisible-header img {
float: left;
margin: .9em .6em 0 .75em;
}
visibility: hidden, specified for the header div and everything it encloses, tells the browser to keep its contents invisible (though the browser knows it’s there).
Since we floated the image, we need a paragraph that clears the float. We’ll style it this way:
p.clearFloat {
clear: both;
}
The HMTL code for the invisible header and its contents is inserted at the top of the page.
<body>
<div id="invisible-header">
<img src="robot-logo-bust.png" alt="logo">
<h2>A Smarter Way to Learn</h2>
</div>
For precision placement of the elements immediately below the header, you may need to adjust the margin of the spacer div. Since the browser will add a little whitespace above the spacer div, it’s going to drop a little below the visible header. To move it up so it mimics the visible header, give it some negative top-margin.
Why is the visible fixed header covering up the other elements instead of the other way around? Because by default a fixed-position element goes on top. But you can interfere with this stack order, using z-index. The lower the z-index number, the lower its place in the stack order. All elements that are in the normal HTML flow have an implicit z-index of 0.
In your CSS file, code invisible versions of the fixed-position div, its heading, and its image. In your HTML file insert the div and its contents at the top of the page contents, under <body>.
Sample CSS code is at:
http://asmarterwaytolearn.com/htmlcss/practice-68-1.html.
Sample HTML code is at:
http://asmarterwaytolearn.com/htmlcss/practice-68-2.html.
Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/68.html