PDA

View Full Version : footer issues doesn't want to say on bottom



kao
Jan 24th, 2010, 09:07 PM
I cannot for the life of me figure out why its going to the right when a large amount of text is placed on the page. it works fine with a small amount of text.


here is the css




<style type="text/css">

* {
margin: 0;
}

html
{
height: 100%;
}

body
{
height: 100%;
background-image:url('http://www.furrykingdom.org/pics/whiteuped1.png');
background-repeat:repeat-x;
background-color:#cccccc;
}

.wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
text-align:center;
}

#nav
{
font-size:20px;
text-align:center;
font-family:Segoe Print;
font-weight:bold;
padding-top:10px;

}

#nav a
{
padding: 0px 15px 0px 15px;
border: 3px solid #000000;
-moz-border-radius: 22px;
-webkit-border-radius: 22px;
border-radius: 22px;
-khtml-border-radius:22px;
color:black;
text-decoration:none;
}

#nav a:hover
{
background-color:#cccccc; opacity:0.8;filter: alpha(opacity=80);
}

#nav a:link
{
text-decoration:none;
}

#main
{
text-align:center;
}

#left
{
float:left;
width:18%;
text-align:left;
padding: 0% 0% 0% 1%;
font-size:18px;
}
.snav
{
font-size:18px;
text-align:left;
font-family:Segoe Print;
font-weight:bold;
padding-top:10px; /* pushes entire contaner */



}

.snav li
{
margin-bottom: 10px;
list-style-type:none
}

.snav a
{
padding: 0px 15px 0px 15px;
border: 3px solid #000000;
-moz-border-radius: 22px;
-webkit-border-radius: 22px;
border-radius: 22px;
-khtml-border-radius:22px;
color:black;
text-decoration:none;



}

.snav a:hover
{
background-color:#ffffff; opacity:0.9;filter: alpha(opacity=90);
}

.snav a:link
{
text-decoration:none;
}

#center
{
float:left;
width:60%;
padding: 0px 1% 0px 1%;
border-radius: 22px;
text-align:left;
}

#center p
{
font-size:36px;
text-align:center;
font-weight:bolder;
font-family:Segoe Print;

}

.safec
{
display:none;
text-align:center;
font-size:1.2em;
}

#right
{
float:right;
width:18%;
text-align:left;
padding: 0px 1% 0px 0px;
font-size:18px;

}
.footer, .push

{


text-align:center;
height: 4em;
}

/*
.footer a
{
text-decoration:none;
font-size:12px;
color:blue;
}
.footer a:hover

{
color:black;
font-weight:bold;
}

.footer a:link
{
text-decoration:none;
} */

</style>


and here is all the code



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Solitude Underground</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<!-- <link rel="stylesheet" href="mystyle.css"> -->

<style type="text/css">

* {
margin: 0;
}

html
{
height: 100%;
}

body
{
height: 100%;
background-image:url('http://www.furrykingdom.org/pics/whiteuped1.png');
background-repeat:repeat-x;
background-color:#cccccc;
}

.wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
text-align:center;
}

#nav
{
font-size:20px;
text-align:center;
font-family:Segoe Print;
font-weight:bold;
padding-top:10px;

}

#nav a
{
padding: 0px 15px 0px 15px;
border: 3px solid #000000;
-moz-border-radius: 22px;
-webkit-border-radius: 22px;
border-radius: 22px;
-khtml-border-radius:22px;
color:black;
text-decoration:none;
}

#nav a:hover
{
background-color:#cccccc; opacity:0.8;filter: alpha(opacity=80);
}

#nav a:link
{
text-decoration:none;
}

#main
{
text-align:center;
}

#left
{
float:left;
width:18%;
text-align:left;
padding: 0% 0% 0% 1%;
font-size:18px;
}
.snav
{
font-size:18px;
text-align:left;
font-family:Segoe Print;
font-weight:bold;
padding-top:10px; /* pushes entire contaner */



}

.snav li
{
margin-bottom: 10px;
list-style-type:none
}

.snav a
{
padding: 0px 15px 0px 15px;
border: 3px solid #000000;
-moz-border-radius: 22px;
-webkit-border-radius: 22px;
border-radius: 22px;
-khtml-border-radius:22px;
color:black;
text-decoration:none;



}

.snav a:hover
{
background-color:#ffffff; opacity:0.9;filter: alpha(opacity=90);
}

.snav a:link
{
text-decoration:none;
}

#center
{
float:left;
width:60%;
padding: 0px 1% 0px 1%;
border-radius: 22px;
text-align:left;
}

#center p
{
font-size:36px;
text-align:center;
font-weight:bolder;
font-family:Segoe Print;

}

