How to Build a Website Part 9

In the 29th of our series of informative articles on the honest way to earn an income online, Part 9 looks at how to build your own website from the ground up. In this instalment I'll be creating a menu bar to make visual navigation simpler.

Here we are at number 9 in this mini series. Only it's getting a bit big to call a mini-series - maybe I'll rename it a maxi-series! Or maybe just a series. Whatever!

Let's look at what we've done so far. We've built a cool looking homepage with some nice empty(ish) boxes, a style sheet and a nice graphic header make it look real pretty. We got a site map to list the links to all the other pages (we'll be creating). So now it's time to put one of those empty boxes to good use and create a menu, or navigation bar.

In keeping with the modular setup of this website, I won't be adding any extra HTML code to the homepage. Rather, I'll create a new file to hold the code we need, and use a php "include" statement to integrate it into our homepage, just like I did with the header and footer. I'll call the new tutorial file menu09.php and here is what the raw HTML code looks like:

Surely that can't be all it is? Well, I'm afraid it's that simple! All the formatting is done in the stylesheet, so we don't have to mess around with tons of HTML to make it look the way we want it to, which is a series of coloured boxes, one on top of the other, each with its own link to a page in our website.

Here I'm using the <ul> and </ul> tags and the <li> and </liv> tags to create an unordered list, just the same as I did for the sitemap. Each list element has an anchor </ul> tag with a link to the relevant page. As you can see, there are only the two pages at the moment - the Home page and the Site Map. It is a very simple file at the moment, but as we add more pages to the website, that list will grow. The beauty of keeping it in its own separate file is when ever I decide to add another page to the website at some future date, I only have to update this one file which will display on all the web pages.

I'll add this statement to the HTML in the homepage, so now it will look like this:

<?php
include ('head09.php');
?>

<body>

<div id="page_wrapper">

<div id="page_header"></div>

<div id="content_wrapper">

<div id="box_top_left">

<center>
<h1>Natural and Organic Food</h1>
</center>

<p>
Welcome to Organic Sanity, the Natural and Organic Food website created by a tutorial set out in a series of articles on <a href="https://thehonestway.com">The Honest Way</a>.
<br />
<br />
This version of the homepage corrseponds to article number 7 in the series entitled Let's Build a Website - Part 7.
<br />
<br />
Now you can see for yourself what a very basic style sheet can do for a web page when you include enclosures for a page wrapper, a page header, page footer and now a text box!
</p>

</div> 

<div id="box_top_right">

<div id="menu_bar">

<?php
include ('menu09.php');
?>

</div> 

</div> 

<div id="box_bottom_left">

<p>
Some other stuff will go in here!
<br />
<br />
...
<br />
<br />
...
<br />
<br />
<br />
<br />
...
<br />
<br />
<br />
<br />
...
<br />
<br />
<br />
<br />
These breaks are to make the box longer!
</p>

</div> 

<div id="box_bottom_right">

<p>
This might be a good place to put some graphics?
<br />
<br />
...
<br />
<br />
...
<br />
<br />
<br />
<br />
...
<br />
<br />
<br />
<br />
...
<br />
<br />
<br />
<br />
These breaks are to make this box longer too!
</p>

</div> 

</div> 

<?php
include ('foot09.php');
?>

All we've done here is add first, a new division within the top_right_box to call the manu_bar id from the CSS, then the php statement to include our separate menu.php file and finally to close the menu_ar division. These few lines of HTML fit into into the division for the top right hand box, which is where we want our menu bar to live.

That in itself isn't enough. It needs some formatting to make it look presentable on our homepage, especially as it now looks so stunning with its fancy header graphic!

And where do we do all of our formatting? As I mentioned above - the style sheet!

Here is the new code (highlighted) for the menu bar:

/* CSS Document

http://www.organicsanity.com/style.css

Copyright: Terry Didcott 2007 */

body {
background: #ccffcc;
margin-top:10px;
margin-bottom:10px;
}

#page_wrapper {
margin-left: auto;
margin-right: auto;
width: 760px;
text-align: left;
background: #ffffff;
border: 1px solid #006633;
}

#page_header {
height: 120px;
background: #ffffcc url('http://www.organicsanity.com/img/head.jpg') top right no-repeat;
color: #006600;
clear: both;
}

#content_wrapper {
margin-top: 10px;
margin-bottom: 0px;
margin-left: 10px;
margin-right: 10px;
clear: both;
}

#menu_bar {
margin-top: 0;
height:160px;
background: #FFFFFF;
clear: both;
}

