Help with Framesets Desperately Needed! (Please)

[moniquedbabin79]

Hello,

I have been using x10hosting to host a website that I've created for a college class in web design. My class culminates in a final project that requires me to put the components of my site (which previously worked well in div containers) into frames.

Here is what I had to work with *before* trying to place the different parts into frames (the sum total of 8 weeks of work on this project):

http://mdbabin.x10hosting.com/week8/index.htm

As I began to make changes so that the different divisions would display in frames, I created three new pages to start: head.htm, links.htm, and home.htm.

I believe that I've also made the necessary changes to my stylesheet, but I also think that the problem might lie somewhere in my stylesheet. Honestly, I don't know!

If you click on all the separate pages above (head, links, and home), you can see that they display just fine on their own, but when I try to bring them together in framesets, my page (mbabin.htm) comes up blank.

Here's a link to the end result, so you can view my source code to see if you spot anything wrong: http://mdbabin.x10hosting.com/final/mbabin.htm

I've tried to create framesets a couple of different ways. Here's one:

<frameset rows="15%,*">

<frame src="head.htm" name=logo scrolling=no>

<frameset cols="20%,*">
<frame src="links.htm" name=links>
<frame src="home.html" name=home>
</frameset>

</frameset>

Here's another way that I tried it:

<frameset rows="85,*"
<frame src="head.htm" />

<frameset cols="140,*">
<frame src="links.htm" />
<frame src="home.htm" />
</frameset>

</frameset>

I also tried the above method with 85px and 140px just in case that was the problem. I've been working on this for a couple of hours and can't figure it out.

Any suggestions? Thanks so much for any advice that you might have to offer!

Best regards,
M. Babin

[essellar]

Well, the main content isn't showing up because your frame src is "main.html" but your page is actually "main.htm". Everything else is showing up, but you've forgotten to allow for the margins when sizing your frames. That really only applies to the top frame, where you're using an image as an H1 element. You've either got to increase the height of the top frame to allow for the margins on the BODY and H1 or remember to set the BODY and H1 margins to 0 in your stylesheet.

