STEP 9 (Styling the Header)

Let’s start to code our header section. Within the header id, let’s declare a background image (headerBG.jpg) from the slice we did at the beginning of this tutorial. We want to give it a color of the same blue from the edge of the header gradient. You can find the color by using the Photoshop eyedropper tool. This way if for any reason the header image does not load, there will still be the blue in the background. Now set the height of the header which is the same height as the header background image. Give the header a margin and finally give it a relative position so the child containers can be absolutely positioned.

CSS: (style.css)

/*-----GENERAL-----*/
html, body {
	font-family:Arial, Helvetica, sans-serif;
}

h2 {
	font-size:2.0em;
	margin-bottom:20px;
}

#wrapper {
	width:960px;
	margin:0 auto;
}

/*-----UTILITY-----*/
.group:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

/*-----HEADER-----*/
#header {
	background:url(../images/headerBG.jpg) #061f41 no-repeat;
	height:242px;
	position:relative;
	margin-bottom:20px;
}

Next we have the logo id. Simply give it an absolute positioning and set the top to 30 pixels and left to 20 pixels.

CSS: (style.css)

/*-----GENERAL-----*/
html, body {
	font-family:Arial, Helvetica, sans-serif;
}

h2 {
	font-size:2.0em;
	margin-bottom:20px;
}

#wrapper {
	width:960px;
	margin:0 auto;
}

/*-----UTILITY-----*/
.group:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

/*-----HEADER-----*/
#header {
	background:url(../images/headerBG.jpg) #061f41 no-repeat;
	height:242px;
	position:relative;
	margin-bottom:20px;
}

#logo {
	position:absolute;
	top:30px;
	left:20px;
}

Next is the tagline id. This is also set to absolute positioning with top at 90 pixels and left at 70 pixels. In addition we will set the font color to white and size to 1.2 ems.

CSS: (style.css)

/*-----GENERAL-----*/
html, body {
	font-family:Arial, Helvetica, sans-serif;
}

h2 {
	font-size:2.0em;
	margin-bottom:20px;
}

#wrapper {
	width:960px;
	margin:0 auto;
}

/*-----UTILITY-----*/
.group:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

/*-----HEADER-----*/
#header {
	background:url(../images/headerBG.jpg) #061f41 no-repeat;
	height:242px;
	position:relative;
	margin-bottom:20px;
}

#logo {
	position:absolute;
	top:30px;
	left:20px;
}

#tagline {
	position:absolute;
	top:90px;
	left:70px;
	color:#ffffff;
	font-size:1.2em;
}

Then we have the login id which is absolutely positioned. Within this login container we have an image which is floated left and a right margin of 5 pixels. Still within the login container we styled the anchor tags with a hover effect. The line height declaration is to move the text centered to the icon next to it.

CSS: (style.css)

/*-----GENERAL-----*/
html, body {
	font-family:Arial, Helvetica, sans-serif;
}

h2 {
	font-size:2.0em;
	margin-bottom:20px;
}

#wrapper {
	width:960px;
	margin:0 auto;
}

/*-----UTILITY-----*/
.group:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

/*-----HEADER-----*/
#header {
	background:url(../images/headerBG.jpg) #061f41 no-repeat;
	height:242px;
	position:relative;
	margin-bottom:20px;
}

#logo {
	position:absolute;
	top:30px;
	left:20px;
}

#tagline {
	position:absolute;
	top:90px;
	left:70px;
	color:#ffffff;
	font-size:1.2em;
}

#login {
	position:absolute;
	top:20px;
	right:20px;
}

#login img {
	float:left;
	margin-right:5px;
}

#login a:link, #login a:visited {
	line-height:25px;
	color:#ffffff;
}

#login a:hover, #login a:active {
	color:#C90;
	text-decoration:none;
}

Next let’s style the meta section.
The id meta is absolutely positioned. Within that container we have image tag with a float of right and a margin-right set to 5 pixels. Then we have a paragraph tag set to float left. Text is set with a line-height of 60 pixels, font color to white, and font size to 1.0ems. Next up we have the anchor tag which has the background image of the RSS icon. It is floated left and a text indent of “-9999″ pixels to move the text off the screen, better known as image replacement technique. It also has a line height of 60 pixels, font size of 1.0ems, and the font color is set to white. In addition it has the width and height set to 44 pixels by 41 pixels respectively. Finally a margin is set.
Below the meta information we have the divider. It is set to absolute position.
Following that we have the searchbox which is absolutely positioned. The label has a text indent of “-9999px” to bump it off the page. And make sure you set “display”inline-block” to play nice with IE8. Then comes the paragraph tag with a background image set from the Photoshop slice. This is positioned relatively so that child container can be positioned absolutely. The input field that goes inside the paragraph tag is the one that needs to be positioned absolutely so you can control where the text appears on top of the background image. And finally the submit button with a background image. Please note that this searchbox is best explained here in my other tutorial. Feel free to jump there to get a quick overview on the details how and why this is done. Your stylesheet should look like this now.

CSS: (style.css)

/*-----GENERAL-----*/
html, body {
	font-family:Arial, Helvetica, sans-serif;
}

h2 {
	font-size:2.0em;
	margin-bottom:20px;
}

#wrapper {
	width:960px;
	margin:0 auto;
}

/*-----UTILITY-----*/
.group:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

/*-----HEADER-----*/
#header {
	background:url(../images/headerBG.jpg) #061f41 no-repeat;
	height:242px;
	position:relative;
	margin-bottom:20px;
}

#logo {
	position:absolute;
	top:30px;
	left:20px;
}

#tagline {
	position:absolute;
	top:90px;
	left:70px;
	color:#ffffff;
	font-size:1.2em;
}

