Coding Like This

Can anybody find me a tutorial on coding like this:

http://good-tutorials.com/

I want to be able to code a navigation bar / content box like that. I will donate to whoever helps me out!

 

Honestly it's basic HTML.

Just a few HTML scripts is all.

 

You want it to be integrated with a forum?
Then use this:
Link

Or use a CMS like mambo.
Link

 

I snooped around the GT Source. The nav is a list basically, here is it inside their source.

Code:

<div class="section-header"><h3>Photoshop</h3>Tutorials</div>
<div class="section-menu">

	<ul class="menu-list">
  [*][url="/tutorials/photoshop/basics"]Basics[/url]
  [*][url="/tutorials/photoshop/effects"]Effects[/url]
  [*][url="/tutorials/photoshop/text-effects"]Text Effects[/url]
  [*][url="/tutorials/photoshop/photo-effects"]Photo Effects[/url]
  [*][url="/tutorials/photoshop/photo-retouch"]Photo Retouch[/url]

  [*][url="/tutorials/photoshop/web-layouts"]Web Layouts[/url]
  [*][url="/tutorials/photoshop/color"]Color[/url]
  [*][url="/tutorials/photoshop/buttons"]Buttons[/url]
  [*][url="/tutorials/photoshop/textures"]Textures[/url]
  [*][url="/tutorials/photoshop/drawing"]Drawing[/url]
  [*][url="/tutorials/photoshop/animation"]Animation[/url]

  [*][url="/tutorials/photoshop/designing"]Designing[/url]
  [*][url="/tutorials/photoshop/web-graphics"]Web Graphics[/url]
  [*][url="/tutorials/photoshop/photography"]Photography[/url]
  [*][url="/tutorials/photoshop/scripting"]Scripting[/url]
	[/list]
</div>

I think this is the important CSS Stuff that makes it work:

Code:

body {
	margin: 0;
	font-family: "Lucida Grande", Verdana, "Trebuchet MS", sans-serif;
	font-size: small;
	background-color: #fff;
	text-align: center; /* IE5/Win workaround for content center (thanks bluerobot.com) */
}
.section-menu a {
	color: #00753B;
	padding: 0 4px;
	border-left: 1.4em solid #eee;
}
	.section-menu a:hover {
  border-left: 1.4em solid #00753B;
  text-decoration: underline;	
	}

h3 {
	margin-left: 1em;
}
img {border: 0;}
.clear {clear: both;}
.menu-list {width: 100%;}
.menu-list li {
	display: block;
	font-size: 1em;
	list-style-type: none;
	margin-bottom: 4px;
}

Yea, I got it to work, you can see it here: here.

Just don't copy that, but if you check the source, you can probably figure out how it works and create something similar.