And I really have to say that I'm disappointed that any college/course would be teaching framesets at this point. They've been deprecated for a very long time now, and for a reason. (They're almost guaranteed to get you in trouble if you have a public site that does commerce, since they fail all of the accessibility guidelines; they mess with browser history, keeping the back button from doing what it ought to do; and they make bookmarking nearly impossible.)

[moniquedbabin79]

essellar,

Thank you so much for your speedy and helpful reply. The part of your reply that interests me the most is the last paragraph. Since I'm auditing this course, I have a little more freedom to stray from the text. I don't want to spend too much time learning deprecated methods.

At one point, we had a lesson on how to use tables to layout our pages, but I thought I remembered the text saying that tables fell out of favor when frames became more popular. I assumed that this meant tables were not the preferred method of layout.

Is there another method besides tables or frames? If so, I would love to learn. Can you point me to a tutorial or some resources? Mainly, I want to learn how to take my current site (http://mdbabin.x10hosting.com/week8/index.htm) and make it more, well, current. I would like to learn how to center my content and perhaps have a different background that floats behind it. That type of thing. I hope I'm describing that well.

Should I stick with div containers? Any pointers that you have to offer would be most appreciated!

Thank you!

[essellar]

DIVs (and CSS, of course) are the way to go. I'm on my way out the door for a meeting right now, but I'll post back a bit later with some ideas. You're not far from where you want to be right now, and the adjustments in CSS to give your page currency are really pretty small. You're right about tables: they're meant to contain tables of data, but there was a time when they were the only option for layout (the dreaded '90s -- I still shudder). CSS and semantic markup (DIVs represent actual logical divisions of content) can do everything tables did and more. Framesets served their purpose, and we dismiss them with thanks and a large pension. Be back later...

[moniquedbabin79]

I can't thank you enough for your help. As I'm just getting started, it's easy to get overwhelmed with all of the options for layout, and a textbook that contains deprecated stuff doesn't help (especially considering what they charge for it!).

I'll definitely be back to see what you have to add. I'm so glad we had this little chat before I spent a ton of time on frames.

Web design (obviously) isn't really at the fore of what I do, but as an online instructor who wants to break into instructional design and professional writing, it seems that some web design know-how will serve me well.

There's nothing worse than looking outdated, so some tips on where to learn more about current trends in layout will be much appreciated.

Thanks again!

[essellar]

I've had a chance to give your page a good going-over, and I've noticed a few things that need changing. I know you'll take this as educational rather than as a personal slight; you are obviously trying to do things right. Your current page works and works well. The layout makes sense, and it's immediately usable. But there are a few problems that need attention.

The first thing is that you have a number of elements on your page that have the same ID ("foot"). ID values must be unique on a page. There's a way around the problem that won't complicate your CSS, so it's not a biggie.

You are using <br /> tags to create line breaks. There's only one legitimate place to use <br /> tags these days, and that's at the ends of lines of poetry. For everything else, there's either a better way to tag, or a way to use CSS to make additional tags unnecessary.

I notice that you have inline style attributes. Those should be pulled out into your stylesheet, if for no other reason than that it will make updating the look and feel of your site easier.

Finally, the <hr /> tag is largely unnecessary. It appears between logical divisions on your page, so using the border properties of those divisions (and wrapping the footer in its own <div>) will take the place of the horizontal rule. Save <hr /> for the same places you'd use it in the manuscript for a formal composition: to mark a transition in time or space within a chapter.

I've also modified the page to follow a few conventions, like marking up link lists as <ul>s. I think that about does it for the nitpicking. Here is your page as it would appear with "conventional" semantic markup:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0045)http://mdbabin.x10hosting.com/week8/index.htm -->
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <meta name="author" content="Monique Babin" />
      <meta name="description" content="Professional writing, editing, publishing, training, development,
         and instructional design services." />
      <meta name="keywords" content="professional, technical, write, writer, writing, edit, editor, editing,
         document, documents, newsletter, newsletters, brochure, brochures, press release, press releases,
         internet, web, online, instructional, design, training, development" />
<!--
     CS125 - Homework 6
     M. Babin Professional Writing & Instructional Design
     Author:  Monique Babin
     Date:  07/30/2010
-->
      <title>M. Babin Writing &amp; Design</title>
      <link href="./M. Babin Writing & Design_files/mbabin_print.css" rel="stylesheet" type="text/css" media="print, projection">
      <link href="./M. Babin Writing & Design_files/mbabin.css" rel="stylesheet" type="text/css">
   </head>
   <body>
      <div id="container">
         <div id="header">
            <h1 id="head"><img src="images/logo.jpg" alt="M. Babin Writing &amp; Design" />&nbsp; M. Babin Writing &amp; Design</h1>
         </div><!-- end header -->
         <div id="navigation">
            <ul id="link_list">
               <li class="firstMenu">
                  <a href="index.htm" title="Home">Home</a>
               </li>
               <li class="menu">
                  <a href="qualifications.htm" title="Resume">Resume</a>
               </li>
               <li class="menu">
                  <a href="portfolio.htm" title="Portfolio">Portfolio</a>
               </li>
               <li class="menu">
                  <a href="prices.htm" title="Pricing">Pricing</a>
               </li>
               <li class="menu">
                  <a href="jobs.htm" title="Job Requests">Job Requests</a>
               </li>
            </ul><!-- end link_list -->
         </div><!-- end navigation -->
         <div id="inner">
            <h2>Who Am I?</h2>
            <p id="firstp"><img id="monique_pic" src="images/monique_pic.jpg" alt="Monique Babin" />
               Welcome to <strong>M. Babin Professional Writing
               and Instructional Design</strong>.  My name is Monique Babin.  As a
               community college instructor, with an MA in English Literature (including
               a focus on writing composition), a BA in English with a minor in
               professional writing, and more than four years of experience in teaching
               writing and communications in both face-to-face and online environments, I
               am prepared to help you with a variety of your writing, publishing, and
               training and development needs.</p>
            <p>Please explore my site further for more information regarding my
               experience and qualifications, including my resume and samples of my work.</p>
            <h2>My Services</h2>
            <h3>Professional Writing &amp; Publications</h3>
            <ul id="pencil">
               <li>
                  <h4>White Papers &amp; Professional Reports</h4>
                  <p>With significant experience in writing lengthy papers in graduate
                     school, in organizing information and preparing presentations to
                     present at regional and national conferences, and in teaching
                     business communications and report writing, I am prepared to write
                     virtually any type of professional report to suit your needs or the
                     needs of your company.  My finished manuscripts are professional and
                     publication-ready.</p>
               </li>
               <li>
                  <h4>Newsletters, Pamphlets, &amp; Other Professional Publications</h4>
                  <p>I have written articles for, edited, designed, and published a
                     quarterly newsletter for the Part-Time Faculty Association at
                     Clackamas Community College for the past two-and-a-half years.  I
                     have also published a catalog for a local chemical company and have
                     created a number of brochures, including a how-to brochure to help
                     patrons access Multnomah County Library's online library catalog.
                     As my resume indicates, I am prepared to design and publish in a
                     number of formats and mediums, using a variety of software
                     applications.</p>
               </li>
               <li>
                  <h4>Online Publications</h4>
                  <p>As an online college instructor, I write, design, and publish in a
                     variety of online mediums, including learning management systems,
                     basic web pages, blogs, and wikis.</p>
               </li>
            </ul>
            <h3>Editing &amp; Proofreading</h3>
            <p>My background in writing composition and tutoring students (at all
               levels, from freshmen to doctoral candidates), in a variety of subjects,
               has prepared me well to proofread and edit publications from a diverse
               range of topics, including sciences, mathematics, arts and humanities,
               and more.  My most recent editing job involved helping a mechanical
               engineering professor to prepare papers for a professional conference</p>
            <h3>Training &amp; Development</h3>
            <p>As a college writing and business communications instructor, I have
               designed and delivered courses in a number of delivery modes, including
               face-to-face, completely online, and blended or hybrid formats.  With a
               firm foundation in the most current instructional and learning theories and
               practices, and with strong communication and organizational skills, coupled
               with the experience of multi-modal publication and instruction, I am
               uniquely qualified to handle a number of training and development needs.  I
               can develop curriculum, plan and write lessons, deliver material in
               multiple formats, develop and administer assessment, and more.</p>
         </div><!-- end inner -->
         <div id="footer">
            <ul id="page_info" class="footer_list">
               <li>&copy; 2010 M. Babin Writing &amp; Design</li>
               <li><a href="mailto:mdbabin@mdbabin.x10hosting.com?Subject=M.%20Babin%20Professional%20Writing%20%26%20Design%20Message&Body=This%20is%20a%20message%20generated%20by%20the%20M.%20Babin%20Professional%20Writing%20%26%20Instructional%20Design%20site."
                      title="mdbabin at mdbabin dot x10hosting dot com"
                      target="_blank">
                      <img id="noBorder"
                           src="images/email_address.png"
                           alt="mdbabin at mdbabin dot x10hosting dot com"/>
                   </a>
               </li>
               <li><a href="#top" title="Return to Top">Return to Top</a></li>
            </ul><!-- end page_info -->
            <ul id="footer_nav" class="footer_list">
               <li><a href="index.htm" title="Home">Home</a></li>
               <li><a href="qualifications.htm" title="Resume">Resume</a></li>
               <li><a href="portfolio.htm" title="Portfolio">Portfolio</a></li>
               <li><a href="prices.htm" title="Pricing">Pricing</a></li>
               <li><a href="jobs.htm" title="Job Requests">Job Requests</a></li>
            </ul><!-- end footer_nav -->
         </div><!-- end footer -->
      </div><!-- end container -->
   </body>
</html>

The next posting will deal with the CSS changes required. (I hit the character limit with this one.)

[essellar]

Okay. In the previous posting, I changed all of your link lists into <ul>s and <li>s. That's semantically correct, since you are giving a list of links, but you probably don't want to display the link lists as bullet lists. (Nobody does, really.) You can override the normal display by using this:

#link_list, #page_info, #footer_nav {
   list-style: none;
   margin: 0;
   padding: 0;
   text-indent: 0;
   }

