codeNothing? Web Development from a Beginner

As you can see, I've undergone a major layout transition here at codeNothing, and I've documented some of the steps I went through to get to the final product. To save some time, I'm going to skip the layout selection step(I went through 4 or 5 completely different layout's before settling on this one), and I just want show you the process of making the current layout.

*It should be noted that there are many ways to do the following, this is just the way I did it.

I knew from the start that I wanted the focus to be completely on the content area, and push everything else off to the side so that it won't interrupt the reader. Being a linux(Ubuntu) guy, I went looking for some of the GIMP tutorials and found this little nugget that showed me how to build a website, more specifically, how to use the gradient tool correctly within slices.

The first step, after planning out a general idea of how I wanted the site to look, was to mock up the background image. Now, I wanted a CSS Based layout that used images as a helper, not the other way around. So all 4 of my images are long and skinny. The first, background image, was done with GIMP, and I have gone back and recorded the process for viewing.

The image is 90% white with about 30 pixels of blending on the edges. To implement this, I added a repeat-y to the background image on the body, filled the rest of the background with a solid shade of gray, and let it build my initial layout for me. Here's the CSS:

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	background: 0;
}

body {
	background: #989898 url(../images/background.png) repeat-y;
}

The side bar is a little more trickier than the background. I wanted a secondary content holder that wouldn't take the focus away from the main content area, but still wouldn't be overlooked. I went for an 'attached' affect that gave the look needed.

The side bar is really just one image sliced up three different ways. The video provided shows the full method, but you start off by creating a small selection with two rounded corners. Add a gradient blend to the borders, and then a blend from the left side that gives the 'attached' affect. Here are the results:

For the CSS side, I wrapped the 3 sections around a container, so they would follow one right after the other, and let the container worry about positioning. Here's what the CSS looks like:

#content {
	position: absolute;
	top: 0;
	left: 15px;
	width: 765px;
	height: 100%;
}

#sidebar {
	position: absolute;
	top: 75px;
	left: 780px;
	width: 400px;
}

#sidebar .top {
	background: #989898 url(../images/sidebar-top.png) no-repeat;
	height: 15px;
}

#sidebar .bottom {
	background: #989898 url(../images/sidebar-bottom.png) no-repeat;
	height: 12px;
}

#sidebar .body {
	background: #989898 url(../images/sidebar-body.png) repeat-y;
	padding: 5px 10px;
	height: 400px;
	width: 380px;
}

The header actually came as an after thought because I was so focused on making sure the content area was predominant. It actually worked out nicely to stick it in the empty space above the side bar. I'm no logo designer, so I worked with what I know, which is a plain old <h1> tag. Add the subtext and the nav-bar, and you have a layout like:

<div id='header'>
	<h1>
		<a href='http://www.codenothing.com/'>codeNothing?</a>
		<i>Web Development from a Beginner</i>
	</h1>
	<ul>
		<li><a class='first' href='http://www.codenothing.com/about-me/corey-hart/'>About Me</a></li>
		<li><a href='http://www.codenothing.com/archives/'>Archive</a></li>
		<li><a href='http://www.codenothing.com/css-compressor/'>CSS Compressor</a></li>
		<li><a href='http://www.codenothing.com/license/'>License</a></li>
		<li><a href='http://feeds.feedburner.com/codeNothing?format=xml'>RSS</a></li>
	</ul>
</div>

Position and style the layout with the following CSS

#header {
	position: absolute;
	top: 0;
	left: 800px;
}

#header h1 {
	margin: 0;
	padding: 0;
}

#header h1 a {
	color: #FF3825;
	font-size: 32px;
	letter-spacing: -1px;
	text-decoration: none;
}

#header h1 i {
	font-size: 10pt;
	color: #f1f1f1;
}

#header ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#header ul li {
	float: left;
	margin: 0;
	padding: 0;
}

#header ul li a {
	display: block;
	padding: 2px 8px;
	text-decoration: none;
	color: white;
	font-family: Verdana;
	font-size: 8pt;
	font-weight: bold;
	border-left: 1px solid #F1F1F1;
}

#header ul li a.first {
	border-left: none;
}

And you've hacked together a very boring, but simple header. All that's left now is the dreaded footer.

I've always found the footer of a web-page to be the most difficult part about web design. With all the variations in browsers/OS's, it's hard to find solutions that work across all. Most of the time you just have to ignore the buggy look in non-popular browser's, and just make sure it works across all the major one's.

I found a site that does exactly what I needed the footer to do. Working off it's hacks I was able to get a footer div that stays at the bottom of the screen when there is little content, and below all content when there is lot's of it.

I positioned my footer div inside of the content div, and added an absolute to it with bottom 20px. What this did is make sure the div is always 20px from the bottom of the content div. Add a few <br> tags with the 'clear all' attribute, and your div will extend with the content.

<div id='content'>
	Content Area
	<br clear='all' />
	<br clear='all' />
	<div id='footer'>
		<a href='http://www.codenothing.com/license/'>© 2009</a>
		<a href='mailto:corey@codenothing.com'>Corey Hart</a>
	</div>
</div>

Add the CSS positioning and you have essentially how the footer works within this page.

* html #content {
	height: 100%;
}

#footer {
	position: absolute;
	bottom: 20px;
	width: 615px;
	text-align: center;
	font-size: 11px;
}

#footer a {
	color: #494843;
	text-decoration: none;
}

#footer a:hover {
	text-decoration: underline;
}

Again, I want to reiterate that there are many way's this could have been done better, but this is just the way that I did it. I've documented it the best I could so you can see both the tricks and mistakes that I've made and learn from it.

I've compiled the steps into a demo package you can either download, or preview, and remember, if you have any question's, don't be afraid to mail me.