Valerie Coskrey's Classroom Tools and Ideas

On this page

• Challenges
• Tips I have Gathered
• Resources
• Sample Problem
• CSS Stylesheet
• Forum
• Update
• Books

Articles in this Series

Download this FREE Sample Template Design Set

Get presentation templates like the sample below with unique artwork from our in-house artists. Some contain clip art.

The Challanges of Designing the Page--
A Newbie's Journal on Writing a Web Page

This essay was written over 2 years time. Can you tell the difference in the page now and the earlier attempts described in the first paragraphs below?

(2008) I write this page because I learned a few things this week about CSS layouts.  No, I do not claim to be an expert.  In fact, I am teaching myself.  I have to date completed The Webmaster Page in XHTML and CSS--and read a few books.  I am writing this page to share with you some of the resources that I have found helpful in my page design and some of the challenges that I faced.  Naturally, solving the challenges means that I now have tips to share, too.

Tips for Designing the Page Layout
                    (OK,  I was learning.  Read the update!)

• Tip 1: Think carefully about which div's will be absolute and which will be relative.
• Tip 2: Think carefully about which div's will contain the other div's and the z-index for each one. Update!
• Tip 3: Use comments to label the closing div tag at the end of each major layout section.
• Tip 4: Learn from others by studying the code of posted CSS pages and their stylesheets.
• Tip 5: Design a page with its css in the head;  then copy the css code to a css file for linking to other pages.
• Tip 6: Save the xhtml page as .htm to use the transitional dtd.  (I do not know why, but any page I used as .xhtml did not work. Update!)
• Tip 7: Use Notebook or similar program to display a  .txt copy of the code for a working page.

