Web Design 1 - HTML Lesson 13 - Horizontal Menu

In the last lesson you created a vertical menu that used images as backgrounds

This time we will create a menu that goes across the page

Create a new logo (again stay with something like 800px wide by 100px high)

Create a new table - use the layout above for reference

Use your new logo in row 1

In row 2 go ahead and add at least 4 links -this time however you do not want to put these into <p> tags as we want them to stretch out across the top - just type them in for now and we will work on the design later.

Put some text into the boxes in row 3 and your footer.

Notice I have not yet set up any styles in the head section.

So far, this page will treat the links just as they would look by default - bright blue to start with, and probably a pink/purple color once you have clicked on it once, and no spacing between them.

This is a screen shot of my page so far:

Here is the code for the second row with the links only:


Now we are going to add some style changs to make the menu look a lot better

Remember the style section that we added to the head section in the vertical menu?
Now we will do the same thing but the styles we use will be different

Here is my code for the links:
what is this doing? It tells the links to have no underline, be white in color, font size of 15px, bold, a particular font family list, and some padding only to the left and the right
when we hover the top and bottom will have a white dashed line, while the text color will change to a purple shade

Here is the menu at the start

Here is the menu with a hover over the History Channel link:

One more thing:

I need to make a few changes to the code in the body where the links are called - this way they align in the center of the row and the row height is a little bigger so they are easier to see - I also took the padding of 0px out as we are defining the padding up in the style section now.


Assignment for HTML Lesson 13

  • Make a new page and create a table for yourself that uses the above layout. You don't need to use my exact links and colors - but do get a horizontal menu to work on a page that has a few rows with more than one cell - the end result should look attractive and show that you understand how the style section works.