Creating a Navigation Bar FIXED on the top of screen

Question

I'm creating a navigation system and currently all I have is the titles at the top of the screen, side by side, eg home, about us and so on.

I'm unsure how I would create a fixed position for the navigation system at the top of the screen, so when you scroll down etc the options will still be there to click onto at the top of the screen.

Also, how it would be possible to add a background colour just to the navigation system?

Thank you.

Answer 1

Try something like this:

In between the tags in the HTML:

<div id='header'>NAVIGATION LINKS</div>

and in the CSS put:

#header{
   padding:10px;
   height:20px;
   position:fixed;
   width:100%;
}

Here's a JSFiddle: http://jsfiddle.net/MGumH/

Answer 2

It would most probably be best to go the HTML5 route, and use SEMANTIC tags.

Something along the lines of the below:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Title</title>
  <!-- next line points to EXTERNAL Stylesheet -->
  <link type="text/css" rel="stylesheet" href="mystylesheet.css" />
</head>

<body>

  <!-- HEADER -->
  <header>
    <h1>Header in h1</h1>
  </header>

  <!-- NAVIGATION -->
  <nav>
    <ul>
      <li class="MyMenuItem"><a href="#">Menu Option 1</a></li>
      <li class="MyMenuItem"><a href="#">Menu Option 2</a></li>
      <li class="MyMenuItem"><a href="#">Menu Option 3</a></li>
    </ul>
  </nav>

  <!-- SECTION(S) -->
  <br />
  <section>
    <article>
      <header>
        <h3 class="MyArticleHeader">Article #1</h3>
      </header>
      <section>
        <p>This is the first article.  This is <mark>highlighted</mark>. This is some body text, lorem ipsum dipsum and some more unknown latin words over and over again. Lorem ipsum dipsum and some more unknown latin words over and over again. Lorem ipsum dipsum and some more unknown latin words over and over again. Lorem ipsum dipsum and some more unknown latin words over and over again.</p>
      </section>
    </article>
    <article>
      <header>
        <h3 class="MyArticleHeader">Article #2</h3>
      </header>
      <section>
        <p>This is the second article.  These articles could be blog posts, etc.</p>  
      </section>
    </article>
  </section>

  <!-- FOOTER -->
  <footer id="MyFooter">Footer - Copyright 2013</footer>
</body>
</html>

There are also other semantic tags too, like Aside for example.

And this is the stylesheet that goes with the above sample

body
{
  padding: 12px;
}   

h1
{
  color: #FFFFFF;
  background-color: #FF0000;
  text-align: center;
  vertical-align: middle;
}

.MyMenuItem
{
  margin: 2px;
  padding: 2px 8px 2px 8px;
  list-style-type: none;
  vertical-align: middle;
  text-align: center;
  float: left;
  color: #FFFFFF;
  background-color: #FFCC66;
}

.MyMenuItem:hover
{
  margin: 2px;
  padding: 2px 8px 2px 8px;
  list-style-type: none;
  vertical-align: middle;
  text-align: center;
  float: left;
  color: #000000;
  background-color: #99CCFF;
}

.MyArticleHeader
{
  color: #FF0000;
  text-decoration: underline;
  font-weight: bold;
}

p
{
  font-family: Tahoma;
  font-size: 12pt;
}

#MyFooter
{
  color: #FFFFFF;
  background-color: #FF0000;
  vertical-align: middle;
  text-align: center;
}

Simply copy ans paste the above two samples into separate files one called test.htm and the other called mystylesheet.css (in the same folder)

Ref: for further information http://blogs.msdn.com/b/jennifer/archive/2011/08/01/html5-part-1-semantic-markup-and-page-layout.aspx

Creating a Navigation Bar FIXED on the top of screen

Question

2 answers

solution1
2 2013-04-28 00:26:48

solution2
2 2013-04-28 01:56:17

Creating a Navigation Bar FIXED on the top of screen

Question

2 answers

solution1 2 2013-04-28 00:26:48

solution2 2 2013-04-28 01:56:17

solution1
2 2013-04-28 00:26:48

solution2
2 2013-04-28 01:56:17