Since you want to use two google banner ads, we want to change the div id on the first one, and the corresponding css style to a class instead of an id. Remember, an id can be used in only one place on a given page. A class can be used many times.
Find the div for the ad banner that comes right after the header div. It looks like this:
<div id="adbanner">
Change it to read:
<div class="adbanner">
While we are here let's get rid of some excess code related to tables in the old site. At the beginning part cut out the following between the <div> tag and the <script... at :
<table width="1142" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="742" valign="top" class="bannertext">
Then near the end, cut out the
</td>
</tr>
</table>
between the </script> and the final <div>.
Here is the code for the bottom ad banner. Place it right after the footer div.
<div valign="top" height="101"> <script type="text/javascript"><!--
google_ad_client = "pub-2953905769343544";
/* 728x90, created 9/29/08 */
google_ad_slot = "5454434240";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
Now go to the style sheet and find the section that reads:
#adbanner{
margin-left: 130px;
}
Change the "#" to a "." and it will now refer to a class instead of an id. Now it will apply to both banner ads.
Comparing our site now to the old one, I will now change the size of the font in a couple of places to more closely match the original. These are the kinds of adjustments that are personal, a matter of design and taste. The good news is that now with the css in place this can be done for the whole site in just one or two places.
First, go to the navigation part of the css. Note that the font settings are in the #leftnav ul section. Change the font-size from 12 to 14.
Old:
#leftnav ul {
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
New:
#leftnav ul {
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
Now we want to do the same for the main text. This is under the p selector:
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 11pt;
margin-top: 3px;
margin-right: 0;
margin-bottom: 3px;
margin-left: 0;
padding-bottom: 9px;
}
Again, just change the font-size to 14px: font-size: 14px;
Now for the last step in this part. The first few words of several sections are in bold face. This is extremely easy in basic html. The first is:
<p><strong>The aim of this website</strong> is to help you plan your children's party, giving your children a day to remember....
Do not use the <b></b> or <i></i> tags, especially with xhtml. These are styles and are phasing out. <strong><strong> produces bold and <em></em> produces italic in most if not all browsers but are for emphasizing text and can be styled otherwise.
Do this for the other two passages as well:
<p><strong>Planning a party</strong> can be a lot of work, so...
and
<p><strong>The countdown to Christmas</strong> has started, the shops...
At this point the page should look finished. Of course there is some work ahead, but it will hopefully go quickly. Look it over and see any errors or things that need to be changed.
Alana, let me know if you use firefox.