Geek Answers Handbook

Fixed Page Title

I have never done CSS, but now I have to. I am developing HTML code - a website sketch and a CSS issue. I would like my title to be in a fixed position, I mean that it should always be on top of the site, even if there is so much content that the site needs to scroll to see everything. I tried somethig but it does not work correctly.

HTML:

    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;
    }
 <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>
Run codeHide result

if you still do not understand what I mean, here I provide links with a fixed, witout fixed

Of course, what I'm looking for is a good solution, without unnecessary code (even CSS and JS). It is important to note that not a single element, especially the title, recorded a height!

+5
3

, CSS , :

top: 0px;

, div#content, , :

margin-top: 200px;

, CSS :

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

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

:

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

More articles:


All Articles