midwest web design

Creating a CSS — Layout

Analyzing our layout

From creating our Fireworks document, we arrive at the following structural requirements for our web page:

Our header will identify our website. Additionally, our left column will have an unordered list styled with CSS to simulate buttons and the right column will hold our content. Our footer will contain copyright information for our website.

Open our web page

Open index.html in your text editor and observe the following structure:

<div id="wrapper">
<div id="header">
</div>
<div id="leftcontent">
</div>
<div id="rightcontent">
</div>
<div id="footer">
</div>
</div>

Looking at our mark-up each DIV should be clear as to its purpose. However, our beginning DIV, wrapper, has a different purpose. Remember from our Fireworks layout we need a way to simulate equalizing columns. When we sliced our two columns, we used one slice named wrapper which encompassed both columns. When we write our CSS rule, we repeat this image along the y-axis and as content is added; our image will expand or contract vertically to simulate equalizing columns. This is how one image can span two distinct areas of a layout and simulate equalizing columns using CSS.

Finally, we have provided the basic structure for our web page so that we can:

Open and attaching the style sheet

A default style sheet has been provided via the project files download link. We’ll attach our style sheet via the import method. Between the opening and closing </head> tags, add the following:

</head>
<style  type="text/css" media="screen">
<!--
@import  "style.css";
-->
</style>
</head>

The rules we are about to write will only be seen by browsers version 5 or above. Now would be a good time to save your HTML file.

Styling our page background

Our web page will have a subtle repeating background image applied. In your style sheet, add the following:

body{
background-image:url(images/background.jpg);
background-color:#999999;
background-repeat:repeat;
font-family:Arial,  Helvetica, sans-serif;
font-size:101%;
margin:20px  0;
padding:0;
}

Using our body selector, we set the following property-values:

We set a page background color which matches our repeating image for visitors who have a slow Internet connection. While the image is being retrieved, the visitors are presented with the default background color. We set padding to zero because browsers apply default margins and padding to HTML elements. Setting this globally ensures all elements will not have any value unless specifically written. Save your file and preview the results.

Body rule applied

Inserting our header image

We’ll complete two orders of business here:

The reason we insert a heading one tag is to:

We’ll write a rule to hide the heading one from our web version. First, let’s write the CSS rule to show our image:

#header{
width:760px;
height:100px;
background-image:url(images/header.jpg);
}

We set the width and height property to the same value as our heading image. Additionally, we write the following CSS rule:

#header h1{
 display:none;
}

We use a descendent selector to target all heading one tags in a DIV named header. By setting display to none, we remove the element from showing and the physical space it occupies. Save your file and preview the results.

Header rule

Writing our #wrapper

In order for our two columns to expand and contract vertically, we’ll write a CSS rule for our wrapper:

#wrapper{
 width:760px;
 margin:20px  auto;
 background-image:url(images/wrapper.jpg);
 background-repeat:repeat-y;
}

The following property-values are:

We set width on our wrapper to the same width of our wrapper image. In a fixed width layout, setting left and right margins to auto will center our layout in modern browsers. By setting our image to repeat down the y-axis, as content is added or removed from either left or right columns, our columns will expand or contract accordingly. Save your file and preview the results.

Wrapper rule

Do note there is a harmonic balance between the widths used in our Fireworks layout and the CSS rules were are writing. If the images are off by even one pixel, our layout will break. If you’re not familiar with CSS to recalculate any math needed to change our layout, please leave the widths used in this article as is.

Create left and right columns

We know from our Fireworks design that our left column is 260 pixels wide and our right is 500 pixels wide. Furthermore, we know that we want to position these content areas as “columns.” When you position elements in CSS you take them out of the normal flow of the document. Therefore, we will position only these two content areas by using the float property. Add the following CSS rules to your style sheet:

#leftcontent{
 float:left;
 width:240px;
 padding:10px;    
}
#rightcontent{
 float:left;
 width:480px;
 padding:10px;
}

If our left column is 260 pixels and our right column is 500 pixels in Fireworks, then why do the widths say otherwise?

We'll continue with the box model calculation next.

top of page

Thank you for visiting Fabrizio.com - Come back again soon.