#menu_bar ul {
margin-top: 0;
padding-top:5px;
padding-bottom:5px;
padding-left:10px;
padding-right: 10px;
float: right;
font-family: verdana, arial, sans-serif;
font-size:12px;
font-weight: bold;
}

#menu_bar ul li { display: table; }

#menu_bar ul li a {
margin-top: 0;
padding-top:5px;
padding-bottom:5px;
padding-left:10px;
padding-right:10px;
background: #993300;
color: #FFFF99;
float: right;
width: 140px;
border-bottom: 2px solid #fff;
}

#menu_bar ul li a:hover {
background: #669900;
color: #CCFFCC;
}

#box_top_left {
float: left;
width: 480px;
height: 200px;
background-color: #ffffff;
border: 5px solid #FFDABB;
font-family: verdana, arial, sans-serif;
font-size: 12px;
padding: 10px;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;
}

#box_top_right {
float: right;
width: 180px;
height: 200px;
background-color: #ffffff;
border: 5px solid #FFDABB;
font-family: verdana, arial, sans-serif;
font-size: 12px;
padding: 10px;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;
}

#box_bottom_left {
float: left;
width: 280px;
background-color: #ffffff;
border: 5px solid #FFDABB;
font-family: verdana, arial, sans-serif;
font-size: 12px;
padding: 10px;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;
}

#box_bottom_right {
float: right;
width: 380px;
background-color: #ffffff;
border: 5px solid #FFDABB;
font-family: verdana, arial, sans-serif;
font-size: 12px;
padding: 10px;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;
}

#page_footer {
height: 50px;
background-color: #FFFFCC;
clear: both;
}

#page_footer p {
padding-top:18px;
text-align: center;
font-family: verdana, arial, sans-serif;
font-size: 11px;
color: #336633;
letter-spacing:1px;
}

Well, I didn't say all CSS is easy, so I'd better describe all this new code.

Actually, it's not as bad as it looks. The first paragraph is where we define the #menu_bar itself, which is the id we used in the HTML above to describe the menu_bar division. We tell it to put a zero margin at the top of it, tell it that it should have a height of 160 pixels and that its background should be white (#FFFFFF). Clear: both; again! What does that mean? I'll tell you later...

The next paragraph sets out how the unordered list (the one we created in the menu.php file) will look. A zero top margin, with some padding all around (that's just an empty space so the text doesn't run straight into anything that it's beside). We tell it to float over to the right of the division box, tell it what font to use, what size and weight that font will have. Ok with that?

Quick note on that font-family statement, if you were wondering. We put in more than one font name for a good reason. What your browser will do is go to the first font name in the list. If your computer has that font in its own list of fonts, then that is the one that will be displayed. If you don't have that font, then the browser looks at the second one. If not, then the third etc. The font called Verdana is quite common so there's a good chance your PC will contain that, but if not, Arial is even more common. If you have no fonts defined on your PC, then we always add sans-serif to the end of the list, so your computer will display that (all PC's have that as the default font when no other is installed).

So now you know!

Ok, the next paragraph tells your browser how to display the menu bar list of items. Here I have defined a table display. That doesn't mean I've created a dreaded table, it just means it will display the list one on top of the other. The more common display definition is inline, which displays the menu bar in a line just like you see here on this page of The Honest Way!

The next paragraph defines how the anchor text will look for each little box in the menu bar column. It is similar to the definition of the menu_bar ul paragraph but where that defined the actual boxes, this one defines the text inside those boxes. So we again define a zero top margin, the same padding as above, a background colour of reddish-brown (#993300) a font colour of light yellow (#FFFF99), float it all right, give it a width of 140 pixels (so it fits inside our boxes of 160 pixels as we defined above) and give it a bottom border of 2 pixels which is solid and coloured white. This appears as a white line beneath the text. We don't define the font characteristics again, as we've already done them above.

Lastly, we define the "menu_bar ul li a:hover" which sounds like a foreign language but all it means is what the menu bar item will look like when you place your mouse over it (or more correctly, hover your mouse over it). This makes the background colour change to green (#669900) and the text colour change to pale blue (#CCFFCC). You could get even more creative here by making the text go bold, or change fonts or even change the font size to make it bigger or smaller, but I have chosen to keep it relatively simple.

That doesn't mean you have to - of course you should experiment with different settings to give your own site even more uniqueness!

I'm sure you'll want to take a look at this new creation. Here it is - in full working condition too!

http://www.organicsanity.com/tutorial/09.php

At this point in time, there are only two pages that we can link to in our menu - the homepage and the site map. In the next article, we can expand on that by adding a new page to the website - the articles page!

Author: Terry Didcott

Word Count: 1204

Date Submitted: 1st August 2007

[TOP]