We shall build a web page using HTML and CSS of the following layout-
Our web page shall have the demonstration of tactical use of <div></div> and <ul> </ul> tags. There will be a main division, which shall not occupy the entire page only a definite width and shall contain all the elements inside it. Under this division two sub-divisions main menu and main content. Under main content, again there are two sub-divisions- content and side bar (a list).
Therefore, our skeleton HTML code of the page will look like this-
Now, add an image to the cover photo, some menu items in the main menu (un-ordered list), header and paragraph elements to content and again some items to the side bar (another un-ordered list).
After adding these items to the skeleton HTML code web page is somehow displayable-
The page looks very much raw and not very attractive. It needs a fair touch of CSS now. Start with the main. Default margin and padding are set to zero. All texts in body shall be of uniform font-family and size. We attach this CSS externally in a separate file and link it with the HTML file by following code inside the <head></head> tag-
<link href=”style.css” rel=”stylsheet” type=”text/css”/>
Our work with the main division in CSS file as follows-
After this slight CSS work there is no much change in our page-
Now we come to work with the main menu section. We have to float the main menu items horizontally. Here the links in main menu items are empty. They are only to demonstrate the colorful functions of the list.
After applying these new CSS codes some colorful looks come to the page-
The “hover” in line 15 of the CSS code changes the background color of the link when mouse pointer goes over it. We are done with half of our page. Now we need to place the content division and sidebar division in their respective places according to our layout. Following CSS code helps to place the main content in its position.
The overflow: hidden attribute prevents other sections to move over and mix up with the respective section. After these lines are added to the previous code, the page looks as follows-
It seems things are almost okay but the heading and texts are too close. Let’s do some style work with the headings.
The changes in the page are-
Now, we need to style the side bar section. It is already in its position at the right. Only slight work is to do in CSS.
The page looks like as follows now-
We are almost done with our page only to know how we add a copyright dialogue at the bottom. Add the following code to the HTML file just before the closing tag of the main division.
Do some styling with the footer copyright section.
Finally, our page looks like:
See adding more attributes, colors etc. Firebug add-on for firefox browser will help to inspect the page elements and determine correct color, size etc. You can add custom colors choosing colors by Pixie color picker. Download it from: http://pixie.software.informer.com/2.0/