.safec
{
display:none;
text-align:center;
font-size:1.2em;
}

#right
{
float:right;
width:18%;
text-align:left;
padding: 0px 1% 0px 0px;
font-size:18px;

}
.footer, .push

{


text-align:center;
height: 4em;
}

/*
.footer a
{
text-decoration:none;
font-size:12px;
color:blue;
}
.footer a:hover

{
color:black;
font-weight:bold;
}

.footer a:link
{
text-decoration:none;
} */

</style>

<script type="text/javascript">
function showItem(show)
{
for ( var nm = 1; nm < 100; ++nm )
{
var div = document.getElementById("div" + nm);
if ( div == null ) return; //invalid
div.style.display = ( div.id == show ) ? "block" : "none";
}
}
</script>




</head>
<body>
<div class="wrapper">


<div id="main">
<img src="http://www.furrykingdom.org/pics/bb2.png" width="728" height="120" alt="" title="" border="0" align="">
<div id="nav">
<a href="">Home</a>
<a href="">Forum</a>

<a href="">Gallery</a>
<a href="">The Team</a>
<a href="">Safety</a>
<a href="">About</a>
<a href="">Links</a>
</div><!-- nav -->

<br><br>


<div id="left">
<div class="snav">
<ul>

<li><a href="#" onclick="showItem('div2');">monie</a></li>
<li><a href="#" onclick="showItem('div3');">monie</a></li>
<li><a href="#" onclick="showItem('div4');">monie</a></li>

<li><a href="#" onclick="showItem('div5');">monie</a></li>
</ul>
</div><!-- snav -->
</div><!-- left -->


<div id="center">
<p>Saftey is delecious Saftey is delecious Saftey is delecious Saftey is delecious Saftey is delecious
Saftey is delecious Saftey is delecious Saftey is delecious Saftey is delecious Saftey is delecious
Saftey is delecious Saftey is delecious Saftey is delecious Saftey is delecious Saftey is delecious
Saftey is delecious Saftey is delecious Saftey is delecious Saftey is delecious Saftey is delecious
Saftey is delecious Saftey is delecious Saftey is delecious Saftey is delecious Saftey is delecious
Saftey is delecious Saftey is delecious Saftey is delecious Saftey is delecious Saftey is delecious
Saftey is delecious Saftey is delecious Saftey is delecious Saftey is delecious Saftey is delecious
Saftey is delecious Saftey is delecious Saftey is delecious Saftey is delecious Saftey is delecious
Saftey is delecious Saftey is delecious Saftey is delecious Saftey is delecious Saftey is delecious

</p>





<div id="div1" class="safe" style="text-align:center; font-size:1.2em;"> testing love in heck</div>
<div id="div2" class="safec">pie is the best stuff</div>
<div id="div3" class="safec">another random sentence</div>
<div id="div4" class="safec">lift live life</div>
<div id="div5" class="safec">its a masive fog</div>



</div> <!-- center -->


<div id="right">
&nbsp;
</div><!-- right -->


</div><!-- main -->

<div class="push"></div><!-- push -->

</div><!-- wraper -->

<div class="footer">

<a href="">Home</a>&nbsp; |&nbsp; <a href="">Forum</a>&nbsp; |&nbsp; <a href="">Gallery</a>&nbsp; |&nbsp; <a href="">The Team</a>&nbsp; |&nbsp; <a href="">Safety</a>&nbsp; |&nbsp; <a href="">About</a>&nbsp; |&nbsp; <a href="">Links</a>

<br>

Copyright &copy; 2009-2010 Solitude Underground. All Rights Reserved


</div><!-- footer -->


</body>
</html>



and the working.... welll not working example is here



http://solitudeunderground.com/working/su.html


and thx for your help.

Excavator
Jan 24th, 2010, 09:51 PM
Hello kao,
You probably just need to clear that -

.footer, .push

{


text-align:center;
height: 4em;
clear: both;
}

I used to use this method but found it too confusing to pass along to new coders. This is a simpler full height layout (http://nopeople.com/CSS/full-height-layout/index.html) that works in all browsers.

kao
Jan 24th, 2010, 10:16 PM
Awesome thanks, that did the trick.

This is my first time using css to this magnitude in creating a site.

I'm still learning all of the finer details.


so the clear:both; stopped the footer div from floating back up basically?

Excavator
Jan 24th, 2010, 10:53 PM
so the clear:both; stopped the footer div from floating back up basically?

It had room to move up to be next to a float, until we told it not to. clear:both; tells it not to allow anything on either side of it.

kao
Jan 24th, 2010, 11:25 PM
ok I think I got it thanks a bunch ^^.