Help With Template Design - Page 3

James · #31 (**permalink**) 11-20-2008, 06:58 PM

Are you good or what! I thought I got a little jump on you but I guess not.

Good work.

At this point I am assuming that you want the site to look pretty much as you had it before. If I am wrong let me know. Otherwise I will apply colors and backgrounds, etc., to look as you do in your online site only with css.

alana r · #32 (**permalink**) 11-20-2008, 07:17 PM

Thanks,

you make it very easy for me to do it

I am already getting to understand much more than i did about how it all works

Id like to keep it pretty much the same, but am open to suggestions, I dont have the best eye for colours, thats why it was a white background in the first place

just a question though, when I look at it in the browser, the left and right blue areas dont go all the way down the page to join the footer. the blue stops about halfway, is it supposed to be like that for now?

James · #33 (**permalink**) 11-20-2008, 07:41 PM

Alana,

Yes, for now the lengths will have to be that way. If you stay with the white background of course it is no problem. If the columns are different colors it is extremely difficult to manage.

I have a way that I use but it is imperfect as are most (all?) ways of doing it. It would be the last thing on any page and has to be adjusted whenever content changes for each page. Even with absolute sizes for example things change when people change text size (zoom) due to poor eyesight.

alana r · #34 (**permalink**) 11-20-2008, 07:52 PM

I can stay with the white background then, I dont mind, its the way it was anyway

alana r · #35 (**permalink**) 11-20-2008, 08:04 PM

James

Its after 2 now again so I have to go

If theres anything you want me to do, I will check back in the morning

thanks for all your help today

goodnight

lisa · #36 (**permalink**) 11-20-2008, 09:56 PM

James you are so incredibly awesome for helping like this.

James · #37 (**permalink**) 11-21-2008, 12:36 AM

Let's work on the header now. First open the index file and look for the header div near the top.

<div id="header"><span class="style1">
</span>
</p>
</div>

There are no class style1 instructions in the css file so delete this part of the code in the html. Also remove the </p> which is missing the opening <p>. Delete all of this to get it out of the way and avoid confusion:

<span class="style1">
</span>
</p>

Then add the following into the header div:

<h1>THE CHILDREN'S PARTY PLANNER</h1>
<h3>Everything you need to know to plan your children's party</h3>

Open the style.css file and change the #container width setting from 850px to 1028px.

Old:
#container {
width: 850px;
margin-right: auto;
margin-left: auto;
}

New:
#container {
width: 1028px;
margin-right: auto;
margin-left: auto;
}

Now look for the #header section (next item under #container). There are several changes to make here. You need to change the width to 1028px and for the header a height of 200px. I have made a new image file for the header and named it "partyheaderback.png" for your header background so the image url must be changed. Finally, there needs to be a text-align of "center" so the site name will be centered in the header.

Old:
#header {
height: 100px;
width: 850px;
background-image: url(images/header.jpg);
}

New:
#header {
height: 200px;
width: 1028px;
background-image: url(images/partyheaderback.png);
text-align: center;
}

Now we need to provide some padding over the page title. This requires two steps. First put an id on the title which is now a <h1> header in the header div. After changing it, it will read:

<h1 id="title">THE CHILDREN'S PARTY PLANNER</h1>

Second add a new section in the css file:

#title {
padding-top: 50px;
}

It would be reasonable to add this right under the header id entry. With these two entries the title should drop down between the balloons.

Now we want to remove the color behind the navigation column and the right side column. Before doing that we have to make a correction to prevent what could be a shocking experience. We could see the whole left column seem to disappear! Look. The text is white! If the background is white, too, nothing will show. So first we will change the text color of the links. Look for this section of the css style sheet and change the color to #FF0099; as shown.

#leftnav a:link, .navlist a:visited
{
color: #FF0099;
text-decoration: underline;
font-weight: bold;
}

Now we will delete a couple of lines in the left and right column codes. Under #leftnav as shown below and under #sidebar, delete the line: background-color: #30D9F4;. Delete height on each of these two (without color no need to set). Also, with a wider page we increase the width of these two outside columns.

Old:
#leftnav {
float: left;
width: 140px;
height: 400px;
background-color: #30D9F4;
padding: 5px;

New:
#leftnav {
float: left;
width: 160px;
padding: 5px;
}

New settings:
#sidebar {
padding: 10px;
float: right;
width: 160px;
}

Corresponding to this, it is now important to change some settings in the #content. The width and both right and left margins must be increased.

New settings:
#content {
width: 628px;
padding: 10px;
margin-right: 180px;
margin-left: 180px;

This is a lot of stuff! Hope I haven't gotten myself confused and left out something I did myself. We will see. This is enough for this post.

alana r · #38 (**permalink**) 11-21-2008, 08:00 AM

hi

Have done all of part 4

was saving and checking in browser as i went and all was fine until I completed this section

"Now we will delete a couple of lines in the left and right column codes. Under #leftnav as shown below and under #sidebar, delete the line: background-color: #30D9F4;. Delete height on each of these two (without color no need to set). Also, with a wider page we increase the width of these two outside columns."

