Once I created the Horizontal Navigation Bar for my roller site everything was working great. That is everything was working great until I added a new category. When my new category was added the category tabs on the page were being pushed down, since they were running into my horizontal navigation bar, which I positioned underneath the "GMJ Designs" text on the right hand side of the page. Since my page layout was starting to look ugly I decided to move the horizontal navigation bar to the top right hand side of the page above the menu buttons. I felt that this unused space on the page would be a great place to incorporate this navigation bar.

I had originally entered the navigation bar by just calling the template as follows:

<div id="logo">
	<h1><a href="$url.home">$model.weblog.name</a></h1>
	#includeTemplate($model.weblog "_navbar_horizontal")
</div>

This code just put the navigation bar under the GMJ Designs Header in the Headder bar.

Well first Roller templates are usually created using a ton of css attributes. As a programmer, not a CSS god, I went off to do some research on the best way to solve this issue. When I say research I mean reading some css tags and tutorials, and the using trial and error to figure out what happens to the page with each individual change that I make. I found a great tutorial explaining the different ways to position CSS div elements in the page here|http://www.barelyfitz.com/screencast/html-training/css/positioning/. I used the number 4 tab to preform my code. Looking at there example you can see how the div boxes align relative to the parent box.

After reading the article I found that I needed to put a position:relative code in my header css style like follows. This would allow me to use position:absolute styles to align elements relative to the positions inside of the header style.

/* Header */

#header {
        position: relative;
        width: 700px;
        height: 140px;
        margin: 0 auto;
}

This is the parent div tag that has a logo and menu children div tags embedded inside of this parent tag. Now that the parent tag was set to relative I started making changes to the individual div tag styles to see what effect the changes would have on there position in the parent tag. I did not have to do anything to the logo tag to get his to work, but need to add a position: absolute; tag to the #menu css style so that the menu would always show up in the correct location.

/* Menu */

#menu {
        position: absolute;
        top: 0;
        right: 0;
}

Now to get the horizontal menu to display at the top of the page, but still line up with the right hand side of the header tag I created a new div tag and gave it the id of hNavBar with the associated CSS styles.

/* Horizontal Navigation Bar */
#hNavBar {
   color: #997867;
   text-decoration: none;
   position: relative;
   z-index: 1;
   float: right;
   padding: 14px;
}

The position type of relative allows the navigation bar to be displayed at the top of the header div tag and float: right lets it float to the right hand side of the page but retained in the constraints of the header div tag which is the parent.

Now my template to display all of this looks as follows.

<div id="header">
	<div id="logo">
		<h1><a href="$url.home">$model.weblog.name</a></h1>
		<!-- h2><a href="$url.home">$model.weblog.description</a></h2 -->
	</div>
        <div id="hNavBar">
           #includeTemplate($model.weblog "_navbar_horizontal")
        </div>
	<div id="menu">
		<ul>
	#if(!$model.weblogCategory.path)
		<li class="active">
	#else
		<li>
	#end
		<a href="$url.home" title="Home">Home</a></li>
	#foreach ($cat in $model.weblog.getWeblogCategory("nil").weblogCategories)
		#if($cat.path == $model.weblogCategory.path)
		<li class="active">
		#else
		<li>
		#end
		<a href="$url.category($cat.path)" title="$cat.description">$cat.name</a></li>
	#end
		</ul>
	</div>
</div>

Well I will say that after preforming all of these style changes to my page I feel like I have a better understanding of how to use css styles to preform page layouts. They are really powerful but I swear they can be confusing at times. I am just so glad to have gotten it all to work out correctly. I don't consider myself a front end designer and have to give props to individuals that have mastered designing templates and html design. What they do is really a art form in itself.

I don't know if this is the best way to do this for my page, but It works. If there is a more clean cut approach please tell me about it. Also I don't think I could have done this without looking at other peoples code using two of my favorite firefox tools, JSView and The Web Developers Toolbar.