As a Newbie, I quickly learned that my webpage design software (I use a 2004 version of Dreamweaver.  I can't wait to get the new version. Alas, I have grandkids to spend money on, so...)  treated absolute divs as layers with z-indexes that allowed me to place contents of one div into and over another.  This meant that content could be lined-up with common backgrounds or borders--or not, depending.  However, getting the height of a div to accurately contain a correctly positioned embedded div is still a challenge to me.  Placing a div below another div is still a challenge to me.  I know it can easily be done, but alas, I am still trying to figure out how.  I suspect that a judicious combination of absolute and relative divs will solve the problem. 

The confused paragraphs below will show you just how confused one can get.  However, after studying these books combined with practice and the study of some judicious examples, I will quickly--I hope--overcome the coding challenges.

Judicious Examples

• CodePunk offers css code tutorials -- really good
• css Zen Garden demos of css formatting -- beautiful pages
About: Webpage Design Brief articles and lessons -- links
• How? Check out the source code of the pages you like.

Read this passage of confused thought with a grain of salt!

Problem:  I did figure out that attaching a div to the bottom of the containing div with a bottom value of 2 px {margin-bottom:2px;} will set the embedded div at the bottom of the containing div.  However, I had problems with making the containing div tall enough.  Part of this challenge is that my affiliate ads are not seen on the page during the design--and I seldom do the math needed to place everything.  I tried placing a break tag and a paragraph tag pair before the bottom div, but somehow I couldn't get it to work. I have a bit to learn about absolute div and relative div.  Doing the placement in Dreamweaver is not the problem, per se.  Designing the CSS div boxes in a separate style sheet and getting that div box to work on my page with content is the issue. 

"Solution: Set the height to auto {height:auto;} and set the width to a measured value {width:130px;}.  I am still testing this step.  In the css for this series of pages, the left margin and the width of the div called content is set.  The right margin is automatically set based on the width of the page.  The height becomes auto by default.  Div.content is set as position: absolute. Update!

The css for this page was originally copied from the head of the webmasterpage.htm file and pasted into a .css page.  That way I could base the css coding on the page as I wrote it.  Later attempts at css were started with a css file that was linked to the xhtml page.   Both ways work, but using a program like Dreamweaver 2004 seems to work best with the code in the head region.  Otherwise, the wysiwyg feature doesn't work as well.

An absolute div has a height that becomes part of the style sheet as the content is added to a page-- at least in my version of Dreamweaver, the two pages are so interactive that one page affects the other constantly.  This will affect the other pages that are attached to the same style sheet. This is another reason to set the height to auto.

Now we return to the more reasonable discussion...

(2009) Adjusting a css style sheet to fit the requirements of the content of one page under design will affect other pages already completed but attached to the same style sheet.  This is bad if you have no flexibility built into the div boxes.  It is great for updating the design of many pages with just a few changes in the style page.  Applying tips 1 and 2 helps. Tip 5 results in this solution:   Get a page the way you want it.  Attach other pages to the css style sheet.  Leave the first html or xhtml page with its css in the head alone.  This way when you change the css code in the css file, the first page with its own css code won't be affected with the changes until you are ready to make changes to the page itself. Changing the css file will change all pages attached to that file.  Use css code in the head of an xhtml or html file to test its appearance before using it with other pages.  Update!

A pattern I have seen among the pages of others that I have studied is that they use short css pages for special sections.  Then they link the xhtml page to several css stylesheets.  Another technique is to use many div classes or id's.  Remember: css styles allows a designer to make web pages that are similar in appearance.  Remember also that changing a file in the head of a page will affect the css stylesheet if the name and class are the same. 

Part of the problem I had with the Webmaster Page was that the center column division would not extend its background color to the end of the content written for the column. The second problem was placing the links at the bottom of the center column--and keeping it there.  Update!

What I discovered was a set of extra </div> tags.  Silly me.  They are still in the code.  But I have a solution to apply to the next pages I write.  From now on I will label each major layout </div> tag with a comment something like this:
<div id="centercolumn"></div><!-- end centercolumn" -->
This way, when I enter the content into the div box, the label for the end tag will automatically follow the end tag so that I can easily find it when I need to fix it next time.  Looking for the extra or non-existent end tag wasted lots of time when I was working on The Webmaster Page--and I still posted it with, I believe, 2 extra end tags.  I got tired of removing the wrong tag, though, and gave up.

I encourage you, too, to jump on the CSS bandwagon.  Fellow Newbies, I offer these tips and accept your consolations for the fact that my pages are not yet perfect. My references all encourage us to study the source codes of the pages we like and to use small snippets of code that work for others in our own designs.

If your screen is large enough, set the .txt page alongside the web development page.  For me that means narrow the Dreamweaver page.  In the space left, narrow the Notebook page and position it next to the Dreamweaver page.  Now I can study the .txt page of code and cut and paste code that works to my Dreamweaver file to my heart's content.  Using a Notebook file also means I can write notes to myself all over the copied file.  This is the easiest way to start a new page with the same header, etc.,--  unless you use snippets, that is.  (I have used this technique to find errors in code, too!  To think, I actually once asked my husband why he liked Notebook and .txt files so much!!!  Once, I had no idea.)

If you have never studied the source code of a webpage, this is how to access it. In Firefox, at the toolbar, go to View>>Source Code.  In Explorer, go to Pages>>Source Code. In the head section will be a link to a stylesheet.  This link is relative to the page you are viewing, so if the complete link is not present, try adding it to the home page link of the file you are viewing. Let me give you an example.
 <link rel="stylesheet" href="3col_rightNavmodwebmasters.css" type="text/css" />
the stylesheet link for this page, becomes
 <link rel="stylesheet" href="http://www.vforteachers.com/3col_rightNavmodwebmasters.css" ><type="text/css" />
for anyone that wants to read it.

Select all, copy and paste the code into a .txt file in Notebook or similar program.  Most people ask that if you use their code in your page then you reference the page and author in your web page.  Linkbacks to the Web page are a good idea as a citation.  Css style sheets are technically copyrighted, as are Web pages.  Most people do not mind if you use small snippets of code, though. 

This page now is attached to the the stylesheet  style_webmasterpages.css,which began as the css style in the head of The Webmaster Page. 

Do not judge it too harshly. I wrote it by changing parts of a Dreamweaver css stylesheet that matches a Dreamweaver template. I rewrote sections to fit The Webmaster Page, using best practices syntax for parts, and my own syntax for other parts. A third set of parts is the original stylesheet with tags that I did not use and did not bother to change. My advice: Study the Judicious Examples, not mine. Notice that I added the .code class when I wrote this page.

An Invitation to Fellow CSS Newbies

Join me in my ruminations by adding your comments to the forum. Simply write your comments in a post; watch for other comments. This forum is moderated, but I generally accept the posts (or not, usual rules of decency and legality) within 24 hours. Feel free to add a link to your site(s) or blog(s)! Just remember to comment about a topic covered in this site. Spam is not accepted.

Update!

I thought about rewriting the page to reflect what I have learned since I wrote it, but then I thought that to keep the dialog real, I would write an update. This is coming soon.  Until then, take a look at a lesson page demo and the better css stylesheet it reflects.  A skeleton page of those in the gbox series is kept and used as a template to save coding time.  I simply make changes to title and page contents, save as a new filename and go.  (And if think this simple procedure cannot be screwed up, think again.  Let me tell you how...or not and save me some embarassment.  Yep, I'm still learning by mistakes!)

Update, July 2010 --
Still Learning Better Ways to Code a Webpage with CSS

Something messed up my page! So I redid the masthead of the Webmaster Pages series. In doing so, I tweaked the rest of the page, too.

Alas, now I need to update the CSS code to reflect the new CSS version. I am still using transitional XHTML because not all of my affiliate links are in XHTML. The tweaks never end! Add to the coding adjustments, there are the changes in the affiliate links, an ongoing process.

Anyway, this page reflects the skeleton page (pattern page, template) that is currently being used for the Webmaster Pages series. Note that this new template uses more than one stylesheet and a division called bottom.

I have learned that different templates share certain sets of CSS code in common. These codes have been placed into a CSS file and used as another CSS stylesheet for the pages. These stylesheets are useful for boxes of special text or divisions of special text type. Of course, sometimes I just copy and paste a set of CSS rules into another template's stylesheet. Since I suspect I will confuse some important id and class labels, I try to use unique names whenever I start a new stylesheet. For instance, the stylesheet for boxes would have a bx added to most id's and many classes, ie, midtextbx, ulrtbx (derived from list, right column, box). I think I thought I might need to locate the CSS rule sometime in the future, and coding the label might make the search easier. I also feared that I would duplicate a label, change its rule on one stylesheet, but not the other, and be thoroughly screwed!

Another thing I added to CSS stylesheets is a set of comments that tell to what a set of rules apply. If the rules work for a specific kind of div or page section, I will add a code snippet within the comment. I have pasted the snippet into new pages, saving time in writing the code. A prime example of this practice is the disclosure box. The text is saved into an .htm file; the code for making the box and the iframe with a URL to the disclosure text file is copied within a comment tag following the CSS rules for the disclosure box within the CSS stylesheet. When I get ready to add the code to a page, I can copy the section from a template/pattern page or I can copy the code from the stylesheet. Depends on which file is already open, or what mood I am in.

Of course, using Dreamweaver makes such a practice redundant since I could just use the snippets panel. But what if I want to code using a text file on another computer? What if only some of the pages are available to me because I am downloading pages to work from after a spyware or virus destroyed my local files? What if I am using someone else's computer? Anyway, it seemed like a good idea at the time!

Now why the div id="bottom"? Well, this is a page section added to many pages. To copy and paste the section, I found it easier to select a unique div. Now I code pages with special divs for the purpose of future coding of other pages in addition to coding the current page. The templates I use are full of such divs. Before posting a new page, it helps to remove some of these codes of convenience, but the power of CSS and XHTML is that leaving the code in place works, too.

(Aug. 6, 2010) Big problem: the right column was messed up. It appeared below the level of the text. To correct this problem, I moved the code to precede the div.pgbox since it was floated right. Now the tops of the 3 columns appear in a line across the page.

next page...update