Hi Diana,
I did have a look at the footer the first time round, but must admit that I found the way that the html and css was formatted a bit confusing, so snuck off without mentioning it. I'm not quite sure what Sculptor had in mind, the footer divs seem a bit tangled up.
If it were me, I would recreate the footer divs in a more logical (to my mind) way. From the html of the page you linked to, I would change the last few lines (from line 57 to the end) from:
<br id="clearFloat" />
</div>
<div id="footerBackground">
<p><a href="">HOMEPAGE</a> <a href="">UPDATE FORM</a> <a href="">MAIL INFO</a> <a href="">PHOTO GALLERY </a></p>
<div id="footerBottom">
<div id="footerTop">
</div>
</div>
</div>
</div>
</body>
</html>
To:
</div>
<div id="footerTop"> </div>
<div id="footerMiddle"><a href="">HOMEPAGE</a> <a href="">UPDATE FORM</a> <a href="">MAIL INFO</a> <a href="">PHOTO GALLERY </a></div>
<div id="footerBottom"> </div>
</div>
</body>
</html>
For me, 'footerTop', footerMiddle' and 'footerBottom' would make future editing a lot easier.
And in the screen.css stylesheet, to match the new divs, I would therefore replace the last three rules:
#outerWrapper #footerBackground #footerBottom #footerTop {
background-image: url("../BHS2_images/Bbhs_footerTop.png");
background-repeat: no-repeat;
}
#outerWrapper #footerBackground {
background-image: url("../BHS2_images/bhs_footerBG.png");
background-repeat: repeat-y;
color: #ffffff;
font-size: 12px;
font-weight: bold;
line-height: 18px;
text-align: center;
}
#outerWrapper #footerBackground #footerBottom {
background-image: url("../BHS2_images/bhs_footerBottom.png");
background-repeat: no-repeat;
}
with:
#footerTop {
height:28px;
background-image: url(../BHS2_images/bhs_footerTop.png);
background-repeat: no-repeat;
background-position: center;
}
#footerMiddle {
height:30px;
background-image: url(../BHS2_images/bhs_footerBG.png);
background-repeat: repeat-y;
background-position: center;
text-align: center;
padding-top: 10px;
}
#footerBottom {
height:56px;
background-image: url(../BHS2_images/bhs_footerBottom.png);
background-repeat: no-repeat;
background-position: center top;
}
Sorry this isn't too helpful from a learning point of view, but if you look at the new html code and the new css rules, you can see that it's a bit easier to see what's what.
I've had Sculptor for quite a while, but now mainly make my pages and css from scratch (if I'm not in a hurry) - as it helps me understand what can be done with css. It (CSS Sculptor) is a great help if you're starting out with css, especially when you have it write the explanatory comments along with the code.