When I finished this part and checked it in the browser, the sidebar had moved to the centre of the page, below the left nav and above the contents, not sure if I did something wrong, have gone through it and cant find anything but I must be missing something, I have to go to work soon though but I will go through it again when I get home,

Thanks,

James · #39 (**permalink**) 11-21-2008, 11:16 AM

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">
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></td>

</tr>
</table>
</div>

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.

James · #40 (**permalink**) 11-21-2008, 02:49 PM

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">
</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.

alana r · #41 (**permalink**) 11-21-2008, 04:03 PM

Hi James

Just in from work, thanks for the header image, I just got it

Will get started right away and post when im done

thanks

alana r · #42 (**permalink**) 11-21-2008, 04:34 PM

Sidebar fixed!

your way ahead of me now so am gonna get back to it, just letting you know

alana r · #43 (**permalink**) 11-21-2008, 05:55 PM

done!

hi James

no i dont use firefox, i never have but i have been reading posts here and many people seem to like it, so i could download it

The website looks good - only one thing, the bottom google ads still start at the left. I have changed the "a" to "." in the style sheet so I dont know why?

Its ok - fixed now, oh and also I placed the bottom ads above the footer rather than below it so the copyright is at the very bottom instead, will that be ok?

James · #44 (**permalink**) 11-21-2008, 08:51 PM

Alana,

Of course you can put the ads where you want! And that is one of the joys of css. You can move your divs around like you want, change their sizes and shapes, whatever. And it is recommended with ads, to try them in different places to see where they work best.

Well, here we are. This is the final part of getting the site in working order. Of course you may want to change the way some of it looks but that will be a lot easier now. You can take a copy on your computer and play with it as you want.

Here is the rest of it. Then we can work on cutting up some parts for includes.

Now we want to remove some errors from the code. Most of these are not too important, at least for now, but it is best to do this right because in the future your program may not work in some circumstances.

For example, internet sites are now being sent to phones and whatever using xml which does not work with caps instead of lower case.

Start at the top of your page, looking at the code.

Don't bother the doctype which comes first. It is not part of the html and has its own format.

There are two meta tags that are noticible right away in the head of the code:

<META Name="Description" Content="description" />
<META Name="Keywords" Content="keywords separated by commas"/>

when corrected they will look like this:

<meta name="Description" content="everything you need to know to plan your child's party with party ideas, party themes, docorations, party supplies, childrens costumes, party games and more" />
<meta name="Keywords" content="children's party,childrens party,party,kids party,party food,party recipes,kids food,birthday parties,christmas,party games,party planner,party theme,party ideas,birthday,party supplies"/>

Caps inside the quotes are OK. I have put the input into these two tags that were in your old site which you will probably want to do, also, at this time.

Drop down to the sidebar div <div id="sidebar"> which was copied from the old site. It looks fine on this page but there are a series of coding errors. We could ignore them as they probably will not cause errors in many browsers but they may in some and it will do well to learn from them.

In particular, you can see from the first situation how much time can be wasted. In every paragraph there is a styling component that should be removed: align="center" inside the opening <p> tag. If you save and reload you will see the whole column of ads jump to the left.

Now go to the #sidebar section of the styling sheet. Add just one line to the end of the code.

#sidebar {
padding: 10px;
float: right;
width: 160px;
text-align: center;

This will align to center all of the paragraphs in this whole section. Good, huh?

A large number of the image tags in this section have an error that does get flagged by the verification process, meaning it is a potential problem. There are two basic problems. First, many of the tags are not closed. For example, look at the very first one:

<img src="http://images.uk.paidonresults.net/16022/355/0/8" width="120" height="60" border="0" alt="Photo Christmas Cards - 10% Off And Free Delivery"></a> </p>

The end of the tag needs to be closed because the image tag does not have two parts as most do. In other words it should read: And Free Delivery"/>, adding the "/" before the ">."
Do this for each image tag that lacks it.

In addition, while it is only a problem for people without sight, it is considered an error to leave the alt attribute empty. There are several of these in the column as well, a full dozen of them, but since they are not your pictures I would ignore this. But I would be careful to add alt tags to any images of my own.

Now drop down to the third paragraph below the "Sponsored Listings." Here is a simple error to fix. The opening paragraph tag is missing the ">." This does not seem to be causing any problem now, but it is the kind of error that is often very difficult to find and can sometimes cause massive problems with positioning and the like.

The next two paragraph tags have the same error. So fix them, too.

At this point the page only shows twelve errors when run through the validation process. They are all from missing alt tags on pictures, so nothing to worry about.

alana r · #45 (**permalink**) 11-22-2008, 09:43 AM

James

Haven't got to do post 7 yet, Saturday mornings are busy here with the kids and I'm heading off to work in an hour so i will have to wait to do it when I get home,

Sorry for the delay
Will post when I am home again

Thanks

WB Sponsors