Replicating the webpage of Homestayatmelaka.com (Part 1)

Untitled

1)      The webpage of Homestayatmelaka.com is made up from 3 major sections (as in diagram1):

  • a)      The notification area, which is fixed at the top of the page.
  • b)      The sidebar, which is fixed at the left side of the page.
  • c)       The content area, which is not fixed, where users can scroll up or down for this section.

Untitled

Diagram 1

1)      As we start, we create a div (name it main), as a base container for all the divs that we will put in it later. For now, I’ll make the div to appear as gray color.

2)      We set it’s position as absolute so we can specify this whole div to be no gap from the top-left corner.

3)      Z-index is set to -2 so this layer is pushed deeper from the surface.

4)       The CSS for main div:

Untitled

5)      Now we are ready to put the 3 major sections I mentioned earlier into the container.

6)      First we create a div named notification in main. Since it appeared to be stayed at the top all the time, we have to specify its position as fixed.

7)      The CSS for notification div:

Untitled

8)      Next, in the same way with the notification div, we create another div named sidebar in main.

9)      Since it is positioned under the notification bar, we need to set the sidebar to be 40px away from the top.

10)   The CSS for sidebar div:

Untitled

11)   Now, create the content div in main div. Since it can be scrolled up and down, we know we have to position it relatively.

12)   We noticed that the content area slide under the notification bar when we scroll down, so we set this area one level deeper than the notification bar by specifying z-index = -1.

13)   The CSS for content div:

Untitled

Untitled

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s