Web Sites made Easy

I will walk you through the recreation of this website using css. If you go to the website you will notice that the website is constructed with tables and images. Taking off image showing on your browser will make their website virtually blank. We will construct the entire website minus the flash and required images with css. Please note this is for learning purposes only. This website belongs to White Oak Studio Landscape Architecture. To see this website you can click here. If you want to have my code to trouble shoot what you did wrong you can right click here and choose save link as. You will need WinRar to unzip it.

First we must start with creating a webpage document. To do this we need the essential code. We need to declare the html, style, head, title, and body. If you do not know how to do this you can look at the code I have provided below.

If you copy and paste this code you will have to replace the quotations or else it will not work. This is the begining code to every webpage. The style tags can be replaced later with a css style sheet, but for coding purposes it is easier to edit one document rather then two.

Next we have to make our background black. To do this we have to add some css to our style tag. You reference the body by just typing body. You do not need a ‘#’ or ‘.’. You may see an example of the code below. It goes inbetween the style tags. We also delcare our font type and how we want to align the text in this area.

If done correctly your browser should now look like the screen shot on the right.

Next we need to create a div that contains our entire website. This will be the white background that the WOS-LA website has. To do this we need to create a div in the body of our website. Once we have this div created we need to style it in our css to give it a white background. If you do not know how to create a div you can reference the code below. I will also supply the CSS code for you. The height of this div is 891px and the width is 756px.

The CSS code would look like this:

Yours should look similiar to the one on the right.

Now, if you looked at their website you will notice their content is centered in the browser and pushed down. To center ours we need to add a margin into our main CSS style. When doing margins remember that it styles TOP, RIGHT, LEFT, BOTTOM. This means that if you type in margin: 0 auto 0 auto; then the browser will not move the page vertically, but will center the main div horizontally. If you have the same top and bottom tags and the same right and left tags, then you would only have to type margin: 0 auto;.

Therefore the CSS you need to add to your #main to center the page is:

Your website should now look like the one on the left.

Now we will create the flash box in the website. From here on we will assign random colors to our divs just so we can tell them apart. We will create this div just how we created our main div. The difference is this will be place inbetween the opening and closing of your content div. The flash width is 144px and the height is 143px. Example code is below as well as an image on the right to compare your new div.

The CSS would look like:

Pages: 1 2

Filed under: HTML Tutorials by Zach