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.