Building a Page with CSS-P
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Introduction
Figure 1 shows a diagram of the sort of simple page we are going to build. It has a top banner and two columns—a Menu column and a Content column.
)
Figure 1 The Plan: a really simple starting project.
This is the sort of page we all built when we were trying to learn HTML in the first place. A good, basic design like this will help you get to grips with the techniques.
TIP
You can find all the code examples for this exercise at http://www.dreamweaverfever.com.
Steps to Page-Building
Step 1: The Page
It may be tempting to jump right in and start doing things with CSS, but the first thing you need to set up is a basic page. Our page is going to contain three main blocks: a top banner, a menu for navigation, and our main content. We'll create each of these in a division so that they can be easily addressed as separate block elements.
Top Banner
The first item to place in the page is the top banner. We'll place this in its own division with an ID of banner.
<div id="banner"> <h1>Fluid Positions Inc</h1> </div>
Things don't get much simpler than that. The name of the imaginary online recruitment company for this site has been placed inside <h1> tags because it's the highest level of heading on the page.
Navigation Menu
Next up is the division into which we will place a series of navigational links. The important thing to note is that I haven't separated the links with line breaks, even though I want each link to live on its own line. I'll put the breaks in later in the CSS. The important thing here is to keep the structure, so I have to consider how the page will display with no style sheet attached. This also makes the page more flexible if I decide to change the layout in the future.
We'll call this one menu. Here's how the menu division looks:
<div id="menu">
<p>
<a href="/index.html">Home</a>
<a href="/about/">About us</a>
<a href="/positions/">Find a Job</a>
<a href="/contact/">Contact us</a>
</p>
</div>
I've wrapped the whole lot in a paragraph tag to give it the structure of a paragraph.
Content Area
The third and final block is the main content area. The heading within this area is a level-two heading; it's the next most important thing after the company name. I also have included a couple of paragraphs of text to pad out the design and make it easy to work with. We'll call this division just content:
<div id="content"> <h2>We can find you a better job!</h2> <p> The following text consists of a mock Latin which has been based upon the average frequency of characters and word lengths of the English language in order to reproduce a <a href="javascript:;">reasonably accurate</a> overall visual impression. Lorem ipsum dolor sit amet, consectetur adipscing elit, sed diam nonnumy eiusmod tempor incidunt ut labore et dolore magna aliquam erat volupat. </p> <p> Et harumd dereud facilis est er expedit distinct. Nam liber a tempor cum soluta nobis eligend optio comque nihil quod a impedit anim id quod maxim placeat facer <a href="javascript:;">possim omnis</a> es voluptas assumenda est, omnis dolor repellend. Temporem autem quinsud et aur office debit aut tum rerum necesit atib saepe veniet ut er repudiand sint et molestia non este recusand. </p> </div>
Attaching a Style Sheet
The only thing left to do before we're ready to write some CSS is to create and attach a new blank style sheet to the page. You can create your style sheets in a lot of different ways. Dreamweaver has its own editor—although it is something of a token gesture. Many developers code their CSS by hand, often in a dedicated CSS editor such as Bradbury Software's TopStyle. Nick Bradbury, creator of TopStyle, was the developer behind HomeSite before (and while) it was bought by Allaire and then later Macromedia. TopStyle is generally considered the best CSS editor for the Windows platform and it integrates with Dreamweaver extremely well.
For Macintosh users, Westciv Webware have a number of extremely capable CSS tools, as well as a wealth of useful CSS information on their web site.
To get the style sheet going, you can start by defining a few quick rules. The first makes sure the <body> tag doesn't have any default margins or padding set. The following two are just a bit of text formatting for the two levels of heading used.
body{
margin : 0px;
padding : 0px;
}
h1{
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 36px;
white-space : nowrap;
padding : 10px 0px 0px 10px;
margin : 0px;
}
h2{
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 24px;
font-weight : normal;
}
Step 2: Positioning the Banner
The first thing to do in this nice clean style sheet is to position the top banner. As you have seen, the banner is just a division with a top-level heading inside of it. I want the banner to stretch right across the window, and be about 70 pixels high. I am going to give it a gray background and back that up with white as my foreground color to ensure anything within it can be clearly read.
Because this is a named element being positioned, the CSS selector should start with a hash, or pound, (#) sign.
#banner{
top : 0px;
left : 0px;
width : 100%;
height : 70px;
color : white;
background-color : gray;
z-index : 100;
}
As you can see, I have also given the banner a Z-index (stacking order) of 100 to make sure it is always on the top of the pile. Previewing your page at this point might come as a bit of a surprise, because all sorts of items will have started overlapping. Don't worry; it's going to look a bit strange until all the elements are properly positioned.
Step 3: Positioning the Menu
Up next is the menu. This is going to sit on the left side of the window, just under the banner. It will be 150 pixels wide.
#menu{
position : absolute;
top : 70px;
left : 0px;
width : 150px;
color : black;
background-color : transparent;
padding-left : 30px;
padding-top : 74px;
z-index: 10;
}
Note that I have used absolute positioning to place the menu. That is because it shouldn't be reliant on any other elements in the page. I always want it to start 70 pixels from the top, and tight against the left edge. The padding is to move the content of the menu away from the top and the left.
Previewing the page again at this point, note that everything still looks a mess. Most notable, however, is that the navigational links are not wrapping onto their own lines. Also the links could really do with a little formatting to make them look smarter. To do this, we need to redefine the <a> tag. However, we want this rule to affect links only within the menu and not the rest of the page. The easiest way to accomplish this is to create a selector that says "any link within the item with an ID of menu." This is how we do it:
#menu a{
font-family: verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 11px;
color : maroon;
background-color : transparent;
text-decoration : none;
display : block;
}
The last two properties set are the most interesting. Text-decoration refers to the browser's method for visually indicating a link—obviously an underline by default. There are other options—overline is one—but I have opted to have no text-decoration because it should be obvious that these are links.
The final property is pure magic. Display : block; tells the browser to treat the element as if it were a block element. As you are aware, block-level elements (such as tables and forms) always break onto a new line when displayed, so the effect this has is to push each link onto its own line, giving the arrangement we were after.
All that's left to do on the menu is to make the links react on hover, and to add a little line spacing.
#menu a:hover{
color : navy;
background-color : transparent;
text-decoration : underline;
}
#menu p{
line-height : 140%;
}
Step 4: Positioning the Content Area
The last item to deal with is the content area. It is essential that we manage to keep the content area flexible so that the text gently reflows with the browser window. I usually find it best not to position the main content division itself, but instead mold its dimensions using margins and otherwise let it sit in its natural position in the page. This approach tends to avoid strange problems with setting the width of an object to a certain dimension and running the risk of forcing unnecessary scrollbars.
I also have added a left border to the content area, to provide a small dividing line between the menu and the content.
#content{
margin-top : 0px;
margin-left : 180px;
margin-right : 30px;
padding-top : 10px;
padding-left : 20px;
border-left : dashed 1px silver;
z-index: 50;
}
Most of the padding and margin settings are just to place the content away from the edges. The important one to note is the left margin. This is set to 180 pixels to allow space for the menu (which is 150 pixels) to sit. The menu is actually set inside the margin of the main content, and both items have their left extreme on the far left of the browser window. This approach proves very useful to circumvent the otherwise tricky 100% minus 150-pixel problems with making the content area flexible.
All that's left to do is add some formatting to the text itself, and to give the links within the content some styling of their own.
#content p{
line-height : 140%;
font-family : verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 12px;
}
#content a{
text-decoration : underline;
color : maroon;
background-color : transparent;
}
#content a:hover{
color : maroon;
background-color: #eee;
text-decoration : underline overline;
}
A quick preview in your browser should now reveal a basic but tidy page with a flexible layout.
Step 5: Browser Testing
A crucial part of working with CSS-P—just like any other aspect of web development—is to check your work in as many browsers as possible.
To be sure that your page will work correctly for all those viewing our site, you must open the page in different browsers and perform a number of tests. In the case of the page we have been working on, I think that these are reasonable tests:
Is the content displayed?
Do the columns take up the correct width without overlapping?
When resizing the window, does the page adjust correctly?
Do scrollbars appear in the correct places?
Do any scrollbars work as expected?
Are any other abnormalities apparent?
With the page in question, these six simple tests should reveal most abnormalities. After all, this is quite a simple page and we shouldn't really encounter too many problems.