|
|
|
Forum Newbie
Group: Forum Members
Last Login: 5/2/2008 1:13:15 AM
Posts: 1,
Visits: 4
|
|
| Dustin, et al: My school is using this video as part of the syllabus and I must complete each step as it appears in each video with the same results. In video three the footer cannot be persuaded to stay at the bottom. In both IE7 and Firefox2 it floats in the middle and I cannot find the problem. Does anybody spot the error? The page is posted at www.gojonnygo.clearwire.net. Appreciate any help, thanks! Jon Code as follows: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome to Core</title>
<style type="text/css">
body {
padding: 0px;
margin: 0px;
background-image: url('images/bkd-xtile.jpg');
background-repeat: repeat-x;
background-color: #FFFFFF;
clear: both;
}
.style2 {
color: #FFFFFF;
font-family: "Lucida Sans", "Trebuchet MS", sans-serif;
background-color: #575556;
font-size: x-small;
}
.style3 {
margin-top: 25px;
margin-bottom: 25px;
}
.style4 {
padding-top: 0px;
}
</style>
</head> <body> <div style="position: relative; width: 700px; height: 221px; z-index: 1; left: 0px; top: 0px; margin-right: auto; margin-left: auto;" id="wrapper">
<div style="position: relative; width: 700px; height: 100px; z-index: 1" id="masthead" class="style1">
</div>
<div style="position: relative; width: 300px; z-index: 2; float: left; " id="leftColumn">
<div style="position: relative; width: 300px; z-index: 1" id="picture">
<img alt="a new season" src="images/new-season.jpg" width="300" height="150" /></div>
<div style="position: relative; width: 250px; height: 100px; z-index: 2; margin-left: auto; margin-right: auto" id="productBox" class="style3">
<img alt="newest products" src="images/newest_products.gif" width="250" height="25" /><div style="position: relative; width: 90px; height: 100px; z-index: 1; float: left" id="product">
<img alt="snowboard" src="images/snowboard.jpg" width="90" height="175" /></div>
<div style="position: relative; width: 155px; height: 169px; z-index: 2; top: 5px" id="productDescription" class="style4">
SERVICE<br />
Our most popular board so far in this new season. Optimized weight
for a responsive board, and a ride that's as smooth as fresh powder.
<br />
>>More Details</div>
</div>
</div>
<div style="position: relative; width: 400px; height: 313px; z-index: 3; float: right; left: 0px; top: 0px;" id="rightColumn">
<div style="position: relative; width: 400px; height: 150px; z-index: 1; background-image: url('images/bkd-welcome.gif'); background-repeat: no-repeat; background-color: #FFFFFF" id="welcomeBox">
<div style="position: absolute; width: 333px; height: 66px; z-index: 1; left: 40px; top: 64px" id="welcomeText">
We love snowboarding as much as you, well maybe even more. We're
about more than just snowboarding though, we're about inner health,
of you, and of nature.</div>
</div>
<div style="position: relative; width: 350px; height: 100px; z-index: 2; margin-left: auto; margin-right: auto; margin-top: 25px; margin-bottom: 25px" id="news">
<img alt="recent news" src="images/recent-news.gif" width="380" height="25" /><div style="position: relative; width: 350px; height: 100px; z-index: 1" id="newsContent">
First Blizzard of the Year<br />
December 6, 2006<br />
The first big blizzard of the year raced through the upper midwest
yesterday, with some areas reporting as much as SEVENTEEN INCHES of
new powder! We hope you were prepared to get out and find a run. If
you're not out there now, what are you waiting for? Why are you
reading this?</div>
</div>
</div>
</div>
<div style="position: relative; height: 100px; z-index: 2; left: auto; right: auto;" id="footer" class="style2">
Home | Products | About Us | Contact Us<br />
<br />
Terms of Use | Privacy Policy</div> </body> </html>
Watch the progress at www.gojonnygo.clearwire.net
|
|
|
|
|
Forum Newbie
Group: Forum Members
Last Login: 6/19/2008 5:58:57 PM
Posts: 2,
Visits: 47
|
|
Your missing some of what Dustin talked about when he presented this issue.
You have a floating left column and a floating right column so your footer needs to clear those. Set "clear" to "both" on the footer. This is how Dustin fixes the problem in his video. But, that is not the complete solution. In the first video Dustin arbitrarily expands the height of "wrapper". At some point he must have cleared the height on "wrapper" but he doesn't demonstrate it in the videos. He must have done it in-between the first and second videos. I see that you do have this value set. Clear the "height" value on "wrapper". You should find that the footer will fall into position after changing these settings. You might want to check the "height" value on your "rightColumn" as well.
I hope that helps.
|
|
|
|