CSS - styling my websites header

HTML & CSS
1

Hi everyone, I was working on my header and I was just curious to know if I did this right? Screenshot is below. Thanks for any info.

CSS code:


body { background: #e4e3df url(images/background.png) repeat; }

.lines { border-top: 1px solid #999; border-bottom: 1px solid #999; margin-top: -10px; }

/* Header */
div#header {
	background: url(images/header_background.png) repeat;
	width: 100%;
	padding: 65px 0px;
	position: relative;
	text-align: center;
}
div#header .topbg {
	background: url(images/header_full_bar.png) repeat-x;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 18px;
}
div#header .bottombg {
	background: url(images/header_bottom.png) repeat-x;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 10px;
}
div#header #banner {
	width: 750px;
	margin: 0 auto;
	position: relative;
	text-indent: -9999px;
}
div#header #banner .lhs {
	position: absolute;
	top: 13px;
	left: 0px;
	width: 270px;
	height: 1px;
}
div#header #banner .rhs {
	position: absolute;
	top: 13px;
	right: 0px;
	width: 270px;
	height: 1px;
}
div#header #banner p.portfolio {
	background: url(images/heading_portfolio.png) top center no-repeat;
}
div#header #banner h1 {
	background: url(images/name.jpg) center no-repeat;
	width: 639px;
	height: 56px;
	margin: 0 auto;
	padding: 5px;
}
div#header #banner .lhstwo {
	position: absolute;
	left: 0px;
	bottom: 3px;
	width: 290px;
	height: 1px;
}
div#header #banner .rhstwo {
	position: absolute;
	right: 0px;
	bottom: 3px;
	width: 290px;
	height: 1px;
}
div#header #banner p.designer {
	background: url(images/design.png) bottom center no-repeat;
}

and the HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Portfolio</title>
	<link rel="stylesheet" type="text/css" href="reset.css" />
	<link rel="stylesheet" type="text/css" href="main.css" />
</head>

<body>

	<div id="header">
		<div class="topbg"></div>

		<div id="banner">
			<div class="lhs lines"></div>
				<p class="portfolio">The online portfolio of</p>
			<div class="rhs lines"></div>
			
			<h1>Jeremy Lisecki</h1>
			
			<div class="lhstwo lines"></div>
				<p class="designer">web design and developer</p>
			<div class="rhstwo lines"></div>
		</div>
		
		<div class="bottombg"></div>
	</div>
	
</body>
</html>
2

Use a strict doctype.
DON’T go so heavy on the selectors and if you are going to use IDs remember they are supposed to be unique to each doc so div#header div#banner{} is OVERKILL. #banner will do fine.
You might get cleaner code by employing pseudo elements and wrapper DIVs.
Consider what you MEAN. Is “designer /developer” really just a paragraph in the page or is it more meaningful and worthy of a semantically heavier tag?
You may be better served by using semantic names to your classes, but that’s just coders preference

Here is a quick rework for you to study ( as I may not be pixel perfect as I didn’t have your bg graphics slices, but those can be easily tweaked)

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Portfolio</title>
	<link rel="stylesheet" type="text/css" href="reset.css" />
	<style type="text/css">
	
body { background: #e4e3df url(images/background.png) repeat; }

.lines { border-top: 1px solid #999; border-bottom: 1px solid #999; margin-top: -10px; }

/* Header */
#header { 
	background: url(images/header_background.png) repeat;
	width: 100%;
	padding: 65px 0px;
	position: relative;
	text-align: center;
}
#header:before, #header:after { content:'';	position: absolute;	left: 0; right:0;} 
#header:before {
	background: url(images/header_full_bar.png) repeat-x;
	top: 0;
	height: 18px;
}
#header:after {
	background: url(images/header_bottom.png) repeat-x;
	bottom: 0;
	height: 10px;
}
#banner {
	width: 750px;
	margin: 0 auto;
	position: relative;
}
 #banner .portfolio {
	background: url(images/heading_portfolio.png) top center no-repeat;
}
#header h1,  #header h2{ margin:0; padding:0; font-size:100%; font-weight:normal; }
#header  h1 {
	background: url(images/name.jpg) center no-repeat;
	width: 639px;
	height: 56px;
	margin: 0 auto;
	padding: 5px;
}

#banner .designer:before,#banner .designer:after{	top: 13px;	width: 270px;}
#banner .portfolio:before,#banner .portfolio:after{		bottom: 3px;	width: 290px;}
#banner .designer:before,#banner .portfolio:before {left: 0px;}
#banner .designer:after,#banner .portfolio:after  {right: 0px;}
#banner .designer {background: url(images/design.png) bottom center no-repeat;}
#banner .portfolio:before, #banner .portfolio:after, #banner .designer:before, #banner .designer:after{
	content:'';  	
	position: absolute;	
	height: 1px;
	border-top: 1px solid #999; border-bottom: 1px solid #999; margin-top: -10px; 
}

	</style>
</head>

<body>

	<div id="header">
		<div id="banner">
 				<p class="portfolio">The online portfolio of</p>
			    <h1>Jeremy Lisecki</h1>
 				<h2 class="designer">web design and developer</h2>
 		</div>
	</div>
	
</body>
</html>

hope that helps

3

Thanks for your help, I was gonna try to use :after and :before but I wasn’t sure on the browser support. Is it covered on every browser?

4

i dont recommend using after: & before: because they have poor browser support with Internet explorer

5

That’s not true. All of the versions commonly in use have good support for :before and :after: http://caniuse.com/css-gencontent

6

if your target audience is using ie 7,8 they wont see that content

7

Your screenshot confirms that :before is supported in IE8, but I’m pretty sure :after is supported too—at least to some degree. Designing a layout for IE7 and under nowadays is like designing a highway for horse and cart.

8

Your screenshot confirms that :before is supported in IE8, but I’m pretty sure :after is supported too
yes, it is.

Designing a layout for IE7 and under nowadays is like designing a highway for horse and cart.
yes, it is

however, if you want :before and after support in IE… you can add to your add this ( best i when loaded through a conditional comment) :

	 #header, #banner{zoom:expression(
		runtimeStyle.zoom=1,
		insertAdjacentHTML('beforeEnd','<span class="after"></span>')
	);	

  zoom:expression(
		runtimeStyle.zoom=1,
		insertAdjacentHTML('afterBegin','<span class="before"></span>')
	);}

you and now do

#header:before, #header:after, #header .before, #header .after {...}

and so forth, to include old IE