Begins with a basic web page that has a set width and a small header that matches the width set up at the top of the page. so we just need to make that header follow us as we scroll down the page. Here is what the code looks like in the beginning.
- <head>
- <style type="text/css">
- body{
- margin:0px;
- background:#000;
- }
- .header {
- height:50px;
- background:#F0F0F0;
- border:1px solid #CCC;
- width:960px;
- margin:0px auto;
- }
- .content {
- width:960px;
- background: #F0F0F0;
- border: 1px solid #CCC;
- height: 2000px;
- margin: 20px auto;
- }
- </style>
- </head>
- <body>
- <div></div>
- <div></div>
Changing the header width to
960px; will create the proper size, but it still needs to be positioned correctly. To do this, we add a property of margin: 0px auto; to the header and then create a new class .header-cont { width:100%; position:fixed; top:0px; }. This then wraps the header division to apply the two classes to it. You can also now remove the top: andposition: properties from the header- <style type="text/css">
- body{
- margin:0px;
- background:#000;
- }
- .header-cont {
- width:100%;
- position:fixed;
- top:0px;
- }
- .header {
- height:50px;
- background:#F0F0F0;
- border:1px solid #CCC;
- width:960px;
- margin:0px auto;
- }
- .content {
- width:960px;
- background: #F0F0F0;
- border: 1px solid #CCC;
- height: 2000px;
- margin: 70px auto;
- }
- </style>
- </head>
- <body>
- <div class="header-cont">
- <div></div>
- </div>
- <div></div>
No comments:
Post a Comment