Posted 30 November 2009 - 05:56 PM
The CSS code for a header is quite simple depending on how you would like it to interact with the rest of the page.
#header {
top:0px;
right:20px;
left:20px;
position:fixed;
background: #eee;
border:1px solid #ccc;
padding: 0 10px 0 20px;
}
#header h1 {
margin: 0px;
padding: opx;
font:18px “Plantagenet Cherokee”;
letter-spacing:2px;
}
The above CSS contains the header div and the H1 tag. There are four very important things that are required when having a fixed header. First: It must have the position set to fixed. The other three are all about positioning and linking it to the top and sides. With the above code we set the sides to link 20px from the browser and the top to link directly.
Another important part of the CSS is having the page contents forced below what the header is covering. This will allow us to see div that is underneath. That chunk of CSS looks like this.
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
margin-top:40px;
}
The HTML looks something like this.
<html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>Dream In Code Tutorial</title> <link href=”style.css” rel=”stylesheet” type=”text/css” /> </head> <body> <div id=”header”> <h1>Header</h1> <!– end #header –></div> <div id=”container”> <div id=”mainContent”> <h1> Main Content </h1> </div> <div id=”footer”> <p>Footer</p> </div> </div> </body> </html>
Generally the header is kept withing the container to keep it aligned with the rest of the page however we wanted it to break out of the rest of the page and thus we moved it up, out and away.
The rest of this article will cover the footer which is very similar except for a few things. The footers CSS is going to be fixed to the bottom and not the top which is unlike the header. We will also need to pull it out of the HTML so it can fill up and be safe across browsers.
So first we will take note of the css which goes something like this:
#footer {
padding: 0 10px;
background:#EEE;
bottom:0px;
right:0px;
left:0px;
position:fixed;
}
#footer p {
margin: 0;
padding: 10px 0;
}
Once again we bring in the four important properties; bottom, left, right, and position. You will also need to change the body tag in the CSS so the footer does not overlap the content you would like the readers to see. This CSS is going to look like this:
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
margin-bottom:50px;
}
And now finally we will look at the HTML to see the footer break out of the container similar to what the header did.
<!– end #container –></div> <div id=”footer”> <p>Created by Caleb J</p> </div>
And now you should have a basic understanding of how to create a header and footer that are set in fixed positions similar to how Facebook does theirs.
MultiQuote
| 