Jump to content

Position footer so that it does not scroll up the page


capnhud

Recommended Posts

I tried to make it so that the contentwrapper and the footer would always meet no what content was in the content wrapper, but now all I get it is the repeating up the page. The only that I have made it so that they meet is that I have to indicate the height of the contentwrapper and then add negative margin to footer so they meet. I am sure that is not the correct way to do that. Is there a tutorial something that can help out with this situation?

Edited by capnhud
Link to comment
Share on other sites

The method I use to place the Footer at the bottom of the page is Ryan Fait Sticky Footer.

Google it. It uses the height of the footer and negative margins. Works for me. On long pages, the footer is off the display, but on the shorter pages it is at the bottom of the display. As I read your question, that is what you are asking for, I think.

Edited by jlhaslip
Link to comment
Share on other sites

You've positioned the footer absolute. You can do it that way, but not in conjunction with the other way also. You obviously did not read what my tut wrote (or Ryans Faits for that matter). Why don't you try the advice given within first, and then we'll go from there.

 

To recap, you can do it like this, or like this, but not both.

 

Or you can try your hand at Pauls - more or less the same stuff. He also debunks Ryans method in there.

 

Or Ray has a couple demos of the same also.

Edited by Eric
Link to comment
Share on other sites

Rays tutorial indicates to do it one way I try that, but the footer stays stuck in the middle I try your way I get a big gap like what is showing now. So I am not understanding when you say I cannot do it two when I am only trying to do one way.

Link to comment
Share on other sites

Unless I am missing something I have followed everything on this page

And the paragraph tag is at the very bottom. So what did I obviously not read.

 

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, input, textarea, p, blockquote, th, td {
[b]margin:0;
padding:0;[/b]
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0 none;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-style:normal;
font-weight:normal;
}
ol, ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
caption, th {
text-align:left;
}
q:before, q:after {
content:'';
}
abbr, acronym {
border:0 none;
}
body.mceContentBody {
background:#FFFFFF url() repeat scroll 0 0;
color:#000000;
text-align:left;
}
body, html {
background:transparent url(bkgrnd.png) repeat-x scroll 0 0;
[b]height:100%;
overflow:inherit;[/b]
}
#bodywrapper {
[b]margin: 0 auto;
min-height:100%;
width:960px;[/b]
}
* html #bodywrapper {

[b]height:100%;[/b]


}
#header {
height:120px;
margin:0 0 6px;
}
#nav {
background:transparent url(table.png) repeat scroll 0 0;
font-family:Arial, Helvetica, Sans-serif;
font-size:13px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
height:145px;
line-height:1.2;
margin:0 auto;
width:960px;
}
#nav ul li {
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
width:120px;
}
#nav ul li a {
background:transparent url(nav_image.png) repeat-x scroll -81px 100%;
border-right:1px dotted #C2C2C2;
color:#f9f9f9;
display:block;
height:26px;
padding-top:12px;
text-align:center;
text-decoration:none;
visibility:visible;
}
#nav ul li a:hover {
background:transparent url(nav_image.png) repeat-x scroll -40px 0;
}
#nav ul, #nav ul ul li {
margin:0;
padding:0;
position:relative;
z-index:100;
}
#nav ul li ul {
height:40px;
left:-999em;
position:absolute;
top:38px;
z-index:100;
}
#nav ul li:hover ul ul, #nav ul li.sfhover ul ul {
left:-999em;
}
#nav ul li:hover ul, #nav ul li.sfhover ul, #nav ul ul li:hover ul, #nav ul ul li.sfhover ul {
left:auto;
}
#nav ul ul.subhor-1item li {
width:120px;
z-index:100;
}
#nav ul ul.subhor-2items li {
width:240px;
z-index:100;
}
#nav ul ul.subhor-3items li {
width:160px;
z-index:100;
}
#nav ul ul.subhor-4items li {
width:120px;
z-index:100;
}
#nav ul ul ul li {
clear:left;
}
#nav ul li:hover a, #nav ul li.sfhover a, #nav ul li a:hover {
background:#777777 none repeat scroll 0 0;
color:#EEEEEE;
}
#nav ul li a:hover {
background:transparent url(nav_image.png) repeat-x scroll -40px 0;
}
#nav ul li ul li a:hover {
background:transparent url(subver_bg.png) repeat scroll 0 0;
color:#FFFFFF;
}
#nav li#contact {
margin-right:-10px;
}
#nav li#contact a {
border-right:0 none;
}
#contentwrapper {
background:transparent none repeat scroll 0 0;
border-bottom:1px solid #C2C2C2;
border-left:1px solid #C2C2C2;
border-right:1px solid #C2C2C2;

min-height:100%;