There's a lot there, but that's because different browsers handle the list indent differently -- some by the left margin, some by the left padding, and some by text-indent. Setting all of them to zero (and setting the list-style to "none") effectively turns the <ul> into just another <div> containing a bunch of other <div>s that used to be <li>s. You want to be careful, though, and target only the <ul>s you want to modify, otherwise you'll kill any bullet lists you have in your content. In the new version of your page, you'd apply that style to the link_list, page_info and footer_nav lists.

Changing the behaviour of the <ul> means that you can treat the <li> items like any other block-level element. All of the styling you had previously applied to the paragraphs in your links <div> can now be applied to the <li>s in the navigation div. In other words, your menu will look and act exactly the same way as it did before the markup change. But now the markup makes more sense.

(I'm going to chop these up into smaller postings -- I had to edit about fifteen hundred characters out of the last one, so things will be coming in dribs and drabs. I want to explain things as I go along. It's one thing to see what somebody is doing; it's quite another to understand why they're doing it that way.)

---------- Post added at 08:15 AM ---------- Previous post was at 06:39 AM ----------

Hello again, Monique. (My name is Stan, by the way. That's the "ess" in "essellar". The "ell" is Lewis, my middle name, and the "ar" is Rogers. I'm Canadian, and some other guy named Stan Rogers is a legendary Canadian folk singer and cultural icon, so when I use "Stan Rogers" as a forum user name, people tend to assume that it's a "handle". essellar has also been a company name I've been carrying around with me for years.)

