Fixed Page Header

I've never dealt with CSS but now I have to. I'm developing some HTML code - a sketch of a website and have a problem with CSS. I would like to have my header in a fixed position, I mean it always should be on the top of the site, even if there is so much content that site has to be scrolled to see everything. I've tried somethig, but it does not work properly.

HTML:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="./css/main.css"></link>
  </head>
  <body>
    <header>
      <div id="top-menu-bar">
        Login &nbsp; | &nbsp; Registration
      </div>
      <div id="logo-bar">
        LOGO
      </div>
      <div id="main-menu-bar">
            MenuItem1 &nbsp; | &nbsp; MenuItem3 &nbsp; | &nbsp; MenuItem3
      </div>
    </header>
    <div id="content">
      <h1>
        Content
      </h1>
      <p>
        Some content<br/>
      </p>
    </div>
    <footer>
      Footer
    </footer>
  </body>
</html>

CSS:

body {
    margin: 0px 0px 0px 0px;
}

header {
    border: 2px solid red;
    position: fixed;
    width: 100%;
}

#top-menu-bar {
    border: 1px dashed red;
    padding: 15px;
    text-align: right;
}

#main-menu-bar {
    border: 1px dashed red;
    padding: 15px;
}

#logo-bar {
    border: 1px dashed red;
    padding: 35px;
}

#content {
    border: 2px solid black;
}

footer {
    border: 2px solid blue;
    padding: 15px;
}

if you still do not get it what I mean, here I provide links with fixed, witout fixed

Of course, what I'm looking for is nice a solution, without unnecessary code (even CSS and JS). It is important to note that no one element, especially header has not fixed height!

Answers


If I understand your problem correctly, you want to add the following CSS to your header to make it stay at the top of the page:

top: 0px;

Then, with div#content, give it a top margin to push it down out of the header's way:

margin-top: 200px;

So your CSS ends up looking like this:

header {
    border: 2px solid red;
    position: fixed;
    width: 100%;
    top: 0px;
}

#content {
    border: 2px solid black;
    margin-top: 200px;
}

Need Your Help


About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.