Alana,
There are two or three possibilities. Well, actually when you think about it we might say there are an unlimitied number of possibilities! But only a few likely ones.
Very often little things happen in the style sheet that throw things off a lot, sometimes in unpredictable ways. Two are very common because they are easy to do. One is getting an extra closing mark or leaving one out (the } mark). Less often the opening one. Second, and probably even more common, is to leave off the ; at the end of a line. I would look for those first.
Also, did you delete the entire line for the height on them? I think my instructions on that might have been a little vague. The whole line should be deleted.
Here are the two sections you mentioned, the #leftnav and the #sidebar, as I have them now. I am not sure if there were changes made in part five. If not, this is the way they should be.
#leftnav {
float: left;
width: 160px;
height: 400px;
padding: 5px;
}
#sidebar {
padding: 10px;
float: right;
width: 160px;
}
If this doesn't help, get back to me.
Post 5: When you get this done we should actually look like what we hoped for from the beginning.
Here is where we stand. There are just a few more things and the basic structure will be set. Then we will finish up some style issues such as the type face and colors. Then we will look at some functional things like the includes.
Basic structural inputs first. Put the google ad area in by pasting the code in a new div. Add the div just after the header div and above the leftnav div. Give it an id of "adbanner" and save work. (I had to remove some elements from the section that were unrelated to the google ad and could not tell for sure what belonged. This seems to work, but you may want to replace it with just the code google gives you if it is not right).
<div id="adbanner">
<table width="1142" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="742" valign="top" class="bannertext">
<script type="text/javascript"><!--
google_ad_client = "pub-2953905769343544";
/* 728x90, created 10/16/08 */
google_ad_slot = "2677571504";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></td>
</tr>
</table>
</div><!-- end of google ad banner -->
Now open the css style file and add a new item:
#adbanner{
margin-left: 130px;
}
This will move the ads away from the left side.
Now we will change the text color for the container. Add the last line as below:
#container {
width: 1028px;
margin-right: auto;
margin-left: auto;
color: #65016B;
}
The color needs to be changed in the same way for the h1, h2, and h3 sections. At the same time change the font family in all three to "Times New Roman", Times, serif. Below is the h1 to illustrate, but do all three:
h1 {
font-family: "Times New Roman", Times, serif;
font-size: 22px;
font-weight: bold;
color: #65016B;
line-height: 24px;
}
Serif type fonts are considered OK for larger type like your headers, but is harder to read in smaller sizes. I have left the content text in the non-serif font but you can change it too if you want.
Now we will replace the home page link in the header. Copy this line in the header (index file):
<p><a id="headerlink" href="index.html">HOME</a></p>
The header div should now look like this:
<div id="header">
<h1 id="title">THE CHILDREN'S PARTY PLANNER</h1>
<h3>Everything you need to know to plan your children's party</h3>
<p><a id="headerlink" href="index.html">HOME</a></p>
</div>
Notice the id for the anchor: headerlink. We now want to add that to the style sheet.
#headerlink{
font-family: "Times New Roman", Times, serif;
color: #FF0099;
text-decoration: none;
}
This matches the font and color to the header and removes the underline which is not needed in this location since it is an obvious menu type link.
We also want to remove the underlines in the left hand navigation.
#leftnav a:link, .navlist a:visited {
color: #FF0099;
text-decoration: underline;
font-weight: bold;
}
Simply change the word "underline" to "none" so that the tex-decoration reads:
text-decoration: none;
While we are working on the navigation, we need to do one more thing. The way it is now, the links in the menu disappear when visited! That is because the visited color is now white. Go to the index file and look for the #leftnav a:visited section. Change the color and text decoration lines so they read as follows:
#leftnav a:visited {
color: #0000ff;
text-decoration: none;
font-weight: bold;
}
Next we will drop down to near the bottom of the index page. Select the section of instructions for the template beginning with "<p>This area is controlled by the... " and ending with "design of this text.<br /></h3>." Delete this selection. Be careful not delete the </div> at the end.
Now look at the footer section. It is as follows:
<div align="center" id="footer">
<p>This is the footer section. To edit the colors, font style, etc. Edit the "footer" section in style.css</p>
<p class="smalltext">© 2008 Your copyright notice </p>
<p class="smalltext">(The size of the copyright notice is controlled by "smalltext" in the style sheet.)</p>
</div>
Delete the first and third paragraphs. It should now look like this:
<div align="center" id="footer">
<p class="smalltext">© 2008 Your copyright notice </p>
</div>
Now delete the last part of the remaining paragraph beginning with the "&." Now it looks like this:
<div align="center" id="footer">
<p class="smalltext">
</div>
Now look at the last entry in the content section:
<p align="center" class="copyright">©2008 thechildrenspartyplanner,
<a href="contactme.html">contact webmaster</a>, <a href="links.html">links</a></p>
Here you want to delete from the beginning up to but not including the "&."
©2008 thechildrenspartyplanner, <a href="contactme.html">contact webmaster</a>, <a href="links.html">links</a></p>
Then paste this into the footer where you took the model information out.
<div align="center" id="footer">
<p class="smalltext">©2008 thechildrenspartyplanner, <a href="contactme.html">contact webmaster</a>, <a href="links.html">links</a></p>
</div>
Go back and delete the old section from the end of the content.
Finally, let's make one more change in the style sheet. Under the #footer section delete the line for background color.
Now you can save and check it out. At this point everything should be looking almost like it did originally but the whole structure is different. It is much simpler and will be easy to work with. There is still a little to do, making the includes in particular, but this will do for this time.