Where I last left the blog template I had co-opted the original header-wrapper element to display my own custom banner JPEG. Since a single div element is no longer sufficient for my new goal, I'll need to remove the background from tag and put it elsewhere; the header-wrapper div will return to being a wrapper which contains both the banner and the navbar. Here I have commented out the reference to the background and also bumped the height up to 200px to make room for the 50px high navigation bar.
#header-wrapper {
width:750px;
height:200px;
margin:0 auto 10px;
/* border:1px solid $bordercolor; */
/* background-image: url(http://gallery.liquidairphoto.com/photos/122915663-O.jpg); */
}Next we define a div class for the banner.
/* banner class */
div.la_banner
{
background-image:url(http://gallery.liquidairphoto.com/photos/122915663-O.jpg);
background-repeat:no-repeat;
border: 0px;
height: 150px;
width: 750px;
margin: 0 auto;
display: block;
}
I dropped this class and all of the navigation bar CSS in the template just ahead of the header-wrapper tag. Note that la_banner is a class (using a .) rather than an id (using a #). I use a class because id are required to be unique and I have several different version of the banner and navbar for different parts of the site. Technically, for the blog CSS that distinction is not important, but this keeps my CSS consistent with the rest of my code.
Next comes the navbar CSS. There are four basic pieces to this. The la_navbar div class and then a definition of a table style and a table element style and an anchor style within the la_navbar context. Of course I want the navbar to link somewhere so I want to define the style for the a tags. Most of this is boilerplate so that all the elements pack tight against each other with no space between. I have added a default background to the td element which is just a simple black to gray gradient used for inactive positions in the bar. The table elements are 125px wide so 6 items will fit across the 750px of the full column.
/* navbar class */
div.la_navbar
{
border: 0px;
height: 50px;
width: 750px;
margin: 0 auto;
display: block;
}
div.la_navbar table
{
width: 750px;
height: 50px;
padding: 0px;
border-width: 0px;
border-style: none;
margin: 0px;
}
div.la_navbar td
{
width: 125px;
height: 50px;
padding: 0px;
border-width: 0px;
border-style: none;
margin: 0px;
background-image: url(http://gallery.liquidairphoto.com/photos/123621150-O.jpg);
background-repeat: no-repeat;
}
div.la_navbar a
{
padding: 0px;
border-width: 0px;
border-style: none;
margin: 0px;
text-decoration: none;
text-align: center;
display: block;
width: 125px;
height: 50px;
}
Now we provide bunch of special case td backgrounds for specific buttons.
div.la_navbar .atHome {background-image: url(http://gallery.liquidairphoto.com/photos/123621770-O.jpg); }
div.la_navbar .goHome {background-image: url(http://gallery.liquidairphoto.com/photos/123621165-O.jpg); }
div.la_navbar .atGallery {background-image: url(http://gallery.liquidairphoto.com/photos/123621764-O.jpg); }
div.la_navbar .goGallery {background-image: url(http://gallery.liquidairphoto.com/photos/123621158-O.jpg); }
div.la_navbar .atSearch {background-image: url(http://gallery.liquidairphoto.com/photos/123621780-O.jpg); }
div.la_navbar .goSearch {background-image: url(http://gallery.liquidairphoto.com/photos/123621176-O.jpg); }
div.la_navbar .atInfo {background-image: url(http://gallery.liquidairphoto.com/photos/123621775-O.jpg); }
div.la_navbar .goInfo {background-image: url(http://gallery.liquidairphoto.com/photos/123621171-O.jpg); }
div.la_navbar .atBlog {background-image: url(http://gallery.liquidairphoto.com/photos/125345752-O.jpg); }
div.la_navbar .goBlog {background-image: url(http://gallery.liquidairphoto.com/photos/125345754-O.jpg); }
div.la_navbar .contact {background-image: url(http://gallery.liquidairphoto.com/photos/129014901-O.jpg); }
These are all the images I have. We will only actually use a few of them here. The "go" buttons are blue; the "at" buttons are red so that the user can always look at the navbar to see where they are. Since we are doing the blog navbar here, we'll use the "atBlog"; all the other buttons will use the "go" flavor.
Finally, now that all the CSS is ready to go, it is time to add a little HTML. This is what the HTML for the header looked like before the edits.
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Liquid Air Photography (Header)' type='Header'/>
</b:section>
</div>
We have already disabled the section in the CSS so we can leave it there and just add the new HTML for the banner and navbar.
<div id='header-wrapper'>
<div class="la_banner" id="blog_banner"></div>
<div class="la_navbar" id="blog_navbar">
<table cellpadding="0" cellspacing="0" ID="Table1">
<tr>
<td class="goHome"><a href="http://www.liquidairphoto.com" target="_top"></a></td>
<td class="goGallery"><a href="http://gallery.liquidairphoto.com" target="_top"></a></td>
<td></td>
<td></td>
<td class="atBlog"><a href="http://blog.liquidairphoto.com" target="_top"></a></td>
<td class="goSearch"><a href="http://gallery.liquidairphoto.com/photo_search" target="_top"></a></td>
</tr>
</table>
</div>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Liquid Air Photography (Header)' type='Header'/>
</b:section>
</div>
It looks a little messy, but all we have done here is added a div tag for the banner followed by a div tag for navbar. Inside the navbar div there is a table with 6 td elements. The class of the td element calls out a specific background image. The td elements of the navbar which have links include an <a> to specify the destination.
Note that this particular implementation of a navbar does not use any image tags despite the fact that all the buttons and the banner are JPEGs. I tried to adhere as much as possible to keeping the format in the CSS and the content in the HTML. Done this way, it is possible to completely change the look of the banner and navbar without touching the HTML. For a Blogger template that doesn't mean much because it all goes in one file, but on my main web site that will come in handy as I write many web pages which all share the same banner and navbar.
No comments:
Post a Comment