#login {
	position:absolute;
	top:20px;
	right:20px;
}

#login img {
	float:left;
	margin-right:5px;
}

#login a:link, #login a:visited {
	line-height:25px;
	color:#ffffff;
}

#login a:hover, #login a:active {
	color:#C90;
	text-decoration:none;
}

#meta {
	position:absolute;
	top:100px;
	right:40px;
}

#meta img {
	float:left;
	margin-right:5px;
}

#meta p {
	float:left;
	line-height:60px;
	font-size:1.0em;
	color:#ffffff;
}

#meta a {
	background:url(../images/RSSIcon.png) no-repeat;
	float:left;
	text-indent:-9999px;
	line-height:60px;
	font-size:1.0em;
	color:#ffffff;
	width:44px;
	height:41px;
	margin:10px 0 0 50px;
}

#divider {
	position:absolute;
	top:160px;
	right:5px;
}

form#search {
	position:absolute;
	top:180px;
	right:90px;
}

form#search label {
	text-indent:-9999px;
	display:inline-block;
}

form#search p#searchfield {
	background:url(../images/searchBox.png) transparent top left scroll no-repeat;
	width:221px;
	height:36px;
	position:relative;
	clear:both;
	display:block;
}

form#search p#searchfield input {
	position:absolute;
	top:8px;
	left:10px;
	border:none;
	font-size:18px;
	width:200px;
	background:none;
	font-family:Georgia, "Times New Roman", Times, serif;
	color:#666;
	display:block;
}

form#search .button {
	background:url(../images/searchIcon.png) no-repeat top left;
	width:46px;
	height:36px;
	text-indent:-9999px;  /*  Move the text off the screen while still keeping accessibility */
	border:none; /* This sets the background color to none so you will not see a default white */
	cursor:pointer; /*Since we are using a background image, this will set the mouse cursor to change when hovering over so you know it is a clickable button */
	overflow:hidden; /* hides any graphic/image element if it overflows */
	display:block;
	line-height:0; /* this is really a hack for IE6 and IE7 because text-indent will not work here unless the line-height is set to zero */
	position:absolute;
	top:0;
	right:-50px;
}

Continuing on to the navigation. The nav is set to absolute position with the unordered list set to float left. This is the put the list inline next to each other. Each anchor tag has a background image and it has a hover effect.

CSS: (style.css)

/*-----GENERAL-----*/
html, body {
	font-family:Arial, Helvetica, sans-serif;
}

h2 {
	font-size:2.0em;
	margin-bottom:20px;
}

#wrapper {
	width:960px;
	margin:0 auto;
}

/*-----UTILITY-----*/
.group:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

/*-----HEADER-----*/
#header {
	background:url(../images/headerBG.jpg) #061f41 no-repeat;
	height:242px;
	position:relative;
	margin-bottom:20px;
}

#logo {
	position:absolute;
	top:30px;
	left:20px;
}

#tagline {
	position:absolute;
	top:90px;
	left:70px;
	color:#ffffff;
	font-size:1.2em;
}

#login {
	position:absolute;
	top:20px;
	right:20px;
}

#login img {
	float:left;
	margin-right:5px;
}

#login a:link, #login a:visited {
	line-height:25px;
	color:#ffffff;
}

#login a:hover, #login a:active {
	color:#C90;
	text-decoration:none;
}

#meta {
	position:absolute;
	top:100px;
	right:40px;
}

#meta img {
	float:left;
	margin-right:5px;
}

#meta p {
	float:left;
	line-height:60px;
	font-size:1.0em;
	color:#ffffff;
}

#meta a {
	background:url(../images/RSSIcon.png) no-repeat;
	float:left;
	text-indent:-9999px;
	line-height:60px;
	font-size:1.0em;
	color:#ffffff;
	width:44px;
	height:41px;
	margin:10px 0 0 50px;
}

#divider {
	position:absolute;
	top:160px;
	right:5px;
}

form#search {
	position:absolute;
	top:180px;
	right:90px;
}

form#search label {
	text-indent:-9999px;
	display:inline-block;
}

form#search p#searchfield {
	background:url(../images/searchBox.png) transparent top left scroll no-repeat;
	width:221px;
	height:36px;
	position:relative;
	clear:both;
	display:block;
}

form#search p#searchfield input {
	position:absolute;
	top:8px;
	left:10px;
	border:none;
	font-size:18px;
	width:200px;
	background:none;
	font-family:Georgia, "Times New Roman", Times, serif;
	color:#666;
	display:block;
}

form#search .button {
	background:url(../images/searchIcon.png) no-repeat top left;
	width:46px;
	height:36px;
	text-indent:-9999px;  /*  Move the text off the screen while still keeping accessibility */
	border:none; /* This sets the background color to none so you will not see a default white */
	cursor:pointer; /*Since we are using a background image, this will set the mouse cursor to change when hovering over so you know it is a clickable button */
	overflow:hidden; /* hides any graphic/image element if it overflows */
	display:block;
	line-height:0; /* this is really a hack for IE6 and IE7 because text-indent will not work here unless the line-height is set to zero */
	position:absolute;
	top:0;
	right:-50px;
}

/*-----NAVIGATION-----*/
#nav {
	position:absolute;
	top:170px;
	left:20px;
}

ul#nav li{
	float:left;
}

ul#nav li a{
	background:url(../images/navBG.png) repeat-x;
	width:138px;
	height:48px;
	float:left;
	margin-right:10px;
	text-align:center;
	line-height:50px;
	font-size:17px;
}

ul#nav li a:link, ul#nav li a:visited {
	text-decoration:none;
	color:#000000;
}

ul#nav li a:hover, ul#nav li a:active {
	text-decoration:none;
	color:#666;
}