position:relative;
width:958px;
margin:0 auto;
}
#headlinewrapper {
height:358px;
margin:-95px auto 0;
position:absolute;
top:26px;
width:960px;
z-index:1;
}
#leftheadline {
background:#940000 none repeat scroll 0 0;
height:300px;
left:10px;
margin:0 auto;
padding:0;
position:absolute;
color:#f9f9f9;
top:26px;
width:180px;
}
#leftcontent img{
background-color:transparent;
height:275px;
padding:10px 0 15px 15px;
position:relative;
width:165px;
text-decoration:none;
color:#f9f9f9;
font:normal 11px/1.2 arial, helvetica, sans-serif; 
}
#rightheadline {
background:#940000 none repeat scroll 0 0;
height:300px;
margin:0 auto;
padding:0;
color:#f9f9f9;
position:absolute;
right:10px;
top:26px;
width:180px;
}
#rightcontent img{
background-color:transparent;
height:275px;
padding:10px 15px 15px 0;
position:relative;
width:165px;
text-decoration:none;
color:#f9f9f9;
font:normal 11px/1.2 arial; 
}
#headlinecontainer {
background:transparent url(headshadow.png) no-repeat scroll center top;
height:358px;
left:186px;
padding-top:1px;
position:relative;
width:588px;
z-index:5;
}
#simplegallery {
margin-left:4px;
margin-top:3px;
position:relative;
visibility:hidden;
}
#simplegallery .gallerydesctext {
padding:2px 5px;
text-align:left;
}
/*This the middle content styling */
.middlecontent {
 background: transparent;
 height: 170px;
    position: relative;
 top:315px;
   width: 960px;

}
#leftmdlcontent {
   background: transparent;
   border:none;
   color:#404040;
   padding: 0 10px;
   width:340px;
}
h4.midcaption {
   font-family:Verdana, Corbel, sans-serif;
   font-size:14px;
   text-align:left;
   padding:0 0 3px 0;
}

h3.midheadline {
   background:none;
   font-family:Arial, Helvetica, sans-serif;
   font-size:22px;
   color:#940000;
   padding: 0 0 5px 0;
   text-align:left;
}
p.midcontdesc {
font-family:Verdana, Corbel, sans-serif;
background-color:transparent;
color: #404040;
text-decoration:none;
word-spacing: normal;
text-align:justify;
letter-spacing: 0;
line-height: 1.25em;
font-size: 10px;
width:220px;
}
.middlecontent img {
   float:right;
   padding:0;
   border:1px solid #333;
   margin: -48px 0 0 10px;
}
#mdlmdlcontent a {
 background: transparent;
 border-left: 1px dotted #333;
 height: 170px;
 padding: 0 0 0 12px;
 position: absolute;
 right: 395px;
 top: 0;
   width:190px;
}
#mdlmdlcontent img {
   position:relative;
   margin: 0 auto;
   top:0;
}
#rightmdlcontent {
 background: transparent;
 border-left: 1px dotted #333;
 color: #404040;
 padding: 0 10px;
 position: absolute;
 right: 0;
 top: 0;
 width: 340px;
}
/* End of middle content styling */
/* This is the beginning of the bottom content */
.bottomctnt {
   background: transparent;
 height: 245px;
    position: relative;
   top:345px;
 width:960px;

}
.bottomctnt h3 {
   background:url(h3bkgrnd.png) repeat scroll 0 0;
   height: 26px;
   color:#f9f9f9;
   font:normal 20px/1.2em Arial, Helvetica, sans-serif;
   padding:0 0 0 5px;
   text-align:left;

}

.bottomctnt h4 {
   height: 18px;
   color:#f9f9f9;
   font:normal 20px/1.2em Arial, Helvetica, sans-serif;
   padding:5px 5px;
   text-align:center;
}
.bottomctnt h5 {
   background:none;
   color:#940000;
   font: normal 14px/1.2 Verdana, Corbel, sans-serif;
   padding:5px 5px;
   text-align: center;
}

#bottomfrst {
left:10px;

position:relative;
width:220px;
}
#bottomfrst ul .news {
   background:transparent;
   padding:5px 6px;
   width:220px;
   font:normal 11px/1.22em Verdana, Corbel, sans-serif;
   color:#404040;
}
#bottomfrst a {
   background:none;
   color:#940000;
   text-decoration:none;
}
#bottomscnd {
left:250px;
margin: -334px auto 20px;
position:relative;
width:220px;
}
#bottomscnd img {

border:1px solid #333;
padding:0;
margin:10px auto;
}

/* This begins the footer section */


#footer{
background:transparent url(footer.png) repeat scroll 0 100%;
[b]height:183px;
margin:-183px auto 0;[/b]
font:normal 11px/1.2 arial, helvetica, sans-serif;
color:#f9f9f9;
}
#footer p {
text-align:justify;
margin:105px 160px 0;
}
#ftrnav {
background:transparent none repeat scroll 0 0;
border:medium none;
color:#f9f9f9;
line-height:1.22em;
right:125px;
margin-top:-31px;
padding:15px;
position:absolute;
}
#ftrnav li {
display:inline;
padding:15px;
}
#ftrnav a {
color:#f9f9f9;
text-decoration:none;

}
p {
   [b]padding:0 0 183px;[/b]
}

Edited by capnhud
Link to comment
Share on other sites

Your page needs a major overhaul I'm afraid. Wickman's good at that! From what I can tell, the footer is not sticking because everything is position relative.

 

You can only use the same id once per page (#bodywrapper). You can only have have one div with a min-height 100% per page. The "p" with the padding-bottom in my tut was only an example. You put the padding on one of your existing elements. If you remove the positioning from .bottomctnt you'll see that the footer falls into place. But of course that breaks your layout. So... an overhaul I'm afraid...

Link to comment
Share on other sites

Your page needs a major overhaul I'm afraid

 

I came to the same conclusion when I woke up this morning. Only this time I started with a background and footer to begin with and will continue from there. I did not know min-height could only be used once. Thanks for the information.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...