This week we started our first ‘Client/Server Web Systems Development’ lecture where the topic was about HTML and CSS.
Our first task was to go to ‘http://csszengarden.com/’ and change the style of the page without touching the content of the web page (the HTML file). This task was done to show how powerful Cascading Style Sheets are when <div> tags are being used in the HTML file.
The <div> tag is used to divide the HTML document into sections, so that different styles can be used on each section. Before creating a different style, I analysed both the HTML and CSS code using this powerful tool named ‘Firebug’ which is used for Firefox browsers ‘http://getfirebug.com/’.
I changed the position of the menu from left to right and also changed how the lists are displayed in the menu. Also, some text which was found on the right hand side was moved at the top after the logo.
Below is the code that I have created for the menu section:
#linkList {
position: absolute;
top: 200px;
width: 130px;
left: -151px;
}
#lselect li, #larchives li, #lresources li {
border-bottom: 1px solid #FFF;
padding: 7px 10px 7px 5px;
}
I also made use of ‘-moz-border-radius’ and ‘border-radius’ property to produce rounded corners at the edges of the container section. ‘moz-border-radius’ is used for Mozilla Firefox browser while ‘border-radius’ is used for both Google Chrome and Internet Explorer (version 9). In Internet Explorer version 8 or older, edges will look pointed. For more information, you can visit 'http://www.the-art-of-web.com/css/border-radius/'.
I’m also attaching a screenshot of the style that I created, so that one can visualise what have been discussed.