Back to business. In the last episode, I showed you how to un-list a list. In order to make the left-hand navigation look and feel the same as it did previously, you'd use this as the CSS:

#navigation {
   float: left;
   width: 10em;
   margin-left: 1.25em;
   font-weight: bold;
   text-align: center
   }

#link_list li a {
   font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
   font-size: 1.3em;
   letter-spacing: 0.2em;
   color: rgb(83, 171, 59);
   text-decoration: none;
   text-align: center;
   }

#link_list li a:hover {
   text-shadow: 0.1em 0.1em 0.2em gray;
   border-bottom: 2px solid rgb(147, 157, 148);
   }

#link_list li.firstMenu {
   margin-top: 3em
   }

#link_list li.menu {
   margin-top: 2em
   }

As you can see, I've pulled the inline style into the stylesheet and assigned it to "#navigation ul li a", and I've changed the previous "#links p" entries to "#navigation ul li". Since the list has been un-listified, the <li> items now work exactly the same way as the old <p> items did. In a future posting, we'll look at different ways to do the hover -- the text-shadow works, but it is kind of subtle and the blur may be a turn-off to some people.

To turn the footer area back into what it once was, you'd need to use something like this:

#footer {
   text-align: center;
   border-top: double rgb(51, 106, 36) 10px;
   }

#footer a {
   color: rgb(51, 106, 36);
   font-weight: 695;
   text-decoration: none;
   border-bottom: thin dashed;
   border-color: rgb(51, 106, 36);
   }

#footer a:hover {
   font-size: 1.15em;
   background-color: rgb(228, 245, 223);
   }

#page_info, #footer_nav {
   margin: 1em auto;
   }

#page_info li, #footer_nav li {
   display: inline-block;
   padding: 0 1em;
   }

#page_info li+li, #footer_nav li+li {
   border-left: solid black 1px;
   }

You may never have seen inline-block before. Essentially, it's a way of keeping things on the same line while allowing for properties like padding and borders. In this case, I've used padding to take the place of what used to be a space plus a non-breaking space, and I've added a one-pixel left border to the second and subsequent links in each of the lists.

That, along with using h4 and p instead of a span and a line break, gets your page looking the way it did before all of this started, but now with more semantically-sound markup. Next up, we'll look at ways to change the way the page looks, and it won't involve changing anything but the CSS.

---------- Post added at 12:05 PM ---------- Previous post was at 08:15 AM ----------

Next up is centering your content. That was the reason for adding the "container" div inside of the <body> tag. Modern browsers will all work with this CSS to center the container:

#container {
   width: 67.5em;
   margin: 0 auto;
   }

I've used 67.5 ems as the width for your content. It very closely approximates what you had as a full-width page, taking into account balanced "margins" around the content of the inner div. I'll be modifying that CSS a little further down, though.

