PDA

View Full Version : Resolved Multi-layer footer



wldrumstcs
Feb 3rd, 2010, 07:07 AM
I am trying to create a footer for my page that has a few different elements, but I can't seem to get it to work. Here's a sketch of what I want it to look like:

stats_____________________________rules
showstats_________FOOTER_________showrules

In other words, showstats and showrules are along the bottom of the page, stats is just above showstats, and rules is just above showrules.

Here's the link to the page on which I have failed miserably. What do you think I did wrong? My site (http://www.myfsjournal.com/blackjack/deck.php)

Here's an easier-to-read outline of my code -

My CSS:


<style type="text/css">
html,body
{
margin:0;
padding:0px;
height:100%;
}

#container
{
min-height:100%;
position:relative;
}

#body
{
padding:10px;
padding-bottom:20px;
}

#header
{
width:235px;
background:#FFF;
padding:10px;
}

#footer
{
position:absolute;
bottom:0;
width:100%;
height:20px;
background:#FFF;
border:1px solid;
clear:both;
}

#showrules
{
cursor:pointer;
position:relative;
float:right;
background:#FFF;
bottom:0;
height:20px;
width:235px;
border:1px solid;
z-index:2;
clear:left;
}

#rules
{
position:relative;
background:#FFF;
float:right;
padding:3px;
width:235px;
bottom:20px;
border:1px solid;
clear:left;
}

#showstats
{
cursor:pointer;
position:absolute;
background:#FFF;
float:left;
bottom:0;
height:20px;
width:235px;
border:1px solid;
z-index:2;
clear:right;
}

#stats
{
display:block;
cursor:default;
position:absolute;
background:#FFF;
float:left;
bottom:20px;
width:235px;
height:auto;
border:1px solid;
clear:right;
}
</style>


And a summary of my html:


<div id="footer">
<div id="showrules" onclick="window.location = 'javascript:animateRules();'">
Show Rules
</div>
<div id="showstats" onclick="window.location = 'javascript:animateStats();'">
Show Stats
</div>
<div id="stats" align="center">
<div style="border:1px solid;margin:3px;"><strong>Stats against dealer's upcard</strong></div>
BLAH
</div>
<div id="rules" align="left">
<div align="center" style="border:1px solid"><strong>Rules</strong></div>
BLAH
</div>
</div>

jenius
Feb 3rd, 2010, 07:13 AM
This looks like a float issue, and those usually arise as a result of not clearing floats.

Try clearing your floats using the "clear" property. I usually do "clear: both" whenever I have a float problem and this does the trick, but you have floats left and right here, so that could get sticky. I would shoot for clear: left on the right ones and clear: right on the left ones.

More on the css clear property: http://www.w3schools.com/Css/pr_class_clear.asp

wldrumstcs
Feb 3rd, 2010, 07:31 AM
Hmmm good suggestion, but that unfortunately didn't work. I agree that it is probably a float issue, but as a CSS newbie, I'm sort of lost. I edited my posted CSS code to reflect the recommended changes.

jenius
Feb 3rd, 2010, 08:37 AM
Ok, I see why this is happening. When you float something to the right, it will stack against anything already there. The way to fix this is to contain both the "show rules" and "rules" divs and float that containing div to the right. I would do this on the left as well for consistency.

Sorry, it wasn't a clear issue and I was wrong :(

I hope this makes sense - as an example, you could do this:

CSS



#rulescontainer {
clear:left;
float:right;
height:20px;
width:235px;
}

#showrules
{
cursor:pointer;
position:relative;
background:#FFF;
bottom:0;
height:20px;
width:235px;
border:1px solid;
z-index:2;

}

#rules
{
position:relative;
background:#FFF;
padding:3px;
width:235px;
bottom:20px;
border:1px solid;
}

#statscontainer {
clear:right;
float:left;
height:20px;
width:235px;
}

#showstats
{
cursor:pointer;
position:absolute;
background:#FFF;
bottom:0;
height:20px;
width:235px;
border:1px solid;
z-index:2;
}

#stats
{
display:block;
cursor:default;
position:absolute;
background:#FFF;
bottom:20px;
width:235px;
height:auto;
border:1px solid;
}


HTML


<div id="footer">
<div id="rulescontainer">
<div id="showrules" onclick="window.location = 'javascript:animateRules();'">
Show Rules
</div>
<div id="rules" align="left">
<div align="center" style="border:1px solid"><strong>Rules</strong></div>
BLAH
</div>
</div> <!-- /rulescontainer -->
<div id="statscontainer">
<div id="showstats" onclick="window.location = 'javascript:animateStats();'">
Show Stats
</div>
<div id="stats" align="center">
<div style="border:1px solid;margin:3px;"><strong>Stats against dealer's upcard</strong></div>
BLAH
</div>
</div> <!-- /statscontainer -->
</div> <!-- /footer -->


Thanks for making this post so clear and having relatively clean code :) and hope this works!

wldrumstcs
Feb 3rd, 2010, 09:43 AM
One thing I am noticing now is that for some reason I have a bit of an overflow on the "footer" even though its width=100%. If I set "overflow:hidden" on the "footer", then I lose my "rules" and "stats". They are no longer visible. However, I want to get rid of this annoying little extra on the right side.

jenius
Feb 3rd, 2010, 06:15 PM
This might be because of the border around the content, because it seems like the overflow is only by like 1px. Try giving the right container and/or the footer box a small outer margin maybe? This is strange though, and definitely annoying. If that doesn't work, you could try overflow: auto; as well and see if that makes a difference...

And if all else fails and it comes down to it, you could always set the width to like 99% and see if that does the trick. And if all of this fails, let me know and I'll bust out firebug again haha

wldrumstcs
Feb 3rd, 2010, 08:39 PM
I wound up just adding padding to the container div and just doing away with the footer all together. It looks fine, and I can do without the white strip on the bottom. Thanks for all your help though!