RWDHTMLCSS.COM

Position the small menu in the upper right hand corner of header.

HTML

<header>>
<div id="smallmenu">
<a href="about.html">About</a> - <a href="sitemap.html">Site Map</a> - <a href="fags.html">Faqs</a>
</div>
<br>

CSS

header {
position:relative;
}

#smallmenu {
	position:absolute;
	top:0;
	right:0;
	height:20px;
	<!--If adding more links, make sure #smallmenu width is wide enough-->
	width:200px;
	padding:3px 0 0 10px;
	margin:0;
	text-align:center;
	font-size:10pt;
	color:black;
}

#smallmenu a:link {
color:black;
text-decoration:none;
font-weight:bold;
outline: none;
}

#smallmenu a:visited {
color:black;
text-decoration:none;
font-weight:bold;
outline: none;
}

#smallmenu a:hover {
color:white;
text-decoration:none;
font-weight:bold;
outline: none;
}

#smallmenu a:active {
color:red;
text-decoration:none;
font-weight:bold;
outline: none;
}

The small menu is inside the header element. That makes the header the parent element of the small menu. In CSS positioning, you can position the small menu to appear in the upper right corner of the header. The header is positioned position:relative;. The #smallmenu is positioned position:absolute;. The small menu has to be positioned absolute. In order for the positioning to work, the header element has to be positioned relative. If you dont do that, it won't work.

• The five different positioning values. You use the top, bottom, right and left properties to position it where you want it. top:0;
• Static is the default positioning. What you see without positioning anything. This value is not effected by the top, bottom,left and right properties.
• relative positions the element relative to its normal position using top, bottom, left and right properties. If 100 pixel wide div would normally position itself to the left side of page, using relative positioning with the left:50px; property:value, would move the div to the right 50 pixels. The div box is the only element that would move right. Relative is also used in a parent element that has a element inside it positioned with position:absolute;. In this case, you don't use top, bottom, left or right. Just like in the example farther up on the page.
• fixed is when a element is fixed in a position relative to the viewport(webpage). It does not scroll. Stays in same place. The top, bottom, left and right properties are used to tell the browser where to fix the element.
• absolute Like in the example above, the menu is in the header section therefor the header is the small menus nearest ancestor. The ancestor is positioned relative and small menu is positioned absolute. A absolute positioned element(small menu) is positioned inside its nearest ancestor(header). The top, bottom, left and right properties are used with absolute to position it within the element it is nested in.
• sticky is not compatible with all browsers and you have to use webkits for them to work.
• Don't forget to test your code often by loading it in a browser to see what your doing.
• You can add this to the h1 on the css sheet if you want. It will rise those headings up in the header.
  h1 {
  padding-top:0;
  margin-top:0;
  }