Tutorials @ WebDesignPro

Begining HTML and CSS | Part 5

For the final part of this tutorial we are going to put everything we have learnt together into one snazzy template page for you to use across your site

A well designed website is the product of good planning so before we start let's decide what we want our pages to look like.

- The main font face for the pages will be courier
- We want a bg image that is repeated across the y axis
- The main content area will be a fixed width of 750px and will sit in the middle of the page
- At the top of the main content area will be the header div which will be 150px high and will contain our logo and links to other pages on the site
- Our logo will link back to the home page
- Below the header div we want 2 divs side by side
- The left of these 2 divs will be 500px wide, will have a white bg and blue verdana text
- The right will be 250px wide with a grey bg
- Links in the header will be green with a grey bg and will change to black with a white bg on mouseover
- Header links will be 120% in size and bold
- Other links on the page will have a different style

We'll start by creating the HTML markup

Now let's start adding some styles. We start with the body tag

Now the container div

The header div

The left div

And the right div

Now attach the stylesheet to the document and view it in a browser

Something's not quite right yet, we wanted the right element to float to the right of the left one.

There are actually 2 things preventing this from working correctly. Firstly we need to to modify the left and right classes adding the appropriate float rule. And secondly we must remove the default padding and margin values that are added as a default by some browsers as they will interfere with our width values and prevent a 250px width div sitting side by side a 500px div in a 750px space.

Nearly there!

Now that we have removed the padding from all divs the content in the left, right and header tags is sitting too close to the edge of the element. To overcome this we create a new class called .pad and apply a padding value (between 5-15px should suffice). We then wrap a 'tag' class div around the content of these 3 divs as follows:

As an exercise I want you to complete the final steps yourself. Namely create the styles for the links in the header section, create the styles for all other links, apply these styles to the html doc and make the logo img into a link to the home page.

Once you are done you can compare your code with that below

Well done! Your now ready to start searching our database for more advanced tutorials

Comments:

Featured Script