HTML menu hyperlinks

Hyperlink problem

One of the biggest problem with this website was getting the menu hyperlinks to all work. If you hover your cursor over the menu, you will notice a background red-brown color. For a long time there would be a range of menu hyperlinks that simply would not work. And then, if I eventually would get the hyperlinks to work, there would be a blank space to the right of the menu. This web page explains how I solved those two HTML hyperlink problems.

Make HTML Columns

To make these three columns without using tables, I placed three smaller divisions within a division that was wide enough to hold all three 200 pixel divisions. Below is the CSS code for the larger division.

Notice the margin-left: 260px; snippet of code below. That is the important part that I spent a large amount of time trying to discover. Until I discovered it, part of this column was on top of the menu hyperlinks. This prevented some of the hyperlinks from working.

div#innercontent5 {
position: relative;
display: inline;
top: 0px;
width: 650px;
margin-left: 260px;
}

The Smaller HTML Divisions

The opening tags to begin each of the three columns was represented in the source code with <div class = "inner2">. The external style sheet (CSS) used the code below.

div.inner2{
padding-left: 40px;
position: relative;
width: 200px;
margin-top: 10px;
float: left;
}

I wanted lots of space between the three columns. To do this each columns began with this paragraph tag: <p class = "two">. The corresponding CSS code is represented below.

p.two {
text-align: left;
width: 200px;
}

Create a Website Like This One

You can learn to create a website like this one. You can take the Website Development course from Heritage Christian Online Schools. They have a world class distance learning program.

After taking this course, each student will be able to take a blank computer screen and create an attractive website. Each student will create their own personal website during the course. Among other things, these websites will include:

Menus that allow visitors to easily navigate throughout the site.
Forms that ask the visitors a variety of questions. The students will learn enough PHP (a computer language) so that the answers will be emailed to them.
Numerous graphics edited in Gimp, an open source (free) image manipulation program.
A search engine resident on the web pages allowing visitors to search keywords on the website as well as other websites.
A statistics page that tells you who is using the site and how they got there.
Professional coding that makes the website look good in both Firefox and Internet Explorer.
A style sheet so that students can change fonts, colors, layout, etc. on all web pages at once by changing only ONE web page.
Some animation such as the type you would find within a moving display ad.
A photo gallery

To find a description of the other courses at Heritage Christian Online School, go to http://onlineschool.ca/courses/course.php. On the drop-down box scroll down to the appropriate grade. (The Website Development course can be found in the Grade 11 section.) Click View Couses. Scroll down to the bottom and you will see a description of the Website Development 11 course.

The course is free for any student enrolled in ANY high school in the province of British Columbia. For people of any age at anywhere else in the world, it costs $420 CAD.

To begin an enrollment process, go to http://bc.onlineschool.ca/faq.php, scroll to the bottom and click on contact us.

Testimonial

Thank you so much; the crystal plaque was gorgeous. It was a gift for my boyfriend's mother and she loves it. She has the lighted base turned on every night. A job well done by Uniquely Etched and a job well done by me! haha. I'll definitely be purchasing other gift items in the future!! Rachel M., Bethlehem, PA

Keychain with Light