Web Design 1 - HTML Lesson 12 - Vertical Menu

In the last lesson you created a table on your page that had links over in the left side.

You can copy that table code if you like and put it into the body of your lesson12.html - you are going to make some changes to it though

In this lesson you will learn:

- how to have your table be centered on the browser window
- how to change the background color of a page
- how to modify the style for your links to use images as backgrounds in a vertical menu
- how to define a style within the head section to apply to the page

To center your table in the middle of the window

In the table tag add this attribute:

margin: auto; - this will allow your table to be centered on the page

my new table tag looks like this for my practice 12:

<table style="width: 800px; margin: auto; background: #000000; border: 2px solid #003366">

Save and see how this is working for you so far.

To change the background color of a page

You just modify the body tag to include a background color

<body style="background-color: #557A4B;">

To add a style that can be applied to all links on a page

To get started we are first going to alter the links that are already in your code
- these won't look beautiful yet but they will when we add the styles later

Make these changes to the td element that holds your links:

- in the td tag - change the padding to 0px (so that the text will be at the left side close to the margin - yes, this looks odd but we will fix it later)
- for your links - put your links into an unordered list - add a margin of none and a padding of 0 - also change the list-style-type to say none as this will remove the bullet icon from showing

I also took out the text that I had above the menu for now

This is what my list looks like so far: get your changes to work before moving on
- it does not look beautiful yet but we are going to change that


Get this to work on your page before moving on

Adding Images and Styles for Links

Now we are going to add some styles for your links so that they use images as backgrounds.

So far we have only been making style changes directly in the HTML elements in the body section - this is called in-line style

This time we are going to be adding a new area to the head section (rather than the body) - this will tell the browser what we want all the links on the page to look like.
Why is this more efficient? Since we can define a link once - we don't have to keep repeating the style over and over again each time we call a link.

Go ahead and copy these two images to your images folder

Now, up in the head section we will add some code to define what our links should look like when they are simply being displayed and what we would like them to look like when a user hovers over them

This first image shows my page when it is displayed

This image shows what happens when the user hovers over the second link in the menu

And here is the code that makes the magic happen:

Notice that a new style section is included within the head section
- if you look at the code it is defining what a link should look like
- remember that a stands for anchor tag, right?
This code says that for the links there should be no underline, a background image is called, the display of block says to stack the images under each other, the text color is black, size 15px, bold, and the link should have a height of 50 and a wideth of 130, with text padding of 10px

- the second piece of code defines what should happen when a hover action occurs:
It will change the background image, and the text color will now be white

Assignment for HTML Lesson 12

  • Take the table you made in Lesson 11 and use it in Lesson 12 - modify it to use background images in a vertical menu
  • You don't need to use the colors that I did as your design might look better with something else
  • Update your index page, include a home link on this page, upload all to your x10 site