Today's designs tend toward very simple black text on a white background. By giving the container div a background-color of white (keyword white, hex #fff, or rgb(255, 255, 255), if you prefer) and leaving the body background at its current color, you set off the content area nicely. There is an additional enhancement, though, that will work in everything except Internet Explorer (IE 9 will support it, but versions up to 8 don't), and that's to throw a shadow from the container to pop it into the foreground:

#container {
   width: 67.5em;
   margin: 0 auto;
   background-color: white;
   -moz-box-shadow: 0 0 20px rgb(63, 127, 63);
   -webkit-box-shadow: 0 0 20px rgb(63, 127, 63);
   -o-box-shadow: 0 0 20px rgb(63, 127, 63);
   box-shadow: 0 0 20px rgb(63, 127, 63);
   }

You'll notice that there are some prefixed entries in that list. These represent vendor-specific, and sometimes experimental, implementations of proposed new standards for CSS. The prefixes are:

-moz for Mozilla (Firefox and other Gecko-based browsers)
-webkit for Webkit (browsers include Safari, the Apple standard, and Google Chrome)
-o for Opera
-ms for Microsoft (Internet Explorer)

The box-shadow property has been accepted into the latest W3C draft proposal, but Mozilla, Webkit and Opera have been supporting it for some time now. It is necessary to include the prefixed versions for anybody who is running older versions, newer versions will use the non-prefixed version in preference to the prefixed version. IE users won't see the shadow until they upgrade to version 9 (which will not be available on WinXP).

That's not too bad at this point, but there is one thing you can do to modernize things considerably without making any big changes. That is to put the H2 elements into cartouches, and reverse the type:

h2 {
   color: white;
   background-color: rgb(83, 171, 59);
   font-family: Tahoma, Geneva, sans-serif;
   font-size: 1.75em;
   line-height: 2.5em;
   word-spacing: 0.15em;
   text-indent: 1em;
   text-shadow: -1px -1px 0 rgb(83, 101, 77);
   margin-top: 1.5em;
   -moz-border-radius: .75em;
   -webkit-border-radius: .75em;
   -o-border-radius: .75em;
   border-radius: .75em;
   border-top: solid rgb(212, 239, 205) 2px;
   border-right: solid rgb(83, 101, 77) 2px;
   border-bottom: solid rgb(83, 101, 77) 2px;
   border-left: solid rgb(212, 239, 205) 2px;
   }

Again, Internet Explorer users won't see the fancy rounded borders, but they'll get the overall effect of the white type on a dark background. When they upgrade to IE9, everything should work as planned.

[moniquedbabin79]

THIS IS SO WONDERFUL! Thank you so much for all of the wonderful tips and edits (both those that are absolutely necessary and those aimed at improving the look of my site). I have so much to learn, but with my experience in designing printed publications, it's been a bit maddening to have so little control over the design of my online content.

I will be going through your tips and comments one by one (once I get back from vacation next week!). I have already fixed my IDs and changed them to classes where needed. Thanks for that reminder. I just finally started getting the hang of the difference between IDs and classes within the last couple of weeks.

I've saved all of your comments! I can't thank you enough. I'll be sure to post on my progress at some point. It may take a while since I now have to stop playing (I've had the summer off to learn new things) and start working again. I hope to work on my pages now and then just so I don't lose my newly acquired knowledge.

I hope, after a while, I'll be able to contribute to the forums. I've gotten so much out of these forums already. x10 has a great little community here. You guys are great!

Happy coding to you!

Best,
M. Babin

[farscapeone]

If you want to make layouts fast you should consider CSS grid systems. They are actually pre-made layout systems that let you make layouts as easy and fast as possible. There are many css grid systems and even tools to make your own but I find http://960.gs/ pretty good. It even have templates for all sorts of graphic software (like Photoshop, Fireworks, ...) so you can even design your site in the same grid system.

I strongly recommend you take a look at css grid systems!

[misson]

[...] but with my experience in designing printed publications, it's been a bit maddening to have so little control over the design of my online content.

When you come from a print background, I can certainly see how it feels that way. However, that viewpoint will only hold you back. It's not so much that you have less control over online layouts as you can create layouts that will adapt to the myriad display settings of users. It's marvelous, really, though at times maddening.