3. About page

By Istvan Hoffer

In this lesson you will learn how to create an about page for your profile. This will include a submenu where you can choose from the different categories and modify the content of the page by clicking the navigation buttons. Imagine it like the tabs in the browser to change between the websites.

Overview

We will create a structure that is similar to the image below. It consists of two columns: the left is the submenu with the categories, and the right one with the dynamic content that changes according to the submenu.

About Page Preview

Demo

Click here to view the about page in action

First steps

This time we assume that you have an initial HTML page with the elements that you created during the previous lessons where you would like to insert this about box.

The box is basically a table with only one rows and 2 columns. As already discussed the left column will contain the seubmenu, the right one will include the dynamic data.

Let's implement a table like this in HTML. As an example make the left column 200px wide and the right one 600px wide but you can experiment with them later.

 <table>
    <tr>
        <td style="width: 200px;">
            Left column for submenu
        </td>
        <td style="width: 600px;">
            Right column for dynamic data
        </td>
    </tr>
 </table>

The submenu

Now we will implement the submenu. The basis of this structure is a list. Later we will want to identify every element so we provide every list item a unique ID and the full list gets an ID too. Later we will have a JavaScript function that will deal with the content changing in the second column. Though, you may not understand every bit of this code everything will become clear later. For now, type these lines into the first cell of our table (where we had the text "Left column for submenu" text before).

 <ul id="submenu">
    <li><a onclick="changeBox(1)"><div class="submenuElement" id="menu1">About me</div></a></li>
    <li><a onclick="changeBox(2)"><div class="submenuElement" id="menu2">Favourite things</div></a></li>
    <li><a onclick="changeBox(3)"><div class="submenuElement" id="menu3">Hobbies</div></a></li>
 </ul>

Spend a few minutes to understand this code. The list items will behave sort of like a hyperlink that's why we included them in <a> tags. Or JavaScript function will be called changeBox() and it will run whenever a list element is clicked. This bit makes this possible: onclick="changeBox()". Note that the input of this function is the same number as the number in the ID of the related list item.

The dynamic right column

In the example the right column conatains 3 <div> tags, and each of them contains the data related to the proper submenu. We provide each of them with a unique ID. Before we gave menu1 to "About me" as an ID, so the <div> that contains its information will have the ID box1. This applies to the others. For design reasons we include another <div> that has all of them in it.

Type this into the second cell of our table.

 <div id="boxes">
    <div id="box1">
        <p>Some introductory text here</p>
        <p><span class="title">Birthday:</span> 12.03.2001</p>
    </div>
    <div id="box2">
        <p><span class="title">Favourite sport:</span> Tennis</p>
    </div>
    <div id="box3">
        <p><span class="title">Collecting:</span> stamps, pens</p>
    </div>
 </div>

If you save this and open in the browser You will realise that at the moment you can see all of the boxes. In the next section we will write a JavaScript function that hides every box but the first one when you opne the page.

Box layout initialization

Since we have a unique ID for every box, we can refer to them from a JavaScript program. The initializing function will hide every box and show only the first one.

It will also indicate which box is active by putting a left border to the related submenu item, and by making it bold.

Type this between the <head> tags in your HTML code.

 <script>
 function initBoxes(){
    document.getElementById("menu1").style.borderLeft = "3px solid rgb(58, 89, 153)";
    document.getElementById("menu1").style.fontWeight = "bold";

    for(i = 2; i <= 3; i++){
        document.getElementById("box" + i).style.display = "none";
        document.getElementById("menu" + i).style.borderLeft = "3px solid transparent";
    }
 }
 </script>

We want this code to run immediately when the page is loaded.

Modify your body tag, to look like this:

<body onload="initBoxes()">

Changing content

Now we want to change the visible box whenever we click another submenu item. So we will write the changeBox() function that was mentioned before.

Add this into your <script> tag.

function changeBox(id){
    for(i = 1; i <= 3; i++){
        document.getElementById("box" + i).style.display = "none";
        document.getElementById("menu" + i).style.borderLeft = "3px solid transparent";
        document.getElementById("menu" + i).style.fontWeight = "normal";
    }

    document.getElementById("box" + id).style.display = "block";
    document.getElementById("menu" + id).style.borderLeft = "3px solid rgb(58, 89, 153)";
    document.getElementById("menu" + id).style.fontWeight = "bold";
}

The function has one input value which is the index of the desired element. First, we iterate through all the numbers from 1 to 3 (because we have 3 elements at the moment) and hide all of the boxes, making the left border of the submenu transparent, and the font weight back to normal.

In the second part of the function we make visible only the box with the correct ID, add border to the clocked submenu item and make it bold.

Styling

Now we have a functional about page but it is far from beautiful. So we finish the coding with some styling.

From now on we will work in the <style> section of the <head> tag using the learnt CSS skills.

First of all work on the submenu a bit.

As a start let's hide the bullets which are the default format of an HTML list. Insert this between the <style> tags.

ul {
    list-style-type:none
}

The next weak point of the design can be realised only if one of the columns are much higher than the other one. The contents in the cell are aligned vertically to the middle.

Spacing

We want to have every cell content on the top of the cell and the text in the to be justified. We achieve it this way:

table td {
    vertical-align: top;
    text-align: justify;
}

The next step is to make it a bit more spacious.

.submenuElement {
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}

After this there is a bigger space between the menu elements and the left border is not too close to the text.

Note that we used the submenuElement classname to format each of them at the same time.

With the submenu we have only one task left. When you move the cursor above the menu it showes the so called "text cursor". To make it a bit more realistic we would like to change it to the "pointer cursor". Type this between the <style> tags:

#submenu li {
    cursor: pointer;
}

Now we move on the the second column of the table. Here we have only one thing to style. In the code you possibly realised lots of <span class="title"> tags. They are sort of the titles of each elements inside the boxes that's why we want them to look a bit different than the actual values. Try this CSS code for them:

.title {
    font-weight: bold;
    color: rgb(58, 89, 153);
}

One more thing

At the beginning of the lesson you probably realised a part that we haven't covered so far. An image and the text "Hometown: London" next to it. As an ending we will create that part.

The structure is basically a table with two columns and one rows. The first columns contatins the image, the second one has the text in it. In the example we used and image of london that can be found here: http://i.telegraph.co.uk/multimedia/archive/02423/london_2423609k.jpg

 <table class="info_table">
    <tr>
        <td>
            <img src="http://i.telegraph.co.uk/multimedia/archive/02423/london_2423609k.jpg" width="80" height="50">
        </td>
        <td>
            <span class="title">Hometown:</span><br />London
        </td>
    </tr>
 </table>

We believe that this code doesn't need to much explanation, you must be familiar with everything that we used here. Maybe the only new information is the <br /> tag which indicates a new line, so the "Hometown:" and "London" are in different lines.

We want the text to be vertically in the middle, so we add this to our CSS code:

.info_table td {
    vertical-align: middle;
}

Experiment

In this lesson we introduced a very general example with lots of potentials in it. You can improve it in several ways.

Try adding new menu items and boxes. Be careful with the indexing, and keep in mind that you will need the change the conditions of the for loops in the JavaScript functions.

Try different styles for the content, change color, change font family, add borders. Customise it the way you like.

Try to change the "Hometown image" but be careful with the image size. You might have to change the width and height that we used in the example code.

And of course add as many information of yourself to the page as possible.

Next lesson

In the next lesson we will be creating a gallery, complete with a lightbox that allows you to enlarge the image when you click on it.