Jump to content
Stef's Coding Community
lesley

footer

Recommended Posts

I am having trouble with my footer. It does not show up in the correct place. I have read alot online about Sticky Footer, but i guess i am not placing the code in the correct places. Is there a somple way to just place my footer below all my content? I dont even care if it always sticks to the bottom. When i use clear:both - the footer goes to the right top side of the page.

 

Thanks.

Share this post


Link to post
Share on other sites

Personally I'm not a fan of absolute positioning. I think its asking for trouble. I would put the whole site inside a div called #wrapper then use css for positioning. You have a misplaced

tag as well. Cut and paste that whole tag in between your head tags.

 

The footer is only 50px tall. In the style sheet you have it declared as 88px tall. Thats causing a gap.

Share this post


Link to post
Share on other sites

Your footer style is:-

#footer {

height: 88px;

width: 1001px;

clear: both;

position: absolute;

bottom: 0px;

background-image: url('images/footer-psd.jpg');

}

 

where clear: both; has no effect for a position: absolute div as they take no account of the position of other elements, so clear: both means nothing.

 

Your #footer starts at the bottom of the window after first loading the page, but when you scroll, it scrolls up, so get rid of position: absolute and keep the clear: both and let it sit under all the other content (it won't be a sticky footer which requires different code).

 

If you want to try a sticky footer, items 1a and 1b here show different types:-

http://w ww.wickham43.net/headerfooterfix.php

Edited by Wickham

Share this post


Link to post
Share on other sites

Thanks for the replies. I guess i am clueless when it comes to the absolute positioning.

I made changes toticanew .com and now the footer doesnt even show up. But i do have all my content in a wrapper.

Also, i tried taking out all the "position: absolute" but then all my images showed up horizontal across the page instead of verticle. Any other suggestions?

Share this post


Link to post
Share on other sites

I didn't reply to you earlier because I have never seen a page layout with so many absolute positioned divs, so it seemed kind of overwhelming to me.

 

Absolute position can be used in a relatively positioned div as it is bounded by its containing div. It is usually only used for a specific reason. Is there a reason for you to have absolute positioning? Clear both only works with floats, it has no effect on absolute position.

 

I think the solution to your problem it to use a container or wrapper and put everything within this and position them with floats and margins, as suggested by JBall. From what I saw of your code you just need to recode your css and remove position: absolute, then change the top, bottom, left, right positioning to margins to make your divs float to their new positions. Not simple, a total rewrite but which will give you a layout which is adaptable to any length of page which is not the case with your actual layout.

Share this post


Link to post
Share on other sites

This sorts it out with a sticky footer like item 1a in my previous post's link:-

http://w'>http://w ww.wickham43.com/forumposts/lesleyticanew090212.html

CSS file:-

http://w ww.wickham43.com/forumposts/lesleypublic090212.css

 

I started by making the #footer not position: absolute so that it sits below the #wrapper div. As noted, you had all the others position: absolute too, so the #wrapper needs to be position: relative with a height (not 100%) and the position: absolute divs sit inside it. I haven't edited any of the top and left positions so you may need to fine-tune them.

 

The TICA Home and Members links were out of position in IE7 because of the top margin on the

tag so I added a style for this to make it 0.

 

Some height: 100% were deleted.

 

I then added position: fixed; bottom: 0; to #footer and a margin-bottom: 35px; to #wrapper so that there is space for the #footer.

 

IE6 doesn't operate position: fixed so the #wrapper margin-bottom needs to be 0 in a conditional comment in the head section and IE6 will just show the #footer under the #wrapper.

 

The title in the html markup has been deleted and the page validates.

Share this post


Link to post
Share on other sites

wow, i cant thank you enough for your help!

Wickham, the changes you made really helped me understand what i was doing wrong. I do have a question about the wrapper. Since it as a height, what happens if i place alot of content in the center, won't it run out of room?

I am now going to try and work on the rest of the absolute positioning as suggested by JBall and virtual.

Thanks agian!

Share this post


Link to post
Share on other sites

Yes, the auto worked well, thanks!

 

Now i have taken out all the absolute positioning and changed up the code to make things work. It looks good in IE, but all other browsers (opera, firefox, safari) are showing the divs out of order?

Share this post


Link to post
Share on other sites

You need to move your content div from the bottom to just below the member div. Before, you were using absolute positioning which makes your div appear at the exact pixel you specify. When you remove the absolute you need to position the divs in the order they will appear on the page.

Share this post


Link to post
Share on other sites

ok, things are lining up corretly in the other browsers now. However, the content div sits higher than the right and left. How do i get these all to line up together? I tried to add a float:left but it didnt work.

 

THanks

Share this post


Link to post
Share on other sites

I believe you need to take the margin rules out of the css for the #content div.

 

#content {
   height: auto;
   width: 570px;


   padding: 10px 0 10px 10px;
   text-align: justify;
   background-repeat: no-repeat;
   background-color: #ffffff;
   background-image: url('images/content-psd.jpg');
}

Share this post


Link to post
Share on other sites

Hmm, you may also want to put the footer div inside the wrapper div.

 

Lose position: reletive; in the wrapper css rules and add

 

margin-left:auto;
margin-right:auto;

Edited by JBall

Share this post


Link to post
Share on other sites

Well, that made the whole page centered, which is something i've wanted to do - so thanks for that! However, the content div and the left and right are still not lining up together.

Share this post


Link to post
Share on other sites

I worked on your html and css and changed a few things round in both files, too many to mention here. You can see the changes at:

htt p://emasai. com/Various/index.html and htt p://emasai. com/Various/public.css

 

Just so you understand when you float a column you do not need to float its contents unless you want 2 separate columns within that particular column. I also removed all the absolute positioning from your divWNwidgets as they contents just sit within the video div that contains them.

Share this post


Link to post
Share on other sites

Glad to hear you have figured it out.

 

While you are working on it, you should try and remedy your validation errors (53). Some of them are caused by Flash, but not all of them.

Share this post


Link to post
Share on other sites

Hello agian, new question. I have a div called menubot which makes the color for the bottom of them menu on the left. I want it to fill the height of the screen. I tried setting the height to auto, but i am not placing any content in this div. I have also set the height to 100% and it made no change. I also tried setting the height of div LEFT to 100% and there was no change. suggestions?

Share this post


Link to post
Share on other sites

thanks! I was able to make my left column go down the page, thanks to your article. i actually layered 2 faux columns.

 

However, i want the bottom of the menu to show on my shorter pages. right now on the homepage, it is too short so it cuts off the tan color at the bottom.

 

Here is where the menu looks short: http://ticanew.com/public/about.php

 

Look at the bottom of them menu on this page - i want all my pages to be like this: http://ticanew.com/public/classifieds.php

 

thanks!

Share this post


Link to post
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...