Header layout with Positioning
Absolute and Relative Positioning
Positioning can be used to layout whole webpages. Here we are going to use it for the header layout. There are two types of positioning, absolute and relative.
- Absolute Positioning places your element relative to the top left hand corner of the page or the element it is within if that has a position assigned to it. Absolute Positioning removes the element from its natural location altogether leaving no space.
- Relative Positioning places your element relative to where it would normally sit on the page. It also leaves a space where it would normally sit.
Here we add positioning to three elements, I recommend looking at the page before adding the Header Division's positioning:
#header {
position: relative;
delete padding-top: 10px;
height: 130px;
border-bottom: 4px solid fuchsia;
background-color: yellow;
}
h1 {
position: absolute;
top: 50px;
left: 7px;
margin: 0px;
}
#header p {
position: absolute;
top: 96px;
left: 9px;
margin: 0px;
color: white;
}
We have added Relative Positioning to the Header because without it the Heading and Paragraph would position themselves from the top left corner of the page.
Now we'll adjust the font and size of the typography.
#header {
position: relative;
height: 130px;
border-bottom: 4px solid fuchsia;
background-color: yellow;
}
#header h1 {
position: absolute;
top: 70px;
left: 7px;
margin: 0px;
font-family: Arial;
font-size: 35px;
}
#header p {
position: absolute;
top: 92px;
left: 9px;
text-transform: uppercase;
font-size: 11px;
}
Although it isn't necessary for our page design I have specifically referenced the Header Heading1. Now if someone places another Heading1 in the content it will display correctly (even though it would still be bad document structure).